body {
 background-image: url(/imagems/bg/loading.png);
  background-size: auto;
  background-repeat: repeat;
    background-size: 110px;
  font-family: torus;
  image-rendering: pixelated;
  margin: 0;
        }
       
        .iron-selected {
            color: none !important;
            background: linear-gradient(122.53deg, #4C54D2 0%, #BF14A2 56.25%, #F73A1C 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            font-weight: 600 !important;
        }

        .main {
width: auto;
  height: auto;
  background-color: rgba(25, 22, 32, 0.85);
  color: white;
  border-radius: 40px;
  border: 0.1px solid chocolate;
  outline: 1px solid black;
  box-shadow: inset 0px 0px 100px 30px #d2b61e0a, 20px 20px 20px #00000070;
  display: inline-grid;
  grid-auto-flow: column;
  justify-content: space-evenly;
  margin: 50px;
  padding: 30px;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: min-height 0.5s cubic-bezier(.17,.84,.44,1);
        }
        
        .premain {
            display: unset; 
        }
        
        a {
            color: skyblue;
            text-decoration: none;
        }

        a:hover {
            color: yellow;
        }

        .left {
    position: relative;
  width: 650px;
  display: inline-block;
  padding: 20px;
  padding-left: 0px;
  padding-right: 0px;
        }
        
        .headerRL {
              font-family: msg;
  text-align: center;
  margin: 0;
  font-size: 24pt;
  margin-bottom: 24px;  
  align-self: center;
        }

        .right {
position: relative;
  width: 390px;
  display: block;
  text-align: left;
  padding: 20px;
        }
        
        .right-content {
display: flex; /* Changed to flex to allow wrapping within its container */
  flex-direction: column;
  text-align: left;
  width: auto; /* This can be set to a specific value or left as auto */
  align-items: flex-start; /* Changed to a more common alignment property */
  flex-wrap: wrap; /* Allow wrapping within the flex container */
        }

        .links-container {
            margin-left: 20px;
            font-size: 32px;
        }

        .links-box {
display: grid;
  width: auto;
  height: auto;
  border: solid #8a2be2a3 1px;
  border-radius: 30px;
  box-shadow: inset #8a2be2ad 0px 0px 9px;
  padding: 20px;
    padding-left: 40px;
  background-color: #0000001a;
        }

        .link-item {
           display: flex;
  align-items: center;
        }

        .link-item img {
            width: 32px;
            border-radius: 12px;
            padding-bottom: 0px;
            margin-right: 10px;
        }

        .link-text {
            position: relative;
            font-size: 18px;
        }
        
        .theActualLinks {
            position: relative;
            line-break: anywhere;
            font-size: 18px;
            text-align: left;
        }
        
        .debug {
            font-family: vcr;
            position: fixed;
            z-index: 10000;
            color: white;
            display: block; 
            padding: 12px;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 70px;
            top: 0%;
            display: none;
            border: 1px aqua solid;
            border-radius: 11px;
        }

        .hardpic {
            width: 300px !important;
            border-radius: 20px !important;
            margin: 0 !important;
        }

        #protip {
            font-size: 14px;
            color: #858585;
        }
        

        .misc {
            text-align: left;
        }
        
        .misc > p {
          margin: 12px;
        }
        
        
         .box1 {
    background-color: #530059ba;
    width: 420px;
    height: 95px;
    border-radius: 4px;
    position: relative; 
    z-index: 1; 
    text-wrap: no-wrap;
}

.box2 {
  background-color: #001f3c73;
  width: 420px;
  height: 95px;
  border-radius: 4px;
  position: relative;
  top: -112px;
  left: -5px;
  z-index: 2;
   text-wrap: nowrap;
}

.now-playing {
    position: fixed; 
    width: 460px; 
    height: 95px;
    z-index: 9999;
    bottom: 8%;
  left: 2%;
  user-select: none;
}
    
    .basic {
      margin: 15px;
      margin-top: 12px;
    }
    
  @keyframes nowPlayingTextAnimation {
  0% {
    opacity: 0;
    text-shadow: -24px 0px #ca06d1;
    left: 14px;
  }

20% {
    opacity: 1;
     text-shadow: -2px 0px #ca06d1;
    left: 0px;
  }
  
80% {
    opacity: 1;
     text-shadow: -2px 0px #ca06d1;
    left: 0px;
  }
  
  100% {
    opacity: 0;
  }
}

.nowPlayingText {
  opacity: 0;
  position: relative;
  left: 7px;
  animation: nowPlayingTextAnimation 4.8s 0.5s ease-out forwards;
  font-family: 'vcr';
  font-size: 31px;
  letter-spacing: 1.5px;
  color: #00e7ff;
  margin-bottom: 0px;
  padding-top: 10px; 
}

@keyframes headphoneAnimation {
  0% {
    filter: drop-shadow(-24px 0px #ca06d1);
  }

  
  100% {
    filter: drop-shadow(-2px 0px #ca06d1);
  }
}

.headphone {
  animation: headphoneAnimation 1s 0.5s ease-out forwards;
 display: inline-block;position: absolute;
transform: translate(4px); 
}

.headphoneImg {
 width: 36px;
 filter: invert(61%) sepia(30%) saturate(2946%) hue-rotate(165deg) brightness(114%) contrast(92%);
 image-rendering: pixelated; 
}

@keyframes songNameAnimation {
  0% {
    opacity: 0;
    transform: translateX(-7px);
  }
  10% {
    opacity: 0;
    transform: translateX(-7px);
  }
  25% {
    opacity: 1;
    transform: translateX(0px);
  }
  
  80% {
    opacity: 1;
    transform: translateX(0px);
  }
  
  100% {
    opacity: 0;
  }
}


.song-name {
  opacity: 0;
  animation: songNameAnimation 4.5s 0.5s forwards;
  animation-timing-function: ease-in-out;
 margin-top: 5px;
 font-family: vcr;
 color: #00ffff;
 font-size: 24px; 
 text-wrap: no-wrap;
}

@keyframes hrAnimation {
  0% {
    opacity: 1;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 210px;
  }
  80% {
    opacity: 1;
    width: 210px;
  }
  99% {
    opacity: 1;
    width: 0px;
  }
  100% {
    opacity: 0;
  }
}

.hr {
   opacity: 0;
  animation: hrAnimation 4.4s 1s forwards;
  animation-timing-function: cubic-bezier(.19,1,.22,1);
   border: 1px solid #f0f;
   height: 1px;
   background-color: #f0f;
   margin: 0;
   padding-right: 0px;
   margin-right: 15px;
   text-align: center;
}

@keyframes boxAnimation {
  0% {
    width: 0px;
  }
  20% {
    width: 560px;
  }
 
   80% {
    width: 560px;
  }
  100% { 
    width: 0px;
  }
}

.box1, .box2 {
  animation: boxAnimation 6s forwards;
  animation-timing-function: cubic-bezier(.19,1,.22,1);
}