@font-face {
    font-family: "H1";
    src: url("fonts/stylized/Heartless.ttf") format("truetype");
}
.H1 {font-family: "H1" !important;}
@font-face {
    font-family: "H2";
    src: url("fonts/stylized/Hatch.ttf") format("truetype");
}
@font-face {
    font-family: "Headings";
    src: url("fonts/stylized/BrokenDetroit.ttf") format("truetype");
}

@font-face {
    font-family: "Timeburner";
    src: url("fonts/TimeburnerBold-peGR.ttf") format("truetype");
}
@font-face {
    font-family: "Steiner";
    src: url("fonts/SteinerLight-JR1o.ttf") format("truetype");
}
@font-face {
    font-family: "Pasti";
    src: url("fonts/PastiRegular-mLXnm.otf") format("truetype");
}

a,
#pixel-bat,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
label,
[role="button"],
[onclick],
.clickable,
*:hover[style*="cursor: pointer"] {
  cursor: url('/files/images/crosshair-select2.png') 10 10, pointer;
}

:root {
    cursor: url('/files/images/crosshair2.png') 10 10, crosshair;
    --bg        : #191915;
    --dark      : #100d01;
    --text      : #eeecf5;
    --headings  : #ffffff;
    --sub-headings  : #c7bdae;
    --primary   : #580027;
    --link      :rgb(201, 6, 6);
    --secondary : #1c3a0f;
    --gray      : #B3B3C4;
    --bg-gradient : linear-gradient(165deg, #0d0b0a, var(--bg), var(--dark));

    --spacing-tiny   : 10px;
    --spacing-small  : 20px;
    --spacing-medium : 40px;
    --spacing-large  : 80px;
    --spacing-xl     : 120px;
    --spacing-xxl    : 180px;

    --gutter : 7vw;

    --text-tiny   : 12px;
    --text-small  : 16px;
    --text-medium : 22px;
    --text-large  : 30px;
    --text-xl     : 56px;
    --text-xxl    : 100px;/*80px;*/
    --text-xxxl    : 140px;
}

/* desktop */
@media only screen and (max-width: 1600px) {
    :root {
        --spacing-tiny   : 5px;
        --spacing-small  : 15px;
        --spacing-medium : 30px;
        --spacing-large  : 60px;
        --spacing-xl     : 90px;
        --spacing-xxl    : 160px;

        --gutter : 10vw;

        --text-tiny   : 10px;
        --text-small  : 12px;
        --text-medium : 16px;
        --text-large  : 22px;
        --text-xl     : 48px;
        --text-xxl    : 80px;/*60px;*/
        --text-xxxl    : 140px;
    }
}

/* tablet */
@media only screen and (max-width: 900px) {
    :root {
        --gutter : 5vw;

        --text-tiny   : 10px;
        --text-small  : 12px;
        --text-medium : 14px;
        --text-large  : 20px;
        --text-xl     : 40px;
        --text-xxl    : 60px;/*50px;*/
        --text-xxxl    : 100px;
    }
}

/* mobile */
@media only screen and (max-width: 500px) {
    :root {
        --gutter : 20px;
        --text-tiny   : 10px;
        --text-small  : 12px;
        --text-medium : 14px;
        --text-large  : 18px;
        --text-xl     : 24px;
        --text-xxl    : 40px;/*36px;*/
        --text-xxxl    : 80px;
    }
    .ornament > * {
      bottom: 35px !important;
      font-size: 14px !important;
    }
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg);
    min-height: 100vh;
    min-width: 100vw;
}
html::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: var(--bg-gradient);
}
html::after {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.2;
    z-index: -97;
    mix-blend-mode: lighten;
    background-position: bottom;
    background-size: cover;
    background-image: url(images/fire.gif);
}
.ornament {
    margin-bottom: 0;
    position: fixed;
    bottom: 0; right: 0;
    width: 10vw;
    min-width: 100px;
    max-width: 200px !important;
    aspect-ratio: 1 / 1;
    z-index: 99;
    background-position: center;
    background-size: cover;
    background-image: url(images/corner-ornament.png);
}
.ornament > * {
    font-family: "H2" !important;
    font-size: 26px;
    position: absolute;
    rotate: -45deg;
    animation: socials-rotate 4s linear infinite;
    bottom: 20%;
    right: 0;
    text-shadow: 0px 0px var(--spacing-tiny) var(--link);
    filter: drop-shadow(0px 0px var(--spacing-small) rgba(0,0,0,0.8));
}
.stars {
    position: absolute;
    inset: 0;
    padding: 0; margin: 0;
    opacity: 0.6;
    z-index: -100;
    mix-blend-mode: lighten;
    background-position: center var(--stars-y, 0px);
    background-size: 200px;
    background-image: url(images/stars.gif);
}
.stars::before {
    content: ' ';
    position: absolute;
    inset: 0;
    padding: 0; margin: 0;
    opacity: 0.2;
    z-index: -100;
    mix-blend-mode: lighten;
    background-repeat: no-repeat;
    background-position: center var(--smoke-y, 0px);
    background-size: 900px;
    background-image: url(images/smoke.gif);
}

body {
    position: relative;
    margin: 0;
    padding: var(--spacing-small) 0 0 0;
    color: var(--text);
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
    opacity: 60%;
    background-image: url(images/motorcycle.jpg);
    background-size: cover;
    background-position: bottom;
    mask-image: linear-gradient(rgba(0,0,0,0) 10%, rgba(0,0,0,1));
}
body::after {
    content: '';
    position: fixed;
    bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: -98;
    opacity: 60%;
    background-image: url(images/wolves.jpg);
    background-size: contain;
    background-position: top;
    mix-blend-mode:hard-light;
    mask-image: linear-gradient(rgba(0,0,0,0.2) , rgba(0,0,0,1));
}


html {
    max-width: 100%;
    justify-items: center;
    overflow-x: hidden;
}

body {
    max-width: 1400px;
    overflow-x: hidden;
}

body * {
    line-height: 1.1;
    font-family: 'Headings', 'Pasti', 'Steiner';
    letter-spacing: 10%;
    text-shadow: 0px 0px var(--spacing-tiny) var(--gray);
    filter: drop-shadow(0px 0px var(--spacing-tiny) rgba(0,0,0,0.1));
}

body h1, body h2 {
    color: var(--headings);
    text-shadow: 0px 0px var(--spacing-tiny) var(--dark);
    filter: drop-shadow(0px 0px calc(var(--spacing-tiny)*1.5) rgba(255,255,255,0.8));
}

body h3, body h4, body h5, body b {
    color: var(--sub-headings);
}
body h3, body h4, body h5 {
    text-shadow: 0px 0px var(--spacing-tiny) var(--bg);
    filter: drop-shadow(0px 0px calc(var(--spacing-tiny)*1.5) rgba(255,255,255,0.3));
}

body h1 {
    font-family: 'H1', 'Timeburner';
    font-size: var(--text-xxl);
}
body h2 {
    font-family: 'H2';
    font-size: var(--text-xl);
}
body h3 {
    font-size: var(--text-large);
}
body h4, body p, body span, body li {
    font-size: var(--text-medium);
}
body small {
    font-size: var(--text-small);
}
#hero h1 {
    font-size: var(--text-xxxl);
}
nav *, nav > p, nav > a {
    font-size: var(--text-medium);
    align-content: center;
}

body li {
    list-style: inside;
}

body p, body small, body li {
    line-height: 1.8;
    font-family: 'Steiner';
    letter-spacing: 1.3px;
}
body a {
    color: var(--link);
    text-shadow: 0px 0px var(--spacing-tiny) var(--link);
    font-weight: 700;
}

body button {
    color: var(--text);
    transition: all 0.3s;
    background-color: var(--primary);
    padding: var(--spacing-small);
    font-size: var(--text-large);
}

body button.small {
    padding: var(--spacing-small);
    font-size: var(--text-medium);
    background-color: var(--gray);
    filter: drop-shadow(5px 5px var(--link));
}
body button.big {
    padding: var(--spacing-small);
    font-size: var(--text-xl);
    padding: var(--spacing-medium);
    background-color: var(--link);
}

body button.secondary {
    background-color: var(--secondary);
    filter: none;
}

button:hover {
    scale: 1.05;
    filter: drop-shadow(5px 5px var(--link));
}
button.secondary:hover {
    scale: 1.05;
    filter: drop-shadow(5px 5px var(--primary));
}

body > div {
    padding: 0 var(--gutter);
    margin-bottom: var(--spacing-large);
}

.gap-sm {
    gap: var(--spacing-small);
}
.gap-md {
    gap: var(--spacing-medium);
}
.gap-lg {
    gap: var(--spacing-large);
}

.alt {
    position: relative;
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
    mix-blend-mode: difference;
}
.alt::before {
    content: ' ';
    inset: 0;
    position: absolute;
    z-index: -1;
    background: var(--primary);
    pointer-events: none;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}


div:has(footer) {
    position: relative;
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-xl);
    mix-blend-mode: difference;
    margin-bottom: 0;
}
div:has(footer)::before {
    content: ' ';
    inset: 0;
    position: absolute;
    z-index: -1;
    background: var(--bg-gradient);
    pointer-events: none;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}


/* SCAN LINE ANIMATION */
.scan-line {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 0.1px;
    max-width: 5px;
    height: 100vh;
    background: #003d1e59;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1) 30%, rgba(0,0,0,0));

    mix-blend-mode: overlay;
    opacity: 0.1;
    box-shadow: 0 0 12px #00ff88, 0 0 30px #1f2321;
    animation: scan 25s linear infinite;
    pointer-events: none;
    z-index: 9999;
    backdrop-filter: blur(6px) brightness(2.6) saturate(1.6);
  -webkit-backdrop-filter: blur(6px) brightness(1.35) saturate(1.6);
  }

  @keyframes scan {
    0% {
      transform: translateX(-100%);
    }
    45% {
      transform: translateX(-100%);
    }

    50% {
      transform: translateX(100vw);
    }
    95% {
      transform: translateX(100vw);
    }
    100% {
      transform: translateX(-100%);
    }
  }


  @keyframes socials-rotate {
    0% {
      rotate: -47deg;
    }
    10% {
      rotate: -50deg;
    }

    50% {
      rotate: -43deg;
    }
    60% {
      rotate: -40deg;
    }
    100% {
      rotate: -47deg;
    }
  }