@font-face {
font-family: font;
src: url("MARSNEVENEKSK.otf");
}

@font-face {
font-family: font2;
src: url("sickcapital-vice-otf.otf");
}

::selection {
background: #7dc6f0bf;
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 38rem;
margin: 0 auto; /* so width doesnt make it left aligned again */
}

.panel {
width: 40rem;
min-height: 100%;
margin: auto;
background: #050505BF;
padding: 2rem;
position: relative;
z-index: 2;
}

html, body {
font-family: Noto Sans Mono, Monospace;
color: #fff7f0;
background-image: url("imgs/bg3.jpg");
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
z-index: 0;
}

.glitche::before {
  content: "e";
  animation: glitche 1s infinite;
}

@keyframes glitche {
  5% {
    content: "e";
  }
  56% {
    content: "3";
  }
  80% {
    content: "E";
  }
  95% {
    content: "e";
  }
}

.glitchi::before {
  content: "i";
  animation: glitchi 1s infinite;
}

@keyframes glitchi {
  5% {
    content: "i";
  }
  56% {
    content: "1";
  }
  90% {
    content: "]";
  }
  95% {
    content: "i";
  }
}

.glitcho::before {
  content: "o";
  animation: glitcho 1s infinite;
}

@keyframes glitcho {
  10% {
  content: "o";
  }
  30% {
  content: "0";
  }
  70% {
  content: "O";
  }
  92% {
  content: "o";
  }
}

.glitchs::before {
  content: "s";
  animation: glitchs 1s infinite;
}

@keyframes glitchs {
  0% {
    content: "s";
  }
  40% {
    content: "$";
  }
  60% {
    content: "5";
  }
  90% {
    content: "s";
  }
}

h1 {
font-weight: normal;
font-size: 5rem;
font-family: font;
margin: 0;
margin-bottom: 0.4rem;
padding: 0;
}

h2 {
font-weight: normal;
font-size: 3rem;
font-family: font2;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: #998d8d;
font-size: 0.80rem;
}

a:hover {
color: #fff7f0;
}

p {
font-size: 0.80rem;
}

p span {
color: #998d8d;
font-size: 0.80rem;
}

pre {
font-size: 0.90rem;
}

pre a {
font-size: 0.90rem;
}

pre span {
color: #998d8d;
}

hr {
border-top: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to right, transparent, #998d8d, transparent);
}

#mp3-text {
position: absolute;
z-index: 4;
left: 19rem;
top: 16rem;
rotate: -15deg;
}

#mp3-text a:hover {
color: #050505;
}

.mp3 {
position: absolute;
height: 21rem;
top: 14rem;
left: 16rem;
z-index: 3;
}

#buttons {
position: absolute;
top: 76%;
left: 2rem;
z-index: 1;
}

@media only screen and (max-width: 1209px) {
.mp3 {
position: absolute;
height: 21rem;
top: 14rem;
left: 10rem;
z-index: 3;
}

#mp3-text {
position: absolute;
z-index: 4;
left: 13rem;
top: 16rem;
rotate: -15deg;
}

#buttons { /* so they're clickable on narrow screens */
z-index: 5;
}

}

ul {
list-style: none;
border-left: 0.1rem solid #fff7f0;
padding-left: 2rem;
}

details {
font-size: 0.80rem;
}

details > summary {
list-style-type: '> ';
}

details[open] > summary {
list-style-type: 'v ';
}

@keyframes static {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: 100% 100%;
  }
  20% {
    background-position: -100% -100%;
  }
  30% {
    background-position: 100% -100%;
  }
  40% {
    background-position: -100% 100%;
  }
  50% {
    background-position: 0 0;
  }
  60% {
    background-position: 100% 100%;
  }
  70% {
    background-position: -100% -100%;
  }
  80% {
    background-position: 100% -100%;
  }
  90% {
    background-position: -100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
  linear-gradient(transparent 80%, rgba(255,255,255, 0.08) 50%),
  linear-gradient(90deg, transparent 80%, rgba(255,255,255, 0.08) 50%),
  #000;
background-size: 4px 4px, 4px 4px, 4px 4px;
z-index: 2;
pointer-events: none;
animation: static 1s steps(10) infinite;
opacity: 0.5;
}

.sitez {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: .7s ease;
white-space: nowrap;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
margin-top: 1.5rem;
}

.sitez::-webkit-scrollbar {
display: none;
}

.sitez:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: .7s ease;
}

.movie {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-ms-overflow-style: none;
scrollbar-width: none;
}

.movie::-webkit-scrollbar {
display: none;
}

.movie:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: .7s ease;
}

.scroll {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: .7s ease;
white-space: nowrap;
animation: marquee 6s linear infinite;
width: 171rem; /* on todays ep of jank css we have manually modifying the width bc u cant do containers until the animation stops looking like stop motion */
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.scroll:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: .7s ease;
animation-play-state: paused;
}

.popup {
display: none;
position: fixed;
top: 10rem;
left: 70rem;
z-index: 100;
}

#tp-specs {
top: 15rem;
}

#hp-specs {
top: 20rem;
}

.popup:target {
display: flex;
background: #000;
}

.popup-content {
width: 15rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
}

.close-popup {
position: absolute;
top: 0.2rem;
right: 0.4rem;
}

/* (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=29048) (only mods i made was px -> rem) */
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url(imgs/cd2.webp); /* url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png'); */
}
.profile-pic {
position: relative;
width: 11.4375rem;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 0.3125rem;
left: -1.25rem;
width: 9.375rem;
height: 9.375rem;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -4.6875rem;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 10.1875rem;
height: 10rem;
border: none;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}


* {cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;}
a {cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), auto !important;}