:root {
    --gold1: rgb(214, 189, 45);
    --gold2: rgb(176, 153, 26);
    --navy1: rgb(4, 4, 63);
    --grey1: #202020;
}
@font-face {
  font-family: 'Amsterdam';
  src: url('/font/Amsterdam.otf') format('opentype');
}
* {
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    transition: all ease-in-out 200ms;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background-image: url('../img/backgroundbw.png');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-size: 1em;
    color: var(--grey1);
    overflow-y: auto;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: var(--gold1);
}
form#codeForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height:100vh;
    background: rgba(255, 255, 255, 0.3);
}
form#codeForm input[type="text"] {
    font-size: 1.5em;
    padding: .5em;
    text-align: center;
    border-radius: 1em;
    border: 3px solid var(--grey1);
    background: none;
    text-transform: uppercase;
}
form#codeForm input[type="text"]:focus {
        border: 3px solid var(--gold2);
        outline: none;;
        color: var(--gold2);
}
form#codeForm button[type="submit"] {
    display: none;
}
form#codeForm p {
    font-size: 1.5em;
}
form#rsvpForm {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: left;
    width: 100vw;
    padding: 5vh 0;
    background: rgba(255, 255, 255, 0.3);
}
form#rsvpForm label {
    font-size: 1.2em;
    margin: .5em 0 0 0;
}
form#rsvpForm input[type="text"], form#rsvpForm input[type="email"], form#rsvpForm textarea, form#rsvpForm input[type="checkbox"] + label {
    font-size: 1.3em;
    padding: .5em;
    border-radius: .5em;
    border: 2px solid var(--grey1);
    background: none;
    margin: .2em 0 1em 0;
    min-width: 40vw;
}
form#rsvpForm textarea {
    min-height: 10vh;
}
form#rsvpForm input:focus, form#rsvpForm textarea:focus {
    border: 2px solid var(--gold2);
    outline: none;
    color: var(--gold2);
}
form#rsvpForm input[type="checkbox"] {
    display: none;
}
form#rsvpForm input[type="checkbox"]:checked + label {
    color: var(--gold2);
    border: 2px solid var(--gold2);
    padding: .5em .5em .5em 3vw;
    min-width: calc(37vw + .5em);
}
form#rsvpForm input[type="checkbox"]:checked + label::before {
    content: '✓';
    position: absolute;
    margin: 0 1vw 0 -2vw;
}
section.itemDetails, section.spacer {
    flex-direction: column;
    align-items: start;
    justify-content: center;
    min-height: 90vh;
    width: 70vw;
    padding: 5vh 5vw 5vh 25vw;
}
section.itemDetails {
    background-color: rgba(255, 255, 255, 0.3);
}
section.spacer {
    background: none;
}
section.itemDetails h2.sectionHeader {
    margin: 0;
    font-family: Amsterdam;
    font-size: 3em;
    color: var(--navy1);
}
section#sectionIntro h1 {
    font-size: 4em;
    font-family: Amsterdam;
    color: var(--gold1);
}
section#sectionIntro h2 {
    font-size: 3em;
    margin: -1.5em 0 2em 1em;
    color: var(--grey1);
}
section.itemDetails p {
    font-size: 1.75em;
    margin: 1,5em 0 0 0;
}
section.itemDetails h3 {
    font-family: Amsterdam;
    font-size: 1.5em;
    margin: 0 0 -.5em 0;
    color: var(--grey1);
}
section.itemDetails ul li {
    font-size: 1.3em;
}
section.itemDetails:nth-child(odd) {
    background: white;
}
nav#navMenu {
    position: fixed;
    float: left;
    font-weight: bold;
    margin: 8vh 0 0 5vw;
    padding: .5vw;
    width: 14vw;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(.5em);
    border: 1px solid #333;
    border-radius: 1em;
}
nav#navMenu li, nav#mobileNavMenu li {
    list-style: none;
}
a.navLink, a.mobileNavLink {
    display: inline-block;
    padding: .5em 0;
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
    cursor: pointer;
}
a.navLinkSel {
    color: var(--gold2);
}
a.navLink:hover, a.mobileNavLink:hover {
    color: var(--gold2);
}
.columns2 {
    columns: 2;
}
nav#mobileNavMenu, button#showMobileNavMenu {
    display: none;
}
@media only screen and (hover: none) and (pointer: coarse){

    body {
        font-size: 1.3em;
    }
    form#codeForm p {
        text-align: center;
        font-size: 2.5em;
    }
    form#codeForm input[type="text"] {
        font-size: 3em;
    }
    button#showMobileNavMenu {
        display: block;
        position: fixed;
        z-index: 10;
        font-size: 3em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        background: none;
        border: none;
        top: 1em;
        right: 1em;
        width: 5vw;
        height: 5vw;
    }
    nav#navMenu {
        display: none;
    }
    nav#mobileNavMenu {
        display: none;
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        font-weight: bold;
        padding: 5vh 5vw;
        width: 100vw;
        height: 100vh;
        font-size: 3em;
        background: rgba(255,255,255,1);
        float: none;
        border: none;
        border-radius: 0;
        margin: 0;
        backdrop-filter: none;
    }
    section.itemDetails, section.spacer {
        flex-direction: column;
        align-items: start;
        justify-content: center;
        min-height: 100vh;
        width: 90vw;
        padding: 5vh 10vw 5vh 10vw;
    }
    section.itemDetails h2.sectionHeader {
        font-size: 2.8em;
        line-height: 3em;
    }
    section#sectionIntro h1 {
        font-size: 3em;
    }
    section#sectionIntro h2 {
        font-size: 3em;
        margin: -1em 0 2em 1em;
    }
    .columns2 {
        columns: 1;
    }
    form#rsvpForm input[type="text"], form#rsvpForm input[type="email"], form#rsvpForm textarea, form#rsvpForm input[type="checkbox"] + label {
        font-size: 1.5em;
        width: 80vw;
        height: auto;
    }
    form#rsvpForm input[type="checkbox"]:checked + label {
        width: calc(77vw + .5em);
    }
    form#rsvpForm input[type="checkbox"]:checked + label::before {
        content: '✓';
        position: relative;
        margin: auto 3vw auto 0;
    }

}