@font-face {
  font-family: Splendid;
  src: url("/assets/fonts/SplendidB.ttf") format("truetype");
  }

body {
  background-color: black;
  color: #fb05ce;
  overflow: hidden;
}

.main {
  display: flex;
  flex-direction: column;
  max-width: 810px;
  height: 64vh;
  margin: auto;
  align-items: center;
  }
  
.header {
  margin: 0;
  margin-top: 30px;
  } 

.header img {
  max-width: 210px;
  }  
  
.drives {
  display: flex;
  width: 100%;
  justify-content: center;
  } 

.drive {
  display: flex;
  flex-direction: column;
  width: 25%;
  align-items: center;
  justify-content: center;
  } 


.drive p{
  font-size: 6vh;
  } 

.content {
  display: flex;
  flex-direction: column;
  border: 1px solid #fb05ce;
  width: 100%;
  height: 100%;
  }  

.navigation {
  display: flex;
  width: 100%;

  justify-content: space-between;
  padding: 10px;
  }  
  
.navigation ul {
    align-items: flex-start;
  width: 100%;
  font-size: 1.25rem;
    display: flex;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
    margin-top: 1rem;
     flex-wrap: wrap;
  justify-content: space-evenly;

}

.mewtwo {
  margin: 0px;
  padding: 0px;
  padding-right: 20px;
  display: flex;
  }

  
.navigation li {
font-family: "Courier New";
  }  
.navigation li:hover a {
color: white;
  }  
.navigation a {
 text-decoration: none;
color: #fb05ce;
  }  

.bullshit {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: scroll;
  overflow-x: hidden;
    height: auto;
  } 

.bullshit summary, p{
  letter-spacing: -0.67px;
  font-size: 1.25rem;
  font-family: "Courier New";
  font-weight: 600;
  }  

.bullshit::-webkit-scrollbar {
  display: none; 
  background: transparent;
  width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  }
  
.bullshit::-webkit-scrollbar-thumb {
  background: transparent;
  }  
  
 @keyframes flicker {
0% {
opacity: 0.27861;
}
5% {
opacity: 0.34769;
}
10% {
opacity: 0.23604;
}
15% {
opacity: 0.90626;
}
20% {
opacity: 0.18128;
}
25% {
opacity: 0.83891;
}
30% {
opacity: 0.65583;
}
35% {
opacity: 0.67807;
}
40% {
opacity: 0.26559;
}
45% {
opacity: 0.84693;
}
50% {
opacity: 0.96019;
}
55% {
opacity: 0.08594;
}
60% {
opacity: 0.20313;
}
65% {
opacity: 0.71988;
}
70% {
opacity: 0.53455;
}
75% {
opacity: 0.37288;
}
80% {
opacity: 0.71428;
}
85% {
opacity: 0.70419;
}
90% {
opacity: 0.7003;
}
95% {
opacity: 0.36108;
}
100% {
opacity: 0.24387;
}
}
 
#wrapper::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 42069;
pointer-events: none;
animation: flicker 0.15s infinite;
}
#wrapper::before{
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.5) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.012), rgba(0, 255, 0, 0.004), rgba(0, 0, 255, 0.012));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;

}

#noise:before {
    position: absolute;
    margin: 0;
    align-items: center;
    justify-content: center;
width: 100vw;
    height: 100vh;
    content: "";
    /* you can control opacity of noise  */
    opacity: .234569;  
    z-index: 4;
    pointer-events: none;
    background: url(assets/images/noise.gif) ;
    mix-blend-mode: multiply;
    background-repeat: repeat;
    animation: 0.15s;
    top: 30vh;
  }

.the-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-top: 0;
  padding-bottom: 8px;
  }

.the-end img {
  max-height: 45px;
  filter:  sepia(70%) saturate(700%) brightness(80%);
  }
@media (max-width: 600px) {
  
  body {
    overflow: hidden;
    }
  .navigation ul {
    margin-top: 10px;
    font-size: 1rem;
    max-height: 50px;
    }
    
  .drive p{
  font-size: 6vw;
  }
  
  .header img {
    width: 150px;
    }
  
  .content {
    border: 1.5px solid #ff10ff;
    min-height: 480px;
    }
  
  .bullshit summary, p{
  letter-spacing: -0.67px;
  font-size: 1rem;
  font-family: "Courier New";
  font-weight: 600;
  } 
  
#noise::before {
  
  top: 22%;
  margin-left: -2px;
  opacity: 0.267;
  }

}