@import url('https://fonts.googleapis.com/css2?family=Oswald');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3');

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: 'Source Sans 3', sans-serif;
}

footer {    
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    
    background-color: black;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
footer div {
    text-align: center;
    margin-bottom: 0.5rem;
}
footer a {
    color: inherit;
}
footer img {
    height: 35px;
    vertical-align: middle;
}
main {
    padding: 70vw 1em 0;
    
    min-height: 85vh;
 
    background-image: url('./images/banner.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-position: 98% top;
    background-size: 167vw;
}
section {
    font-size: 110%;
}

h1 {
    font-family: 'Oswald', sans-serif;
    text-align: center;
}

fieldset legend, label {
    font-family: 'Oswald', sans-serif;
}

input[name="entryCodes[]"] {
    text-transform: uppercase;
}
input.htmx-request[name="entryCodes[]"] {
    background-image: url("/images/validate.gif");
    background-size: 2rem;
    background-position: 99.5% center;
    background-repeat: no-repeat;
}
input.htmx-request[name="entryCodes[]"] + span {
    display: none;
}
label {
    margin-bottom: 0;
    margin-left: 2px;
}

span.invalid, span.valid {
    position: absolute;
    right: 1rem;
    top: 0.2rem;
    
    text-align: right;
    
    
    pointer-events: none;
}
span.invalid {
    color: #dc3545;
}
span.valid {
    color: #198754;
}
span.invalid i.fa, span.valid i.fa {
    font-size: 175%;
    position: relative;
    top: 0.2rem;
    margin-left: 0.1rem;
}

hr {
    opacity: 0;
    clear: both;
}

fieldset { 
    margin-bottom: 1em;
    border: 1px solid rgb(225, 225, 225);
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;
}
fieldset > legend {
    margin-top: -1.25rem;
    
    /*float: none;
    width: auto;*/
    
    padding: 0 0.5rem;
    text-transform: uppercase;
    font-size: 150%;
}
fieldset > div {
    margin-bottom: 0.5rem;
    width: 100%;
    padding: 0 0.5rem;
    position: relative;
}
input, select, button {
    border: 1px solid rgb(225, 225, 225);
    border-radius: 5px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
}
input:focus, select:focus, button:focus {
    outline: none;
 box-shadow: 0 0 5px blue;   
}
select {
    appearance: none;
    background-color: inherit;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
select:disabled {
    background-color: rgb(240, 240, 240);
    background-image: none;
}

input[type="checkbox"] {
    width: 1.75em;
    height: 1.75em;
    appearance: none;
    vertical-align: center;
    padding: 0;
    
    top: 0.15em;
    font-family: FontAwesome;
    text-align: center;
    margin-right: 0.25em;
}
input[type="checkbox"]:before {
    content: "\f00c";
    opacity: 0.01;
    transition: 0.25s all;
}
input[type="checkbox"]:checked:before {
    opacity: 1.0;
}

button {
    margin: 1em 0;
}

form.validate input:invalid, form.validate select:invalid, input.is-invalid {
    border-color: red;
}

button[type="submit"] {
    background-color: #ED1C24;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 120%;
    padding: 0.5rem;
}


@media only screen and (min-width: 600px) {
    main {
        padding-top: 69vw;
        min-height: 90vh;
        background-position: 83% top;
    }
    form > fieldset > div.split {
        width: 50%;
    }
}

@media only screen and (min-width: 820px) {
    main {
        background-size: 100vw;
        padding: 42vw max(2rem, calc(50vw - 600px)) 0;
    }
    section {
        font-size: 125%;
    }
    section.split {
        width: 50%;
        float: left;
        padding-right: 2rem;
    }
    form {
        width: 50%;
        float: right;
    }
    footer {
        padding: 1rem max(2rem, calc(50vw - 600px)) 1rem;
        clear: both;
        flex-direction: row;
    }
    footer div {
        width: 33%;
    }
    footer div.split:nth-child(2) {
        width: 34%;
    }
}

input ~ span, select ~ span {
    display: none;
    top: 5em;
    color: red;
    font-size: 85%;
}

form.validate input ~ span, form.validate select ~ span, input.is-invalid + span, input.is-valid + span, form.validate span {
    display: block;
}

form:invalid button {
    background-color: rgb(220, 220, 220);
}

div#errorSummary {
    display: none;
    
    margin: 2rem auto 1rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    font-size: 105%;
    
    background-color: #f8d7da;
    border: 1px solid red;
    border-radius: 5px;
}
div#errorSummary > p:first-child {
    font-weight: bold;
}
form.validate:invalid div#errorSummary, form.validate div#errorSummary {
    display: block;
}