:root {
    --yellow: #FCF434;
    --white: #FFFFFF;
    --purple: #9C59D1;
    --black: #2C2C2C;
    --blacker: #1C1C1C;
}

@font-face {
    font-family: 'Gulag';
    src: url('./fonts/GulagDecay.ttf') format('truetype');
}

@font-face {
    font-family: 'Hellron';
    src: url('./fonts/Old_Skull_Hellron.ttf') format('truetype');
}

@font-face {
    font-family: 'Shmatter';
    src: url('./fonts/RH-SHMATTER.ttf') format('truetype');
}

@font-face {
    font-family: 'Zombie Salad';
    src: url('./fonts/Zombie Salad.ttf') format('truetype');
}

@font-face {
    font-family: 'Imperial Web';
    src: url('./fonts/Imperial Web.ttf') format('truetype');
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-5.975%);
    }
}

html, body {
    background-color: var(--black);
    font-family: Verdana, Arial, sans-serif;
    color: var(--white);
}

.jb-header {
    font-family: 'Gulag', 'sans-serif';
    font-size: 2.35rem;
    color: var(--yellow);
}

.skull-header {
    font-family: 'Hellron', 'sans-serif';
    font-size: 3rem;
    color: var(--white);
}

.marq {
    width: 100vw;
    overflow: hidden;
    background-color: var(--black);
}

.marq .marq-inner {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 3.75s linear infinite;
}

.kys-header {
    font-family: 'Shmatter', 'sans-serif';
    font-size: 5rem;
    line-height: 1rem;
    color: var(--purple);
}

.font-zs {
    font-family: 'Zombie Salad', 'sans-serif';
    font-size: 3rem;
    padding-left:1rem;
    padding-right:1rem;
}

.event {
    text-align: center;
    font-weight: bold
}
.date {
    font-family: 'Shmatter', 'sans-serif';
    color: var(--yellow);
    font-size: 3rem;
    border-bottom: 1px var(--white) solid;
}
.location {
    font-family: 'Imperial Web', 'sans-serif';
    color: var(--purple);
    font-size: 1.75rem;
}

a:hover {
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 1));
    transform: rotate(1deg) scale(1.1);
    transition: transform .2s;
}

#footer {
    font-size: 1rem;
    padding:1rem;
}


/* lame dummy classes | ideally you'd install tailwind or bootstrap, but im trying to keep this light. */
.flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.align-center {
    align-items: center;
}
.pb-2 {
    padding-bottom:2rem;
}
.pt-2 {
    padding-top:2rem;
}
.gap-16 {
    gap: 16px;
}

.m-0 {
    margin: 0 !important;
}
.p-2 {
    padding: 2rem !important;
}
.pl-0 {
    padding-left: 0 !important;
}
.pr-0 {
    padding-right: 0 !important;
}

.rounded {
    border-radius: 1rem;
}

.w-100 {
    width: 100%;
}
.w-screen {
    width: 100vw;
}
.min-h-screen {
    min-height: 100vh;
}

.flex-grow {
    flex-grow: 1;
}
/*when width of screen is <475, make #header shrink*/
@media screen and (max-width: 475px) {
    .jb-header {
        transform: scale(0.75);
    }
    .kys-header {
        transform: scale(0.75);
    }
    .skull-header {
        font-size: 2rem;
    }
    .location {
        font-size: 1.25rem !important;
    }
}

@media screen and (max-width: 380px) {
    .jb-header {
        transform: scale(0.65);
    }
    .kys-header {
        transform: scale(0.65);
    }
    .marq {
        font-size: initial;
    }
    .skull-header {
        font-size: 1.5rem;
    }
}