:root {
    color-scheme: dark;
    --accent: #a40808;
    --accent-dark: #510000;
    --nav: rgba(128, 64, 0, 1);
    --nav-hover: rgba(212, 106, 0, 1);
    --ink: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Montserrat", "Helvetica Neue", sans-serif;
    background-color: #000000;
    background-image: url("/assets/pattern.png");
    background-repeat: repeat;
    color: var(--ink);
}

a {
    color: #ffffff;
}

.container {
    width: 900px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #000000;
}

img.banner {
    width: 900px;
    height: auto;
}

.herotext {
    font-size: 24px;
    font-family: Acme, sans-serif;
    position: relative;
    bottom: 14px;
    left: 16px;
    text-align: left;
}

.info {
    color: white;
    padding-bottom: 50px;
}

.subheading {
    font-family: Acme, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.bodytext {
    font-family: "Montserrat", sans-serif;
    color: white;
    font-size: 18px;
    font-weight: 300;
    text-align: left;
}

.content-block {
    overflow: hidden;
}

.float-right {
    float: right;
    margin: 4px 0 12px 16px;
    border: 2px solid #ffffff;
}

.float-left {
    float: left;
    margin: 4px 16px 12px 0;
    border: 2px solid #ffffff;
}

.titletext {
    font-family: Acme, sans-serif;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 5px #ffffff;
}

.dancetext {
    font-family: Acme, sans-serif;
    color: white;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.printbodytext,
.printherotext {
    display: none;
}

.topnav {
    background-color: var(--nav);
    overflow: hidden;
}

.topnav a {
    float: right;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 10px 24px;
    text-decoration: none;
    font-size: 16px;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 10px 24px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--nav);
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(128, 64, 0, 0.2);
    z-index: 99;
}

.dropdown-content a {
    float: none;
    color: white;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: var(--nav-hover);
    color: white;
}

.dropdown-content a:hover {
    background-color: var(--nav-hover);
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.caret {
    font-size: 12px;
    margin-left: 6px;
}

table.darkTable {
    border: 2px solid #000000;
    background-color: #510000;
    width: 100%;
    max-width: 900px;
    text-align: center;
    border-collapse: collapse;
    margin: 0 auto;
}

table.darkTable td,
 table.darkTable th {
    border: 1px solid #000000;
    padding: 3px 2px;
}

table.darkTable tbody td {
    font-size: 13px;
    color: #ffffff;
}

.myButton {
    background: linear-gradient(to bottom, #ffea00 5%, #ffaa00 100%);
    background-color: #ffea00;
    border-radius: 5px;
    border: 1px solid #000000;
    display: inline-block;
    cursor: pointer;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    padding: 16px 60px;
    text-decoration: none;
}

.myButton:hover {
    background: linear-gradient(to bottom, #ffaa00 5%, #ffea00 100%);
    background-color: #ffaa00;
}

.greenbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #038800;
    border-radius: 8px;
    background: #06ff00;
    background: linear-gradient(to bottom, #06ff00, #038800);
    font: normal normal bold 20px Arial, sans-serif;
    color: #000000;
    text-decoration: none;
}

.greenbutton:hover,
.greenbutton:focus {
    border: 1px solid #04a000;
    background: #07ff00;
    background: linear-gradient(to bottom, #07ff00, #04a300);
    color: #000000;
    text-decoration: none;
}

.countdown-wrap {
    width: 100%;
    max-width: 900px;
    margin: 12px auto;
}

.footer {
    background-color: rgba(128, 64, 0, 1.00);
    color: white;
    font-size: 18px;
    padding: 20px 0;
}

.footer-inner {
    width: 600px;
    margin: 0 auto;
    text-align: left;
    padding: 0 10px;
}

.copyright {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(128, 64, 0, 1.00);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    border-top-width: 2px;
    font-size: 12px;
}

@media screen and (min-width: 601px) {
    .subheading {
        font-size: 24px;
    }
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive { position: relative; }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown { float: none; }
    .topnav.responsive .dropdown-content { position: relative; }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}

@media screen and (max-width: 900px) and (min-width: 601px) {
    .container,
    .footer-inner {
        width: 700px;
    }

    img.banner {
        width: 700px;
    }
}

@media screen and (max-width: 600px) and (min-width: 401px) {
    .container,
    .footer-inner {
        width: 500px;
    }

    img.banner {
        width: 500px;
    }

    .bodytext {
        font-size: 14px;
    }

    .subheading {
        font-size: 20px;
    }
}

@media screen and (max-width: 400px) {
    .container,
    .footer-inner {
        width: 400px;
    }

    img.banner {
        width: 400px;
    }

    .bodytext {
        font-size: 12px;
    }

    .subheading {
        font-size: 18px;
    }
}