* {
      box-sizing: border-box;
    }
  
        @font-face {
  font-family: "maass slicer";
  src: url("/assets/fonts/maass slicer Italic.ttf") format("truetype");}
        @font-face {
  font-family: "glacial indifference";
  src: url("/assets/fonts/GlacialIndifference-Regular.otf") format("truetype");}
        @font-face {
  font-family: "glacial indifference bold";
  src: url("/assets/fonts/GlacialIndifference-Bold.otf") format("truetype");}
  
    body {
      margin: 0;
      background: black;
      font-family: Poppins, sans-serif;
    }

  body::-webkit-scrollbar {
  display: none; 
  background: transparent;
  width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
      } 
  
  body::-webkit-scrollbar-thumb {
  background: transparent;
      } 
      
      
    .wrapper {
      position: relative;
      max-width: 900px;
      margin: 45px auto;
      padding: 0 15px;
      left: 12px;
    }
    
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      }

    /* hide radio buttons */
    input[type="radio"] {
      display: none;
    }

    /* tabs row */
    .tabs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-bottom: 30px;
      font-family: "maass slicer";
      letter-spacing: -0.21px;
      font-size: 0.875rem;
    }


    .tab {
      position: relative;
      left: -12px;
      font-size: clamp(12px, 1.2vw + 8px, 14px);
      text-align: center;
      background: #676767;
      color: #39ff14;
      cursor: pointer;
      border: 1.3px dashed black;
      padding: 2px;
      transition: 0.2s;
      user-select: none;
      z-index: 3;
    }
  

    .tab:hover {
      background: #333;
    }
    
    .tab p{
 margin: 0;
 padding: 0;
 margin-left: 4px;
      }

    /* active tab */
    #albums:checked + label,
    #anime:checked + label,
    #manga:checked + label,
    #movies:checked + label,
    #games:checked + label {
      background: #444;
    }

    /* content box */
    .content-box {
      display: flex;
      position: relative;
      margin-top: 30px;
      top: -12px;
      left: -12px;
      background: #999;
      min-height: 580px;
      border-radius: 10px;
      display: flex;
      box-shadow: 9px 9px 12px rgba(0, 0, 0, .37);
      margin-bottom: 24px;
    }
  

    .some-fucking-popping-effect {
      position: relative;
     background-color: #39ff14;
 border-radius: 12px;
 overflow: visible;
    }
    
  .some-fucking-popping-effect #babe{ position: absolute; left: 86%; top: -5%; }
  
.wire-background {
  overflow: hidden;
 width: 100%;
  margin-top: -1px;
  border-radius: 12px;
  position: relative;
  background-image: url("assets/images/the wire mesh i hope its not shit.png")
  }

    .panel {
      display: none;
      width: 100%;
      color: white;
  position: relative;
  z-index: 2;
  padding: 20px;
    }
    
    .panel h2 {
        font-family: 'Tomorrow';
        font-weight: 400;
      }
      
     .panel p {
       font-family: 'glacial indifference';
       } 

.text-block {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  }

.album-layout {
  display: flex;
  gap: 0.83em;
  margin-bottom: 2.42em;
  }
  
.album-layout img {
  width: 150px;
  filter: grayscale(100%) sepia(100%) hue-rotate(50deg) contrast(120%) saturate(250%) brightness(80%);
  object-position: center;
  min-height: 150px;
  }
  
.panel {
  max-height: 580px;
    overflow: scroll;
    overflow-x: hidden;
  }
  
.panel::-webkit-scrollbar {
  display: none; 
  background: transparent;
  width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  }
  
.panel::-webkit-scrollbar-thumb {
  background: transparent;
  }  
  
.panel h2 {
  color: black;
  font-size: 3rem;
  margin: 0;
  padding: 12px;
  }
.text-block p {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  margin-bottom: 0.875rem;
  color: black;
  }  

    /* show selected content */
#albums:checked ~ .some-fucking-popping-effect .albums,
#anime:checked ~ .some-fucking-popping-effect .anime,
#manga:checked ~ .some-fucking-popping-effect .manga,
#movies:checked ~ .some-fucking-popping-effect .movies,
#games:checked ~ .some-fucking-popping-effect .games {
  display: block;
}

.bottoming-nav {

    }
.bottoming-nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
font-family: "maass slicer";
letter-spacing: -0.21px;
font-size: clamp(12px, 1.2vw + 8px, 18px);
  letter-spacing: 1.6967px;
  width: 100%;
      display: flex;
        justify-content: space-around;
    align-items: center;
}

.bottoming-nav li {
   padding-bottom: 1px;
  }  
  
.bottoming-nav a:hover {
color: #dcd9d3;
  }  

.bottoming-nav a {
 text-decoration: none;
 color: #676767;
 display: block;
 width: 100%
  }
@media (max-width: 600px) {
    .some-fucking-popping-effect #babe{ position: absolute; left: 41%; top: 2.5%; height: 550px;}

.album-layout {
  flex-direction: column;
  margin-bottom: 1.30em;
  }
  
.header {
  margin-right: 24px;
  }  
.panel h2 {
  font-size: 1.60rem;
  }  
  
.text-block p{
  font-size: 1rem;
  margin-bottom: 0.1rem;
  }  
  
.text-block {
    margin-top: 0.1rem;
  }
body {
  overflow-x: hidden;
   touch-action: pan-y;
  }    
  
.bottoming-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
  }

.bottoming-nav ul li {
  flex: 0 0 20%;
  text-align: center;
}

.content-box {
  margin-bottom: 30px;
  }

.panel {
  width: 250px;
  }
    .tab {
      border: 1px dashed black;
    }
    .tab:hover {
      background: #676767;
    }
}