/* Destroy the ridiculous default values */
html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{
margin:0;
padding:0;
border:0;
outline:0;
font-size: 100%;
}
/* add my fonts */
@font-face{
  font-family:atkinson;
  src: url('fonts/atkinson.otf');
}
@font-face{
  font-family:stereonic;
  src: url('fonts/stereonic.otf');
}
@font-face{
  font-family:stereonic-xl;
  src: url('fonts/stereonic-xl.otf');
}
@font-face{
  font-family:stereonic-over;
  src: url('fonts/stereonic-overline.otf');
}
@font-face{
  font-family:stereonic-under;
  src: url('fonts/stereonic-underline.otf');
}
@font-face{
  font-family:stereonic-stencil;
  src: url('fonts/stereonic-stencil.otf');
}
@font-face{
  font-family:stereonic-symbols;
  src: url('fonts/stereonic-symbols.otf');
}
/* make it so the whitespace doesn't appear if scrolling at edge of page */
html{
  overscroll-behavior: none;
}
/* set body default font to atkinson and make the angled red color */
body {
  font-family: 'atkinson';
  background-image: linear-gradient(120deg, #DB0049 30%, #190008 30%);
}
/* this is the outline around the nav */
/* position relative to body, set border color and width. border radius makes the rounded corners. */
/* set right and left sides of margin. width fit content makes the area only as big as what's inside. */
/* dont rly know what display flex does. z index brings it in front of marquee */
.navoutline{
  position: relative;
  border: solid #f8f8ff;
  border-radius: 5px;
  border-width: 3px;
  margin: 0 2vw 2vw  2vw;
  background: #DB0049;
  align-items: center;
  z-index: 1;
}
/* this is the title above the nav. colors it, moves it away from the left side. */
/* set font min norm and max. add black strok to text which kind of doesn't work on this font but water. prevent user from seleting it. */
.navoutline legend {
  color: #f8f8ff;
  margin-left: 3vw;
  font-size: clamp(4vw, 4rem, 8vw);
  font-family: 'stereonic';
  -webkit-text-stroke: 1px white;
  padding: 0 15px;
  user-select: none;
}
/* set size of font inside the nav */
.navbox {
  font-size: clamp(1.9rem, 2vw, 2.5rem);
}
/* style the list items inside the nav */
.navlist li {
  display: inline-block;
  margin: 0px 7px 5px 7px;
  font-family: 'stereonic-stencil';
  text-align: center;
}
/* style link colors to be black.*/
.navlist a {
  color: #190008;
}
#topnav a {
  font-size: clamp(1em, 3vw, 4em);
}
/* makes it so when someone highlights stuff its that cool bright red */
::selection {
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
}
/* remove the underline from links */
a:link{
  text-decoration: none;
}
/* do the highlight stuff for hovered links */
a:hover{
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
}
/* this whole marquee right and 2 is the text behind everything. positions it and moves it. */
.marquee {
    position: fixed;
    top: 0;
    --move-initial: 0%;
    --move-final: -5%;
    z-index: 0;
}
.marquee-right {
    position: fixed;
    top: 2.1em;
    --move-initial: -5%;
    --move-final: 0%;
    z-index: 0;
}
.marquee-2 {
    position: fixed;
    top: 4.4em;
    --move-initial: 0%;
    --move-final: -5%;
    z-index: 0;
}
/* the display flex here is needed for the scrolling appearance. */
.marquee-inner {
    display: flex;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 1s linear infinite;
    animation-play-state: running;
}
/* style the text in the marquee set font size and color etc */
.marquee span, .marquee-2 span, .marquee-right span {
    user-select: none;
    color: #190008;
    font-size: clamp(44px, 3vw, 30px);
}
/* style font family of each separately */
.marquee span {
    font-family: 'stereonic-over';
  }
.marquee-right span {
    font-family: 'stereonic-stencil';
  }
.marquee-2 span {
    font-family: 'stereonic-under';
  }
/* this is the keyframes and animation for the marquee */
@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}

/* display using grid and and set width of each column. */
.row {
  margin-top: 7vh;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1fr;
}
/* breakpoint for fixing weird margin on the descripbox at smaller res */
/* this is the breakpoint for when the boxes stack instead of sit next to eachother. */
@media screen and (max-width: 1190px) {
  .row {
  display: grid;
  grid-template-columns: 1fr;
  }
}
/* this fixes the weird margins on smaller res. had to add important because for some reason */
/* the css wouldn't override the other margin property? */
@media screen and (max-width: 1190px) {
  #descripbox {
  margin: 5% 5% !important;
  }
}
/* this is the vhs image styling on the main page for when the viewport shrinks it removes them */
@media screen and (max-width: 1190px) {
  .vhs {
  display: none;
  }
}
/* this makes the tv resize when the viewport is resized */
.tv {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;
}
h1{
font-size:1.6em;
padding:.3em;
font-family: stereonic-xl;
}
h2{
font-size:1.2em;
margin:15px 0;
font-family: stereonic;
}
h3{
border-bottom:3px dotted #f8f8ff;
font-size:1.2em;
margin:15px 0;
font-family: stereonic;
}
h1::first-letter {
color: #f8f8ff;
}
h2::first-letter{
color: #f8f8ff;
font-size:1.4em
}
h3::first-letter{
color: #f8f8ff;
font-size:1.4em;
}
.navbox h1, .navbox h2, .navbox h3, .navbox p {
  text-align: center;
}
.descrip p {
  margin: 1em 3em;
}
#descripbox {
  margin: 5% 10%;
}
/* i dont...really understand what i did here but it works. */
/* this styles the images before the lightbox opens */
.lightbox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* this is the row of images once the lightbox is open */
.opencolumn {
  float: left;
  width: 25%;
}
.column {
  margin: 0px 1px;
}
/* actual lightbox darkening thing */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #190008;
}
/* style part of the thing around the image in the lightbox */
.modal-content {
  position: relative;
  background-color: #f8f8ff;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
/* styles the lightbox x */
.close {
  color: #f8f8ff;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
/* changes the cursor to a pointer when hovering over the close lightbox thing and chnages its color */
.close:hover,
.close:focus {
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
  cursor: pointer;
}
/* positions the back button. styles the next and back buttons. */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #f8f8ff;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* makes a black box around the next image arrow when hovering */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* numbers in top left of lightbox image */
.numbertext {
  color: #f8f8ff;
  font-family: stereonic-over;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* this is the black bar under the image in the lightbox and the white bar too */
.caption-container {
  background-color: #190008;
  color: #f8f8ff;
}
/* this and the next one set opacity on rollover etc */
img.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}
/* this adds the shadow under the image when hovering */
img.hover-shadow {
  transition: 0.3s;
}
/* this animates the hover */
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* this adds an animated glow to the download h2 lol */
.download {
animation: pulse 5s infinite;
}
@keyframes pulse {
    0% {
        text-shadow:
            0 0 0 white,
            0 0 0 white,
            0 0 0 white;
    }
    50% {
        text-shadow:
            0 0 10px white,
            0 0 20px white,
            0 0 30px white;
    }
    100% {
        text-shadow:
            0 0 0 white,
            0 0 0 white,
            0 0 0 white;
    }
}
.builds {
  display: table;
  margin: 0 auto;
  font-size: clamp(1.5em, 1.5vw, 2em);
}
.builds a {
  font-family: stereonic-stencil;
  color: #f8f8ff;
  text-decoration: underline #f8f8ff;
}
.builds a:hover {
  -webkit-text-stroke-color: rgb(0, 0, 36);
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
  color: black;
}
#symbol {
  text-decoration: none;
  font-family: stereonic;
  color: #f8f8ff;
  font-size: clamp(1.5em, 1.5vw, 2em);
}
hr {
  border: none;
  border-top: 3px double #f8f8ff;
  color: #f8f8ff;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: #DB0049;
  content: "∅";
  padding: 0 4px;
  position: relative;
  top: -0.7em;
}
/* WORKING SECTION */