body {
    background-color: rgba(50, 50, 50, 1);
}

article {
    width: 100%;

    text-align: center;
}

#emailForm {
    
}

article h2 {
    padding: 2rem 0 0 0;

    text-align: center;
}

article h3 {
    padding: 0 0 1rem 0;
}

article p {
    padding: 1%;

    text-align: center;
}

.container {
    display: inline-block;
    max-width: var(--maxWidth);

    margin: 0 auto;

    text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ EMAIL SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
form {
    margin: 1%;
    padding: 1rem 2%;

    text-align: center;
    border-radius: 13px;
    /*background-color: #bbb;*/
}

.formHead {
    padding-bottom: 1rem;

    color: var(--theme-fore-colour);
}

.formText {
    padding: 10px 0 10px 0;
    
    /*font-family: Arial, sans-serif;*/
    font-size: 1.1rem;
    color: var(--theme-colour);
}

.hidden {
    display: none; 
    visibility: hidden;
}

#inputContainer {
    display: inline-block;
    width: 98%;

    margin: 0 auto;

    text-align: center;
}

input {
    width: 98%;

    margin: 0.5rem 0 1rem 0;

    text-align: center;
    font-size: 1.1rem;
}

textarea {
    margin: 1rem auto;
    padding: 0;

    font-size: 1.1rem;
}

#submit {
    height: 40px;
    width: 100px;

    margin-top: 1.5rem;
    border: 0px solid white;
    border-radius: 13px;
    

    background-color: var(--theme-colour);
    font-weight: bold;
    font-size: 1.25rem;
}

#submit:hover {
    background-color: var(--section-colour);
    color: var(--theme-text-colour);
    
    cursor: pointer;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CALL/CLICK SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#icons {
    display: inline-block;

    margin: 1rem auto;

    text-align: center;
}

.roundedIco {
    display: inline-block;

    margin: 1rem 0;

    text-align: center;
}

.roundedIco img {
    max-width: 200px;
    width: 80%;

    vertical-align: middle;
}

#call {
    width: 200px;
}

@media (min-width: 420px) {  

    .formText {
        padding: 10px 10px 10px 0;
    }

    input {
        width: 98.5%;

        margin-right: auto;
        margin-left: auto;
    }

    textarea {
        width: 99.5%;
    }
}

@media (min-width: 540px) {
    .formText {
        padding: 10px 20px 10px 0;
    }
}

@media (min-width: 720px) { 
    .formText {
        padding: 10px 110px 10px 0;
    }

    #inputContainer {
        width: 70%;
    }

    input {
        width: 99.5%;
        
        padding: 0;
    }

    #submit {
        width: 140px;
    }
}

@media (min-width: 1024px) {
    .formText {
        padding: 10px 180px 10px 0;
    }

    #inputContainer {
        width: 50%;
    }


}

@media (min-width: 1200px) {
    .formText {
        padding: 10px 225px 10px 0;
    }
}

@media (min-width: 1400px) {
    .formText {
        padding: 10px 250px 10px 0;
    }
}