@font-face {
    font-family: ArchivoBold;
    src: url('../fonts/Archivo/ArchivoNarrow-Bold.ttf');
}

@font-face{
    font-family: ArvoRegular;
    src: url('../fonts/Arvo/Arvo-Regular.ttf');
}

* {
    margin: 0;
}

.contactbodyWrapper {
    width: 75%;
    /* border: 1px solid red; */
    margin: 0 auto;
    padding-top: 2%;
    font-family: ArvoRegular;
    font-size: 1.2em;
    text-align: center;
}

.contactTitleWrapper {
    width: 65%;
    margin: 0 auto;
    padding-top: 2%;
    /* border: 1px solid black; */
}

.contactTitle {
    font-size: 2em;
    color: black;
    font-weight: 500;
    font-family: ArchivoBold;
}

/* .aboutbodyWrapper {
    padding-top: 3%;
    width: 90%;
    margin: 0 auto;
    font-family: ArvoRegular;
    font-size: 1.2em;
} */

.contactText {
    display: block;
}

.contactIconsWrapper {
    padding-top: 3%;
}

.contactIcons {
    width: 5%;
}

.contactIconsWrapper a>img {
    margin-right: 3%;
}

@media screen
and (min-width: 600px) 
and (max-width: 800px) {
    .contactIcons {
        width: 8%;
    }
}

@media screen
and (min-width: 400px) 
and (max-width: 600px) {
    .contactIcons {
        width: 10%;
    }
}

@media screen
and (max-width: 400px) {
    .contactIcons {
        width: 12%;
    }
}

@media screen
and (min-device-width: 200px) 
and (max-device-width: 640px) {
    .wrapper {
        width: 100% !important;
        /* border: 1px solid red; */
    }

    .contactTitleWrapper {
        width: 70%;
        /* border: 1px solid blue; */
        font-size: 1.5em;
    }

    .contactbodyWrapper {
        width: 70%;
        /* border: 1px solid yellow; */
    }

    .contactTest {
        font-size: 2em;
    }

    .contactIcons {
        width: 10%;
    }
}