/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  overflow: hidden; /*stops page from scroling*/
  min-height: 100vh;
  display: grid;
  font-family: Arial;
  justify-items: center;
  background-color: black;
  color: white;
  background-image: url('wsbg.png');
  background-repeat: repeat;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*--------------------------- here begins the left side text bar----------------------------*/

.vertical-container {
      /* Rotates text block 90 degrees vertically */
      writing-mode: vertical-rl; 
      /* Optional: Turn upside down to read top-to-bottom or bottom-to-top */
      text-align: center;
      transform: rotate(180deg);
      position: fixed;
      left: 280px;
      bottom: 40px;
    }

.rgb-text {
      font-family: Arial;
      font-size: 5rem;
      font-weight: 900;
      transform: scale(2, 1.2);
      text-transform: uppercase;
      letter-spacing: -5px;
      position: relative;
      display: inline-block;
      line-height: 60px;
      color: #ffffff;
      cursor: pointer;
    }

    /* Duplicate layers created dynamically via CSS */
    .rgb-text::before,
    .rgb-text::after {
      content: attr(data-text); /* Pulls text directly from HTML attribute */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      transition: transform 0.5s cubic-bezier(0.1, 0.1, 0.1, 2);
    }

    /* RED CHANNEL LAYER */
    .rgb-text::before {
      color: #ff0055;
      z-index: -1;
      /* Offset horizontally and vertically for a misregistered print effect */
      transform: translate(-0px, 5px);
      mix-blend-mode: screen;
      opacity: 0.85;
    }

    /* CYAN CHANNEL LAYER */
    .rgb-text::after {
      color: #00f0ff;
      z-index: -2;
      transform: translate(0px, -5px);
      mix-blend-mode: screen;
      opacity: 0.85;
    }

    /*3. HOVER EXAGGERATION*/
    .rgb-text:hover::before {
      transform: translate(-3px, 8px); /* Glitch further apart on hover */
      color: #ff007f;
    }

    .rgb-text:hover::after {
      transform: translate(3px, -8px);
      color: #ccff00; /* Acid green shift */
    }

/* ------------------ here Ends the left side text bar* ----------------------*/

.drunkdriving {
  position: absolute;
  top: 100px;
  right: 100px;
}

.linkback-box {
  align-content: center;
  border: 3px solid red;
  display: flex;
  flex-direction: column; /* Stacks the items vertically */
  align-items: center;    /* Centers all items horizontally */
  gap: 0.5rem;
  padding: 5px;
}

.linkback-box-title {
  border: 1px solid red; 
  background-color: red;
  padding: 0.5rem;  
  color: white;
}

.main-container {
  width: 100%;
  border: 3px solid;
  border-color: #0EDAE7;
  background-color: #000000;
  max-width: 800px;
  max-height: 800px;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex; /* Forces child elements to align side-by-side */
  justify-content: space-between; /* Pushes one to the left, one to the right */
  align-items: flex-start; /* Aligns the tops of both boxes perfectly */
  gap: 1rem; 
}

.main-box {
  overflow: scroll;
  border: 2px solid; 
  border-color: #D90048;
  padding: 1rem;         
  width: 70%;            
  height: 95%;
  margin-left: auto;
  text-align: center;
}

.self-container {
  display: flex;
  flex-direction: row;
  max-height: 350px;
}

.about-self-title {
  border: 1px solid; 
  background-color: #0EDAE7;
  padding: 1rem;  
  color: black;
}

.about-self {
  border: 1px solid;
  border-color: #0EDAE7;
  padding: 10px;         
  width: 140%;
}

.about-self2 img {
  height: 100%;
  width: 90%;
}

.little-details{
    border: 0px solid red; 
}

.games-master {
  border: 1px solid; 
  border-color: #0EDAE7;
  padding: 1rem;
}

.games-container{
  display: flex;
  flex-direction: column; /* Stacks children vertically top-to-bottom */
  padding: 5px;
  gap: 0.5rem;
}

.games-played-title {
  border: 1px solid; 
  background-color: #0EDAE7;
  padding: 5px;  
  color: black;
}
  
.games-played {
  border: 1px solid red; 
  padding: 1rem;         
  height: 130px;
}


.movies-master {
  border: 1px solid; 
  border-color: #B0ED36;
  padding: 1rem;
}

.movies-watched-container{
  min-height: 150px;
  padding: 5px;
  gap: 0.5rem;
}

.movies-watched-title {
  border: 1px solid; 
  background-color: #B0ED36;
  padding: 5px;  
  color: black;
}

.movies-watched {
  padding: 1rem;
  height: 130px;
  border: 1px solid; 
  border-color: #B0ED36;
}



.left-box {
  padding: 1rem;         /* Space inside the red border */
  width: 20%;            /* Adjust width as needed */
  height:95%;
  margin-right: auto;
  display: flex;
  flex-direction: column; /* Stacks children vertically top-to-bottom */
  gap: 1rem;              /* Creates a clean gap between each stacked item */
  text-decoration: none;
  border: 2px solid;
  border-color: #B0ED36;
}

a {
  text-decoration: none;
  color: #ffffff; /* Sets text to white so it's visible on your black background */
}

.image-icon {
  border: 5px solid red; 
  padding: 1rem; 
  width: 77%;            
  height: 10%;
}

.other-pages {
  border: 1px solid red; 
  padding: 1rem;         
  width: 77%;
  height: 10%;
}


.updates {
  border: 1px solid red; 
  padding: 1rem;         
  width: 77%;
  height: 10%;
}

.four-boys {
  width: 100%;          /* Controls how wide the image area can be */
  max-width: 450px;     /* Set this to whatever size you actually want the image to be */
  margin: 0 auto;       /* Horizontally centers the box inside .main-box */
}

.four-boys img {
  max-width: 100%;
  height: auto;
  display: block
}

.slime-seperator img {
  height: 20%;
  width: 100%;
}


.scroll-container {
  width: 100%;
  overflow: hidden;
}

/* Track holding both image groups side-by-side */
.scroll-track {
  display: flex;
  width: max-content; /* Shrinkwraps tightly around all images in a row */
  animation: scroll-games 30s linear infinite; /* Run infinitely over 12 seconds */
}

/* Pause the animation when the user hovers anywhere over the container */
.scroll-container:hover .scroll-track {
  animation-play-state: paused;
  cursor: pointer;
}

/* Styles for the stamp groups and image sizing */
.ps1-group {
  display: flex;
  gap: 10px;            /* Space between each stamp */
  padding-right: 25px;  /* Matches gap so spacing stays consistent between sets */
  flex-shrink: 0;
}

.ps1-group img {
  width: 130px;
  height: 130px;
  object-fit: cover;
}

/* Keyframe movement: shifts left by 50% (the width of 1 stamp group) */
@keyframes scroll-games {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.scroll-track2 {
  display: flex;
  width: max-content; /* Shrinkwraps tightly around all images in a row */
  animation: scroll-games2 40s linear infinite; /* Run infinitely over 12 seconds */
}

/* Pause the animation when the user hovers anywhere over the container */
.scroll-container:hover .scroll-track2 {
  animation-play-state: paused;
  cursor: pointer;
}

.ps2-group {
  display: flex;
  gap: 10px;            /* Space between each stamp */
  padding-right: 25px;  /* Matches gap so spacing stays consistent between sets */
  flex-shrink: 0;
}

.ps2-group img {
  width: 130px;
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Keyframe movement: shifts left by 50% (the width of 1 stamp group) */
@keyframes scroll-games2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}