:root {
    --logoImage: url('/i/e/30_logo.png');
    --backgroundImage: url('/i/e/30_background.png');
    --backgroundImageM: url('/i/e/30_backgroundm.png');
    --pageBG: rgb(255, 255, 255);
    --pageColor: rgb(0, 0, 0);
    --hoverBG: rgb(240, 240, 240);
    --hoverColor: rgb(0, 0, 153);
    --shadowColor: rgba(0, 0, 0);
    --shadowColor25: rgba(0, 0, 0, 0.25);
    --shadowColor50: rgba(0, 0, 0, 0.5);
    --scrollColor: rgb(150, 150, 150);
    --headingColor: rgb(0, 0, 255);
    --subheadingColor: rgb(0, 100, 0);
    --linkColor: rgb(208, 0, 0);
    --linkColorHover: rgb(255, 0, 0);
    --buttonColor: rgb(255, 255, 255);
    --buttonBG: rgb(255, 0, 0);
    --errorColor: rgb(0, 0, 0);
    --errorBG: rgb(255, 216, 1);
}

@font-face {
    font-family: 'headertext';
    src: url('/images/header_fonts/art1.ttf');
}

@font-face {
    font-family: 'pagetext';
    src: url('/images/page_fonts/arial.ttf');
}

body {
    background-color: var(--pageBG);
    color: var(--pageColor);
    font-family: pagetext;
}

h1,
h2 {
    font-family: headertext;
    color: var(--headingColor);
    text-shadow: 0px 2px 3px var(--shadowColor50),
        -1px -1px 0 var(--shadowColor),
        1px -1px 0 var(--shadowColor),
        -1px 1px 0 var(--shadowColor),
        1px 1px 0 var(--shadowColor);
}

h3,
h4 {
    font-family: pagetext;
    color: var(--subheadingColor);
}

.free {
    color: var(--subheadingColor);
}

a {
    color: var(--linkColor);
}

a:hover {
    color: var(--linkColorHover);
}

hr {
    color: var(--pageColor);
}

.error {
    background-color: var(--errorBG);
    color: var(--errorColor);
}

.formwrap {
    border: 1px solid var(--linkColor);
}

.dialogtitle {
    font-family: headertext;
    color: var(--linkColor);
}

.dialogsubtitle {
    border: 1px solid var(--headingColor);
}

#totalfloater {
    background: var(--pageColor);
}

.timeleft,
.tkttotal {
    color: var(--pageBG);
}

#header {
    background: var(--pageBG);
    border-bottom: 2px solid var(--pageColor);
    box-shadow: 0px 5px 5px var(--shadowColor25);
}

#header #name h2 {
    font-family: headertext;
    color: var(--headingColor);
    text-shadow: 0px 2px 3px var(--shadowColor50),
        -1px -1px 0 var(--shadowColor),
        1px -1px 0 var(--shadowColor),
        -1px 1px 0 var(--shadowColor),
        1px 1px 0 var(--shadowColor);
}

#header #venue,
#header #date {
    font-family: pagetext;
}

#nav1,
#nav2,
#nav3,
#nav4,
#nav5 {
    background: var(--pageBG);
    padding: 3px;
    border-bottom: unset;
}

nav>a {
    -webkit-text-shadow: 0px 2px 3px var(--shadowColor25);
    -moz-text-shadow: 0px 2px 3px var(--shadowColor25);
    text-shadow: 0px 2px 3px var(--shadowColor25);
}

button,
.yellowfilebutton,
nav>a>div {
    border: 1px solid var(--buttonBG);
    color: var(--buttonColor);
    background: var(--buttonBG);
}

button:hover,
button.active,
.yellowfilebutton:hover,
.greenfilebutton:hover,
.redfilebutton:hover,
nav>a>div:hover {
    color: var(--buttonBG);
    background: var(--buttonColor);
}

button,
.redfilebutton,
.yellowfilebutton,
.greenfilebutton {
    -webkit-box-shadow: 0px 2px 3px var(--shadowColor50), inset 0 -5px 10px rgb(0 0 0 / 40%), inset 0 5px 10px rgb(255 255 255 / 40%);
    ;
    -moz-box-shadow: 0px 2px 3px var(--shadowColor50), inset 0 -5px 10px rgb(0 0 0 / 40%), inset 0 5px 10px rgb(255 255 255 / 40%);
    ;
    box-shadow: 0px 2px 3px var(--shadowColor50), inset 0 -5px 10px rgb(0 0 0 / 40%), inset 0 5px 10px rgb(255 255 255 / 40%);
    ;
}

#mainbg {
    background: var(--backgroundImage);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

#hero {
    background: var(--backgroundImageM);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 5px solid var(--pageColor);
}

#panel_cost {
    color: var(--linkColor);
}

#socialMedia a {
    color: var(--pageColor);
}

#socialButton:hover {
    background-color: var(--pageBG);
}

.glow:hover {
    text-shadow: 0 0 5px var(--hoverBG);
}

.blocktab {
    color: var(--linkColor);
}

#eventschedulerow:hover {
    background-color: var(--hoverBG);
    color: var(--hoverColor);
    border: 2px solid var(--pageColor);
    border-radius: 15px;
}

#eventschedulerow.expired {
    background-color: var(--hoverBG);
    color: var(--hoverColor);
    border: 2px solid var(--hoverColor);
    border-radius: 15px;
}

#eventschedulerow.current {
    background-color: var(--headingColor);
    color: var(--pageBG);
    border: 2px solid var(--pageColor);
    border-radius: 15px;
}

#eventschedulerow.current:hover {
    color: var(--headingColor);
    background-color: var(--hoverBG);
    border: 2px solid var(--headingColor);
}

.buttonyellow {
    background-color: var(--buttonBG);
    color: var(--buttonColor);
    box-shadow: 0 3px 5px var(--shadowColor50), 0 -.25em .5em rgb(68, 68, 68, 0.25) inset, 0 0.25em 0.5em 0 rgb(221, 221, 221, 0.25) inset;
}

.buttonyellow:hover,
.buttonyellow.active {
    background-color: var(--buttonColor);
    color: var(--buttonBG);
}

.buttons {
    background: var(--pageBG);
}

#sidemenu {
    background: var(--pageBG);
}

.ticketborder {
    position: relative;
    background: radial-gradient(20px at 20px 20px, #0000 98%, var(--hoverBG)) -20px -20px;
    --mask:
        radial-gradient(20px at 20px 20px, #0000 calc(98% - 3px), #000 calc(100% - 3px) 98%, #0000) -20px -20px,
        linear-gradient(90deg, #000 6px, #0000 0) -3px 50% /100% calc(100% - 40px + 3px) repeat-x,
        linear-gradient(#000 6px, #0000 0) 50% -3px/calc(100% - 40px + 3px) 100% repeat-y;
}

.ticketborder:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hoverBG);
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.bordercolor::before {
    background-image: linear-gradient(135deg, var(--headingColor), var(--pageColor));
    background-color: initial;
}

.bordercolor:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--headingColor), var(--pageColor)) fixed;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

#itemcontainer {
    color: var(--hoverColor);
}

.saleprice,
.valid {
    color: var(--linkColor);
}

.popup {
    background-color: var(--pageBG);
    color: var(--pageColor);
    border: 2px solid var(--headingColor);
}

#accountpopout {
    background: var(--pageBG);
    border: 1px solid var(--headingColor);
}

#newscard {
    border: 2px solid var(--headingColor);
}

#fullpost {
    color: var(--linkColor);
}

#fullpost:hover {
    color: var(--linkColorHover);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="numeric"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background-color: var(--pageColor);
    color: var(--pageBG);
}

.tagbox {
    color: var(--subheadingColor);
    background-color: var(--pageBG);
    border: 1px solid var(--subheadingColor);
}

.tagboxselect:hover {
    border: 2px solid var(--subheadingColor);
}

.tagbox.active {
    color: var(--pageBG);
    background-color: var(--subheadingColor);
}

/* MEDIA QUERY */

@media (min-width: 700px) {
    body {
        scrollbar-width: 25px;
        scrollbar-color: var(--scrollColor) #222;
        overflow-y: auto;
        margin-top: 40px;
    }

    #header {
        border-bottom: 2px solid transparent;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #hero {
        background: var(--backgroundImage);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #nav1,
    #nav2,
    #nav3,
    #nav4,
    #nav5 {
        border-bottom: 2px solid var(--pageColor);
        padding: 0;
        -webkit-box-shadow: 0px 5px 5px var(--shadowColor25);
        -moz-box-shadow: 0px 5px 5px var(--shadowColor25);
        box-shadow: 0px 5px 5px var(--shadowColor25);
    }

    nav>a>div {
        border: none;
        color: var(--linkColor);
        background: none;
    }

    nav>a>div:hover {
        color: var(--linkColorHover);
        background: none;
        box-shadow: none;
    }

    .buttonyellow {
        border: 2px solid var(--buttonColor);
    }

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

    ::-webkit-scrollbar-track {
        background: #222;
    }

    ::-webkit-scrollbar-button:single-button {
        width: 25px;
        height: 16px;
        background-color: #222;
        display: block;
        border-style: solid;
    }

    /* up arrow */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
        border-width: 0 12px 12px 12px;
        border-color: transparent transparent var(--scrollColor) transparent;
    }

    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
        border-color: transparent transparent #ccc transparent;
    }

    /* down arrow */

    ::-webkit-scrollbar-button:single-button:vertical:increment {
        border-width: 13px 13px 0 13px;
        border-color: var(--scrollColor) transparent transparent transparent;
    }

    ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
        border-color: #ccc transparent transparent transparent;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        background-color: var(--scrollColor);
        border-radius: 10px;
        border: 3px solid #222;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #ccc;
    }
}