/* Copyright Katherine Townsend */

/* Brown: #332e10, rgb(51,46,16), hsl(51.4,52.2,13.1)
	Blue: #1c4682, rgb(28,70,130), hsl(215.29, 64.6, 31)
    Yellow: #f5c501, rgba(245, 197, 1, 1), hsl(48.2,99.2,48.2)
*/

main {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #1c4682 url("../img/contactTile.png") repeat;
}

h2 {color: #f5c501; padding: 1em;}

form {
    width: 90%;
    margin: 0 auto;
    padding: 1em;
    background: white url("../img/formTile.png") no-repeat;
    background-size: cover;
    border-radius: 8px 10px;
}

label {
    display: inline-block;
    padding-top: 1.5em;
}
    label:first-of-type {
       padding-top: 6.75em;
}

    label:last-of-type {
        padding-bottom: 1em;
    }

input[type=text] {
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #f5c501;
    background: transparent;
}

textarea {
    width: 100%;
    height: 12em;
    padding: 1em;
    border: 2px solid #f5c501;
    border-radius: 4px;
    background-color: transparent;
    resize: none;
}

    input[type=text]:focus, textarea:focus {
        background-color: white;
        outline: none;
        border-bottom: 2px solid #f5c501;
    }

input[type=submit] {
    background-color: #1c4682;
    color: white;
    padding: 1.5em 2.5em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

#submit {padding: 2em 0;

}
    input[type=submit]:hover {
        opacity: .8;
    }

footer {
    position: relative;
    bottom: 0;
    background: #1c4682 url("../img/contactTile.png") repeat;
    opacity: 1;
    color: white;
    padding-top: 1em;
}

@media only screen and (min-width: 1110px) {

.flex-container {height: 100vh;}

main {height: 100%; flex-flow: row nowrap;}

h2 {position:fixed; left: 33%; top: 25%; font-size: 3em;}

    main::before {
        display: flex;
        flex-flow: row nowrap;
        position: relative;
        width: 100%;
        height: 100%;
        content: "";
        background: transparent url("../img/contact.png") no-repeat top left;
        }

        form {
            display: block;
            position: fixed;
            top: 20%;
            left: 66%;
            width: 30%;
        }

    label {
        padding-top: .5em;
    }

label:first-of-type {
        padding-top: .5em;
    }

    textarea {
        height: 6em;
    }

    input[type=submit] {
        padding: 1em 2.5em;
    }

        footer {
        position: fixed;
        bottom: 1%;
        background: transparent;
        color: #332e10;
    }

    }