* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* =========================
   Page Description
========================= */

.pagedesc {
    padding: 0;
    margin: 0;
}

.header p {
    text-align: center;
    padding: 1em 0 0;
    margin: 0;
}

/* =========================
   Contact Box
========================= */

.contactbox {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3em;
    align-items: center;

    width: calc(100% - 4em);
    max-width: 1200px;
    margin: 5em auto;

    background-color: #9A3227;
    border-radius: 10px;
    padding: 4em;
}

/* =========================
   Contact Information
========================= */

.contactinfo {
    margin: 0;
    padding: 0;
}

.contactinfo h2 {
    color: #eac08c;
    margin-top: 0;
}

.contactinfo p {
    color: white;
    padding: 2px 0;
    margin: 0;
}

#contactmedia {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: 1em;
}

.contactinfo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #eac08c;
    font-size: 1.5em;
    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.contactinfo a:hover {
    color: white;
    transform: translateY(-3px);
}

/* =========================
   Contact Form
========================= */

.contactform {
    display: flex;
    flex-direction: column;
    gap: 1.5em;

    width: 100%;
    margin: 0;
}

.contactform h2 {
    color: #eac08c;
    margin: 0 0 0.5em;
}

.formrow {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 1.5em;
}

.formrow label {
    color: white;
    font-family: mycontentfont, Arial, sans-serif;
    font-size: 1em;
}

.formrow input,
.formrow textarea {
    width: 100%;
    margin: 0;
    padding: 0.6em 0;

    background-color: transparent;
    border: none;
    border-bottom: 2px solid #eac08c;
    outline: none;

    color: white;
    font-family: mycontentfont, Arial, sans-serif;
    font-size: 1em;
}

.formrow textarea {
    min-height: 100px;
    resize: vertical;
}

.formrow input:focus,
.formrow textarea:focus {
    border-bottom-color: white;
}

.formrow input::placeholder,
.formrow textarea::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

/* =========================
   Submit Button
========================= */

.submit,
.contactform button[type="submit"] {
    width: 100%;
    padding: 0.7em 1em;
    margin-top: 1.5em;

    background-color: #eac08c;
    color: #9A3227;
    border: 2px solid #eac08c;
    border-radius: 5px;
    font-family: mycontentfont, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
}

.submit:hover,
.contactform button[type="submit"]:hover {
    background-color: transparent;
    color: #eac08c;
    transform: translateY(-2px);
}

.submit:active,
.contactform button[type="submit"]:active {
    transform: scale(0.98);
}

/* Optional result message */

#result {
    min-height: 1.5em;
    margin: 0;
    color: white;
    text-align: center;
}

/* =========================
   Tablet
========================= */

@media screen and (max-width: 768px) {
    .contactbox {
        grid-template-columns: 1fr;
        gap: 2em;

        width: calc(100% - 2em);
        margin: 2em auto;
        padding: 2em;
    }

    .contactinfo {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .contactinfo h2,
    .contactform h2 {
        font-size: 1.5em;
        text-align: center;
    }

    #contactmedia {
        justify-content: center;
    }

    .contactform {
        width: 100%;
        margin: 0;
    }

    .formrow {
        grid-template-columns: 1fr;
        gap: 0em;
        margin-bottom: 1em;;
    }

    .formrow label {
        text-align: left;
    }
}

/* =========================
   Mobile
========================= */

@media screen and (max-width: 480px) {
    .contactbox {
        width: calc(100% - 2em);
        margin: 2em auto;
        padding: 1.5em;
    }

    .contactinfo,
    .contactform {
        margin: 0;
    }

    .contactinfo p {
        overflow-wrap: anywhere;
    }

    #contactmedia {
        gap: 0.75em;
        padding-top: 0.5em;
    }

    .contactinfo a {
        font-size: 1.3em;
    }

    .formrow input,
    .formrow textarea {
        font-size: 1em;
    }

    .submit,
    .contactform button[type="submit"] {
        width: 100%;
    }
}