@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Shadows+Into+Light&display=swap');
     
 @import url('https://fonts.googleapis.com/css2?family=Jersey+20&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap');

  
     @font-face {
               font-family: 'Comico-Regular';
               src: url('Comico-Regular.woff2') format('woff2');
              font-weight: 400;
              font-display: swap;
              font-style: normal;
      }
    
    #title h1 {
              font-family: "Jacquard 24", system-ui;
              font-weight: 400;
              font-style: normal;
              font-size: 90px;
              color: #ffffff;
              text-align: center;
    }
    
     body {
         background-color: black;
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
        background-attachment: scroll;
        
        
     }
     
      .top {
        display: flex;
    flex-direction: row;     
    align-items: flex-start; 
    gap: 30px;
    max-width: 900px;
    margin: 20px auto;       
}
     
     #music-player {
                  border: 3px solid 	#ffffff;
           background-color: 	#000000;
           padding: 20px;
           width: 250px;
           box-sizing: border-box;
           height: 200px;
           display: flex;
           flex-direction: column;
           overflow: hidden;
           flex-shrink: 0;
            margin: 15px 0 0 0;        
            position: absolute;
            left: 40px;
            top: 240px;
            
     }
     
     

     .welcome {
          border: 3px solid 	#ffffff;
           background-color: 	#000000;
           padding: 20px;
           margin: 20px auto;
           max-width: 600px;
           width: 100%;
           box-sizing: border-box;
           height: 200px;
           display: flex;
           flex-direction: column;
           flex-grow: 1;
           overflow: hidden;
           position: relative;
     }
     
     .welcome::before {
      content: ""; 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 35px; 
      border-bottom: 3px solid #ffffff;
      box-sizing: border-box;
}

.welcome::after {
      content: "—  ✕"; 
      position: absolute;
      top: 1px;
      right: 6px; 
      font-family: monospace; 
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 10px; 
      cursor: pointer;
       z-index: 4;
}
     
     .welcome h2 {
              font-family: 'Jersey 20', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #ffffff;
            font-size: 75px;
            text-align: center;
            line-height: 1.3;
            margin: auto 0 ;
            transform: translateY(10px);
            width: 100%;
            z-index: 1;
     }
     
     
     
      #music-player h2 { 
              font-family: 'Jersey 20', sans-serif;
              font-weight: 400;
              font-style: normal;
              color: #ffffff;
              border-bottom: 3px solid #ffffff;
              width: calc(100% + 40px);
              text-align: left;
              margin: -20px -20px 20px -20px; 
              font-size: 20px;
              padding: 10px 15px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
     }
     
     #music-player h2::after {
      content: "—  ✕"; 
      position: absolute;
      right: 35px; 
      font-family: monospace; 
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 10px; 
      cursor: pointer;
}
    
    #song-title {
              font-family: 'Jersey 20', sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: center; 
            color: #ffffff;
            font-size: 15px;
            line-height: 1.3;
            margin-bottom: 0;
            transform: translateY(-20px);
     }
     
     .retro-btn {
    background: #000000;
    color: #ffffff;
    border: 2px solid #ffffff; 
    font-family: monospace; 
    font-size: 18px; 
    padding: 5px 0;
    cursor: pointer;
    display: block;
    flex: 1; 
    text-align: center;
    
    user-select: none;
    -webkit-user-select: none;
}

     .player-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
     }
     
     .button-row {
    display: flex;
    justify-content: space-between; 
    gap: 10px;
     
     }

     .player-controls button {
        background: #000000;
    color: #ffffff;
    border: 2px solid #ffffff; 
    outline: none;             
    border-radius: 0;          
    -webkit-appearance: none;  
    -moz-appearance: none;
    appearance: none;          
    font-size: 18px; 
    padding: 5px;
    cursor: pointer;
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
      }

      .player-controls button:hover {
    background: #ffffff;
    color: #000000;
     }
     
     .player-controls input[type="range"] {
    color: #ffffff; 
    background: #000000;
    border: 1px solid #ffffff;
    height: 6px;
    outline: none;
    width: 100%;
}
     #about {
           border: 3px solid 	#ffffff;
           background-color: 	#000000;
           padding: 20px;
           margin: 20px auto;
           max-width: 600px;
           box-sizing: border-box;
           height: 200px;
           display: flex;
           flex-direction: column;
           overflow: hidden;
     }
     
     
     #about h2, #about h3, #about p {
           margin: 0;                    
           font-family: 'Jersey 20', sans-serif;
           font-weight: 400;
           font-style: normal;
           color: #ffffff;
           width: 100%;                 
      }
      
     #about h2 { 
              font-family: 'Jersey 20', sans-serif;
              font-weight: 400;
              font-style: normal;
              color: #ffffff;
              border-bottom: 3px solid #ffffff;
              width: calc(100% + 40px);
              text-align: left;
              margin: -20px -20px 20px -20px; 
              font-size: 20px;
              padding: 10px 15px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
     }
     
     #about h2::after {
      content: "—  ✕"; 
      position: absolute;
      right: 35px; 
      font-family: monospace; 
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 10px; 
      cursor: pointer;
}
     
    #about p { 
            font-family: 'Jersey 20', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #ffffff;
            font-size: 14px;
            line-height: 1.3;
     }
    
    #about h3 {
             font-family: 'Jersey 20', sans-serif;
             font-weight: 400;
             font-style: normal;
             color: #ffffff;
             font-size: 22px;
             line-height: 1.3;
             margin-bottom: 8px;
             text-align: center;
     }
     
     #projects {
            border: 3px solid 	#ffffff;
           background-color: 	#000000;
           padding: 20px;
           margin: 20px auto;
           max-width: 600px;
           box-sizing: border-box;
           height: 200px;
           display: flex;
           flex-direction: column;
           overflow: hidden;
     }
      
      #projects h2, #projects p {
           margin: 0;                    
           font-family: 'Jersey 20', sans-serif;
           font-weight: 400;
           font-style: normal;
           color: #ffffff;             
      }
     
     #projects h2 { 
              font-family: 'Jersey 20', sans-serif;
              font-weight: 400;
              font-style: normal;
              color: #ffffff;
              border-bottom: 3px solid #ffffff;
              width: calc(100% + 40px);
              text-align: left;
              margin: -20px -20px 0 -20px; 
              font-size: 20px;
              padding: 10px 15px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
     }
     
     #projects h2::after {
      content: "—  ✕"; 
      position: absolute;
      right: 35px; 
      font-family: monospace; 
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 10px; 
      cursor: pointer;
}

     #projects p { 
              font-family: 'Jersey 20', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #ffffff;
            font-size: 14px;
            line-height: 1.3;
            text-align: center;
            margin: auto 0;
     }
     
     #gallery {
          border: 3px solid 	#ffffff;
           background-color: 	#000000;
           padding: 20px;
           margin: 20px auto;
           max-width: 600px;
           box-sizing: border-box;
           height: 200px;
           display: flex;
           flex-direction: column;
           overflow: hidden;
     }
     
     #gallery h2, #gallery p {
           margin: 0;                    
           font-family: 'Jersey 20', sans-serif;
           font-weight: 400;
           font-style: normal;
           color: #ffffff;             
      }
     
     #gallery h2 { 
              font-family: 'Jersey 20', sans-serif;
              font-weight: 400;
              font-style: normal;
              color: #ffffff;
              border-bottom: 3px solid #ffffff;
              width: calc(100% + 40px);
              text-align: left;
              margin: -20px -20px 0 -20px; 
              font-size: 20px;
              padding: 10px 15px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
     }
     
     #gallery h2::after {
      content: "—  ✕"; 
      position: absolute;
      right: 35px; 
      font-family: monospace; 
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 10px; 
      cursor: pointer;
}
     
     #gallery p { 
             font-family: 'Jersey 20', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #ffffff;
            font-size: 14px;
            line-height: 1.3;
            text-align: center;
            margin: auto 0;
     }
     
     #favs {
           border: 3px solid 	#ffffff;
           background-color: 	#000000;
           padding: 20px;
           margin: 20px auto;
           max-width: 600px;
           box-sizing: border-box;
           height: 400px;
           display: flex;
           flex-direction: column;
           overflow: hidden;
     }
     
          #favs h2, #favs h3, #favs p {
           margin: 0;                    
           font-family: 'Jersey 20', sans-serif;
           font-weight: 400;
           font-style: normal;
           color: #ffffff;
           width: 100%;                 
      }
     
     #favs h2 { 
              font-family: 'Jersey 20', sans-serif;
              font-weight: 400;
              font-style: normal;
              color: #ffffff;
              border-bottom: 3px solid #ffffff;
              width: calc(100% + 40px);
              text-align: left;
              margin: -20px -20px 20px -20px; 
              font-size: 20px;
              padding: 10px 15px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
     }
     
     #favs h2::after {
      content: "—  ✕"; 
      position: absolute;
      right: 35px; 
      font-family: monospace; 
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 10px; 
      cursor: pointer;
}
     
     #favs p { 
              font-family: 'Jersey 20', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #ffffff;
            font-size: 14px;
            line-height: 1.3;
            text-align: center;
     }
     
     #favs h3 { 
              font-family: 'Jersey 20', sans-serif;
             font-weight: 400;
             font-style: normal;
             color: #ffffff;
             font-size: 22px;
             line-height: 1.3;
             margin-bottom: 8px;
             text-align: center;
     }
    
    .hvr-skew {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  transform-origin: center; 
}

.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

    .scrolling-boys {
               overflow-y: auto;
   
    }
      
    .scroll-songs {
          display: flex;
          overflow: auto;
          overflow-y: hidden;
          gap: 15px;
          white-space: nowrap;
    }
     

    
    .scroll-songs img {
                height: 150px;
                width: auto;
                flex-shrink: 0;
    }
    
     .scroll-games {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          gap: 15px;
          white-space: nowrap;
    }
    
    .scroll-games img {
                height: 150px;
                width: auto;
                flex-shrink: 0;
    }
    
      .scroll-characters {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          gap: 15px;
          white-space: nowrap;
    }
    
    .scroll-characters img {
                height: 150px;
                width: auto;
                flex-shrink: 0;
    }
    
          .scroll-shows {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          gap: 15px;
          white-space: nowrap;
    }
    
    .scroll-shows img {
                height: 150px;
                width: auto;
                flex-shrink: 0;
    }