/*
 * Contact Container Style.
 */
#contact-container {
    /*Pos*/
    margin: 50px 0px;

    /*Flexbox*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#contact-container-textbox {
    /*Style*/
    border-style: solid none;
    border-width: 6px;
    border-color: var(--TEXT-COLOR);

    /*Flexbox*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#contact-container-textbox>h2 {
    margin: 10px;
    font-size: 2.5em;
}

#contact-container-textbox>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.contact-text {
    margin: 10px;
    width: 30%;
    /*Flexbox*/
    display: flex;
    align-items: center;
}

.contact-text img {
    max-width: 100px;
    max-height: 50px;
    width: auto;
    height: auto;
}

.contact-text a {
    margin: 10px;
    text-decoration: none;
    font-size: 20px;

    /*Style*/
    font-size: 2em;

    /*Flexbox*/
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1700px) {
    .contact-text {
        width: 45%;
    }
}

@media screen and (max-width: 1400px) {
    .contact-text {
        width: 100%;
    }

    /*
     * Contact part
     */
    #contact-container-textbox>div {
        flex-direction: column;
    }
}

@media screen and (max-width: 700px) {
    #contact-container-textbox>h2 {
        font-size: 1.5em;
    }

    .contact-text img {
        max-width: 75px;
        max-height: 30px;
    }

    .contact-text a {
        /*Style*/
        font-size: 1.5em;
    }
}

@media screen and (max-width: 400px) {
    #contact-container-textbox>h2 {
        font-size: 1em;
    }

    .contact-text img {
        max-width: 50px;
        max-height: 25px;
    }

    .contact-text a {
        /*Style*/
        font-size: 1em;
    }
}