/* CSS RESET START */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}


/* CSS RESET END */


/* CSS Main START */

html {
    scroll-behavior: smooth;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'poppins', sans-serif;
    font-size: 1.125rem;
    color: #fff;
    background-color: #1f1f1f;
}

p {
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 1rem;
}

h1,
h2,
h3 {
    font-family: merriweather;
    font-weight: 600;
    font-size: 1.25em;
    margin: 2em 0;
    text-align: center;
}

.page-container {
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em 0;
    position: relative;
}

.past-authors__link,
.current-authors__link,
.register__link,
.newsletter__link,
.contact__link,
.facebook__link,
.google-maps__link,
.authors-website__link,
.archive__link,
.email-us__link,
.registration__link,
.contest__link,
.venue__link,
.home__link,
.content__link,
.terms-conditions-generator__link {
    color: #f4a862;
    text-decoration: underline;
}

.error-page-contact__link {
    color: #fff;
    text-decoration: underline;
}

.past-authors__link:hover,
.current-authors__link:hover,
.register__link:hover,
.newsletter__link:hover,
.contact__link:hover,
.facebook__link:hover,
.google-maps__link:hover,
.authors-website__link:hover,
.archive__link:hover,
.email-us__link:hover,
.registration__link:hover,
.contest__link:hover,
.venue__link:hover,
.home__link:hover,
.content__link:hover,
.error-page-contact__link:hover,
.terms-conditions-generator__link:hover,
.past-authors__link:focus,
.current-authors__link:focus,
.register__link:focus,
.newsletter__link:focus,
.contact__link:focus,
.facebook__link:focus,
.google-maps__link:focus,
.authors-website__link:focus,
.archive__link:focus,
.email-us__link:focus,
.registration__link:focus,
.contest__link:focus,
.venue__link:focus,
.home__link:focus,
.content__link:focus,
.error-page-contact__link:focus,
.terms-conditions-generator__link:focus {
    opacity: 0.7;
    text-decoration: none;
}

.h1__title {
    font-size: 2.5rem;
}

.about__title {
    border-top: 2px solid #f4a862;
    padding-top: 1em;
    font-size: 1.5em;
}

.logo {
    margin: 4rem auto;
    mix-blend-mode: screen;
}

/* Animate Details Open & Close allow keywords */

:root {
    interpolate-size: allow-keywords;
}

/* Animate Details Open & Close details-content shadow DOM */

details::details-content {
    block-size: 0;

    transition: 
    block-size 1s,
    content-visibility 1s;

    transition-behavior: allow-discrete;
}

/* Animate Details Open & Close details-content shadow DOM open */

details[open]::details-content {
    block-size: auto;
}


/* CSS Main END */


/* CSS Brevo (Formerly Sendinblue) Form START */

@font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
}

@font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
}

@font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
}

#sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #000;
}

#sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #000;
}

#sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}

#newsletterTitle {
    text-align: center;
    margin: auto;
}

.sib-form-block__button:hover,
.sib-form-block__button-with-loader:hover,
.sib-form-block__button:focus,
.sib-form-block__button-with-loader:focus {
    opacity: 0.7;
}


/* CSS Brevo (Formerly Sendinblue) Form START */


/* Custom Scrollbar Start */


/* width */

::-webkit-scrollbar {
    width: 10px;
}


/* Track */

 ::-webkit-scrollbar-track {
    background: #c5cfde;
    border-radius: 20px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: #c07125;
    border-radius: 20px;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 12%, 0.5);
}


/* Custom Scrollbar END */


/* Footer START */

.social__icons {
    text-align: center;
    padding-bottom: 1em;
}

.footer-container {
    border-top: 2px solid #f4a862;
    /* max-width: 60%; */
    margin: 4rem auto 0;
    padding: 1em;
    background-color: #1f1f1f;
    position: sticky;
    top: 100%;
}

.footer,
#newsletter {
    text-align: center;
    font-size: 1rem;
    color: #f4a862;
}

.footer__text {
    max-width: 60%;
}

.footer-span-links {
    margin: 0 1em;
    padding: 0.2em;
}

.webdev,
.sitemap-link,
.tos-link,
.privacy-link,
.cookies-link {
    color: #eeeeee;
    text-decoration: underline;
}

.webdev:hover,
.webdev:focus,
.sitemap-link:hover,
.tos-link:hover,
.privacy-link:hover,
.cookies-link:hover,
.sitemap-link:focus,
.tos-link:focus,
.privacy-link:focus,
.cookies-link:focus {
    opacity: 0.7;
    text-decoration: none;
}

.footer-links-grid-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Sitemap (get to sitemap from footer) HTML Page START */

.sitemap__sections {
    text-align: center;
    background-color: #c071256b;
    margin: 1em;
    padding: 0.50em;
}

.sitemap__list {
    list-style: none;
}


/* Sitemap (get to sitemap from footer) HTML Page END */


/* Terms of Service (get to tos from footer) HTML Page START */

#terms-conditions {
    margin-top: 7em;
}


/* Terms of Service (get to tos from footer) HTML Page END */


/* Footer END */


/* Back To Top Btn START */

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 15px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #f4a862;
    color: #000;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#backToTopBtn:focus {
    opacity: 0.7;
}

@media (hover: hover) {
    #backToTopBtn:hover,
    .submit-btn:hover,
    .content-link:hover {
        opacity: 0.7;
        /* solves sticky problem on mobile */
    }
}


/* Back To Top Btn END */


/* Nav START */

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #1f1f1f;
}

.nav {
    width: 100%;
}

.nav-toggle {
    cursor: pointer;
    border: 0;
    width: 3em;
    height: 3em;
    padding: 0em;
    border-radius: 50%;
    background-color: #f4a862;
    color: white;
    transition: opacity 250ms ease;
    position: absolute;
    right: 2rem;
}

.nav-toggle:focus,
.nav-toggle:hover {
    opacity: 0.7;
}

.hamburger {
    width: 50%;
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    margin: 0 auto;
    height: 3px;
    background: white;
}

.hamburger::before,
.hamburger::after {
    content: '';
    width: 100%;
}

.hamburger::before {
    transform: translateY(-6px);
}

.hamburger::after {
    transform: translateY(3px);
}

.nav {
    visibility: hidden;
    height: 0;
    position: absolute;
}

.nav--visible {
    visibility: visible;
    height: auto;
    position: relative;
}

.nav__list {
    list-style: none;
    text-align: center;
    margin: 0;
    margin-top: 4rem;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    font-size: 1.5em;
    position: relative;
}

.nav__link {
    color: #c5cfde;
    text-decoration: none;
    letter-spacing: 0.15rem;
}

.nav__link:hover,
.nav__link:focus,
.authors__submenu-link:hover,
.authors__submenu-link:focus-within {
    color: #f4a862;
    opacity: 0.7;
}

.authors__submenu-container {
    display: none;
    margin: 0 auto;
    background-color: #1f1f1f;
    border: 2px solid #f4a862;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.authors__submenu-item {
    list-style: none;
    padding: .25em;
}

.hr-divider {
    margin: 0.35em 0;
    border-bottom: 2px solid #c5cfde;
}

.authors__submenu-link {
    text-decoration: none;
    color: #c5cfde;
    letter-spacing: 0.15rem;
}


/* Nav END */


/* Caret Down/Up Icon START */

.svg-inline--fa {
    height: 0.75em;
    padding: 0 0.15em;
}


/* Caret Down/Up Icon END */


/* Venue START */

.venue-iframe-container {
    text-align: center;
}

/* Venue END */


/* Past Authors/Current Authors START */
/* Past Authors Archive CSS is in the contest page section for DRY code */

.authors {
    margin: 1em;
}

.authors>p {
    padding-top: 1em;
}


/* Past Authors/Current Authors END */


/* Contact START */

.form-container {
    text-align: center;
    background: #f4a862;
    margin: 0 1em;
    border-radius: 20px;
    color: #000;
}

.thank-you-container {
    text-align: center;
    background: #f4a862;
    margin: 10em 1em;
    border-radius: 20px;
}

.thank-you-container>.contact__form {
    padding: 2em;
}

input,
textarea {
    border-radius: 5px;
    padding: 0.25em;
    field-sizing: content;
}

.form__input {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.submit__btn {
    border-radius: 7px;
    padding: 0.5em;
    width: 80%;
    background-color: #bb5c01;
    color: white;
    margin: 1em;
}

.submit__btn:hover {
    cursor: pointer;
    opacity: 0.7;
}

.required:after {
    content: " *";
    color: hsl(0deg 100% 50% / 69%);
    font-size: 1.50em;
}

.input-validation:user-invalid {
    border: 2px solid red;
}

.input-validation:user-valid {
    border: 2px solid green;
}


/* Contact END */


/* Register START */

.register__form {
    width: 100%;
    margin: 0 auto;
    height: 2200px;
}


/* Register END */


/* Contest START */

.contest__link:hover,
.contest__link:focus {
    cursor: pointer;
    opacity: 0.7;
}

.contest_rules {
    margin: 0 30%;
}

.contest_rules_list_item {
    list-style-position: inside;
}

#archive {
    scroll-snap-align: start;
    scroll-margin: 7em;
}

.contest_archive,
.past_authors_archive {
    text-align: center;
    margin: 1em 0;
}

.contest_archive_year,
.past_authors_archive_year {
    max-width: 30%;
    margin: 0 auto;
    padding: .30em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid #f4a862;
    border-radius: 10px;
    cursor: pointer;
}

.contest_archive_year:hover,
.contest_archive_year:focus,
.past_authors_archive_year:hover,
.past_authors_archive_year:focus {
    opacity: 0.7;
}


/* Contest END */


/* Media Queries START */

@media screen and (min-width: 800px) {
    .nav-toggle {
        display: none;
    }
    .nav {
        visibility: visible;
        display: flex;
        justify-content: center;
        height: auto;
        background-color: #1f1f1f;
        padding-bottom: 8px;
        border-bottom: 2px solid #f4a862;
    }
    .nav__list {
        margin-top: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .active {
        color: #f4a862;
        border: 2px solid #f4a862;
        border-radius: 5px;
        padding: 0.15em;
    }
    .footer__text {
        max-width: 80%;
    }
    .authors__submenu-container {
        position: absolute;
    }
    .authors__container,
    .sitemap__container {
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .form__input {
        width: 80%;
        margin: 0 auto;
    }
    .svg-inline--fa {
        height: 1em;
        padding: 0 0.25em;
    }
    .backtop-btn-desktop-disabled {
        display: none;
        visibility: hidden;
    }
    .footer-links-grid-container{
        flex-direction: row;
    }
}


/* Media Queries END */