body {
    background-image: url('wallpaper/coffeauto.webp');
    background-position: left top;
    background-attachment: fixed;
    background-color: #111314;
  	text-rendering: optimizeLegibility;
    margin: 0;
    overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'ledlight';
  src: url('/fonts/LEDLIGHT.otf') format('opentype');
}

@font-face {
  font-family: '10pixel';
  src: url('fonts/10Pixel-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'mkds';
  src: url('fonts/Mario-Kart-DS.ttf') format('opentype');
}

@font-face {
  font-family: 'burn';
  src: url('fonts/cityburn.ttf') format('opentype');
}

@font-face {
  font-family: 'heroin';
  src: url('fonts/Got_Heroin.ttf') format('opentype');
}

@font-face {
  font-family: 'ripped';
  src: url('fonts/TURBOripped.ttf') format('opentype');
}

@font-face {
  font-family: 'static';
  src: url('fonts/StaticBuzz.ttf') format('opentype');
}

@font-face {
  font-family: 'draft';
  src: url('fonts/handwriting-draft.ttf') format('opentype');
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

::selection {
    background-color: #dd4027 !important;
    color: #ffefae !important;
}

.thattext {
  white-space: pre;
}

.thattext span {
  display: inline-block;
  transition: 0.3s ease;
}
    
  .thattext span.active {
    animation: wiggle .2s;
    filter: blur(1px);
      text-shadow:
    0 0 5px #ffefae;
    color: white;
    -webkit-background-clip: text;
    background-clip: text;
    background-position: center;
  }
  
  @keyframes wiggle {
  0% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

@media (min-width: 769px) {
  .headertext:hover {
    font-family: 'static';
    transform: none;
    filter: drop-shadow(0 0 50px #dd4027);
    text-align: center;
    letter-spacing: inherit;
    transition: 0.5s ease;
    color: #ffefae;
  }

  .headertext:hover .thattext {
    font-family: 'static';
    margin-right: 90rem;
    font-size: 9rem;
    opacity: 1;
    transition: 0.5s ease;
  }

  .headertext:hover .thattext span {
    display: inline-block; 
  }
}
  
  header {
    grid-area: header;
    filter: drop-shadow(0 0 25px #f5ecc2);
    height: 150px;
    z-index: 2;
  }
    .headertext {
    font-family: 'static';
    font-size: 9rem;
    color: #ffefae;
    font-weight: 100;
    letter-spacing: 0.5rem;
    }
      .thattext {
        font-family: 'static';
        margin-left: -13px;
        font-size: 9rem;
        margin: 0.5em;
        opacity: 0.94;
        }