.form-control label {
    display: block;
    margin-bottom: 2px;
    font-size: 1.25rem;
}

input, textarea {
    padding: 3px; 
    width: 50%;

    -webkit-transition: background 0.2s ease;

    -o-transition: background 0.2s ease;

    transition: background 0.2s ease;
    background: rgba(134, 134, 134, 0.3);
    color: white;
    border: white 2px solid;

    font-size: 1.25rem;
    font-family: 'Nunito', sans-serif;
    text-align: center;
}

input:hover, textarea:hover {
    outline: none;
    background: rgba(124, 124, 124, 0.6);
}

input:focus, textarea:focus {
    outline: none;
    background: rgba(71, 71, 71, 0.6);
}

button { 
    border: none;
    padding: 0.8em 1.5em;

    -webkit-transition: background 0.2s ease;

    -o-transition: background 0.2s ease;

    transition: background 0.2s ease;
    background: white;

    font-size: 1.25rem;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 1.3px;
}

button:hover {
    background: rgb(182, 182, 182);
}

button:active {
    background-color: rgb(156, 156, 156);
}

.form-control { 
    margin-top: 1.5em;
    text-align: center;
}

.contact-form {
    margin-top: 1.5em;
    border-top: rgb(110, 110, 110) 2px solid;
}

.user-message { 
    min-height: 300px; 
    resize: none;
}

.contact-info {
    margin-bottom: 2em;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.info {
    font-size: 1.563rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
}

.list-spacing {
    margin-top: 1.5em;
}

.socials {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

@media only screen and (max-width: 1000px) {
    .socials {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }

    .info {
        margin: auto;
        text-align: center;
    }

    .contact-form, .contact-info {
        margin: 0;
    }

    .list-spacing {
        margin-top: 0.5em;
    }

    .contact-li {
        margin: 0;
    }
}

@media only screen and (max-width: 768px) {
    input, textarea {
        width: 250px;
    }
}

@media only screen and (max-width: 399px) {
    .contact-li {
        width: 200px;
        font-size: 1.2rem;
    }
}