body {
    color: rgb(255, 96, 96);
    line-height: 1;
    background-color: rgb(19, 19, 19);
    background-size: 50%;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;  
}

/* * {
  border: 1px solid rgb(123, 7, 7);
} */


.page{
  position: absolute;
  max-width: fit-content;
}

.left {
  display: block;
  top: -10px;
 position: relative;
 left: 30px;
 max-width: 50%;
 
}

.left img {
  position: relative;
  width: 90%;
  border: 2px solid rgb(122, 122, 122);
  padding: 10px;
  left: -50px;
}

.figcaption{
  position: relative;
  font-family: monospace;
  color: rgb(247, 171, 204);
  top: -19px;
  left: -9px;
}

.links {
  top: -17px;
  line-height: 2;
    font-size: larger;
    position: relative;
    font-family: monospace;
    width: 80%;
    padding-bottom: 50px;
}

.links a {
  position: relative;
  left: -25px;
    font-size: larger;
    font-family: monospace;
}

a:link { color: #0fff13; }
a:visited { color: #39ff16; }
a:hover { color: red; }
a:active { color: yellow; }

.social{
  position: relative;
  max-width: 30px;
  left: 5%;
  top: -60px;
}

.social img{
  border: 0;
}

.inst-text{
  position: relative;
  top: -36px;
  left: 6px;
}

.discord_icon{
  position: relative;
  top: -20px;
}

.discord_icon img{
  scale: 1.2;
}

.email{
  position: relative;
  left: -135%;
  top: -30px;
}

.crt {
  animation: textShadow 1.6s infinite;
  height: 940px;
}

.crt::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 200px 2px, 3px 200%;
  z-index: 2;
  pointer-events: none;
}

@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; }
}

@keyframes textShadow {
  0%, 100% {
    text-shadow: 0.5px 0 1px rgba(0,30,255,0.5), -0.5px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 2.5px 0 1px rgba(0,30,255,0.5), -2.5px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1px, -1px); }
  20% { transform: translate(1px, 1px); }
  30% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 0); }
  60% { transform: translate(1px, 0); }
  70% { transform: translate(0, 1px); }
  80% { transform: translate(0, -1px); }
  90% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

.right{
  position: absolute;
  top: 4%;
  left: 48%;
  height: 800px;
}

.about{
  position: relative;
  max-width: fit-content;
}
.about-title{
  position: relative;
  max-width: fit-content;
}

.about-body{
  position: relative;
  color: aliceblue;
  font-family: monospace;
  max-width: 370px;
}

.streaming-title{

  position: relative;

  max-width: fit-content;
}

.streaming-subtitle{
  position: relative;
  font-family: monospace;
  color: aliceblue;
  top: -16px;
}

.streaming-body{
  position: relative;
  font-family: monospace;
  color: rgb(173, 102, 255);
  width: 100%;
  top: -5px;
}

.right .streams{
  position:relative;
  left: 320px;
  top: -163px;
  max-width: fit-content;
}

.news{
  position: relative;
  top: -180px;
  max-width: fit-content;
}

.news-body{
  position: relative;
  top: -16px;
  color: aliceblue;
  font-family: monospace;
}

.right .youtube-container {
  border: 1.5px solid rgb(91, 255, 15);
  position: relative;
  max-width: fit-content;
}

.music-releases{
  position: relative;
  top: -200px;
  max-width: fit-content;
}

.music-releases{  
  width: 400px;
}

.right .banner{
  position: relative;
  left: 0px;
  max-width: 100%;
}

.banner{
  max-width: fit-content;
}

.slider{
  display: flex;
  gap: 1em;
  overflow-x: scroll;
  height: 100%;
}

.mr-body{
  color: aliceblue;
  font-family: monospace;
}

.item{
  align-content: center;
}

.item img{
  max-width: 150px;
  object-fit: fill;
}