@charset "UTF-8";

body{
    background-color: white;
    
}

h0 {
position: relative;
text-align: center;
color: black;
/* font-size: 140px;*/
font-size: 10vw;
font-weight: bold;
}


#animated-title {
    overflow: hidden; /* Ensures the content is not revealed until fully animated */
    border-right: 0.3vw solid black; /* The typewriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Centers the title */
    animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}


h1 {
text-decoration: underline;
text-decoration-thickness: auto;
font-size: 10vw;
}

h2{
    color: black;
    /*font-size: 35px;*/
    font-size: 2.2vw;
    font-weight: bold;
    padding-top: 3vw;
    padding-bottom: 2vw;
}

h2:hover {
    color: rgb(208, 0, 0);
}
h3{
    color: black;
     /*font-size: 35px;*/
     font-size: 2.2vw;
    font-weight: bold;
    padding-bottom: 2vw;
}
h3:hover {
    color: rgb(208, 0, 0);
}

.imageone{
    width: 100%;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

.imagetwo{
    width: 100%;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    
}

.imagethree{
    width: 100%;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

.container {
    position: sticky;
    text-align: left;
    color: white;
   /* font-size: 35px;*/
    font-size:2.1vw;
  }

.centered {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .topone {
    position: sticky;
    top: 20%;
    left: 50%;
    transform: translate(20%, -40%);
    padding-top: 20vw;

  }


.toptwo {
  position: sticky;
  top: 20%;
  left: 50%;
  transform: translate(0%, -40%);
  padding-top: 20vw;

}

.topthree {
  position: sticky;
  top: 20%;
  left: 50%;
  transform: translate(0%, -40%);
  padding-top: 20vw;

}

  .text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .columnone {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnone:hover {
    color: rgb(105, 105, 105);
}

  .columntwo {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwo:hover {
    color: rgb(105, 105, 105);
}

  .columnthree {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnthree:hover {
    color: rgb(105, 105, 105);
}
  .columnfour {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
    
  }
  .columnfour:hover {
    color: rgb(105, 105, 105);
}

  .columnfive {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnfive:hover {
    color: rgb(105, 105, 105);
}

  .columnsix {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnsix:hover {
    color: rgb(105, 105, 105);
}

  .columnseven {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnseven:hover {
    color: green;
}

  .columneight {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columneight:hover {
    color: green;
}

  .columnnine {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnnine:hover {
    color: green;
}

  .columnten {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnten:hover {
    color: green;
}

  .columneleven {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columneleven:hover {
    color: green;
}
  .columntwelve {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwelve:hover {
    color: green;
}
  .columntentwo {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntentwo:hover {
    color: green;
}
  .columneleventwo {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columneleventwo:hover {
    color: green;
}
  .columntwelvetwo {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }


  .columnthirteen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnthirteen:hover {
    color: blue;
}
  .columnfourteen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnfourteen:hover {
    color: blue;
}

  .columnfifthteen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnfifthteen:hover {
    color: blue;
}

  .columnsixteen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnsixteen:hover {
    color: blue;
}

  .columnseventeen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnseventeen:hover {
    color: blue;
}
  .columneighteen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columneighteen:hover {
    color: blue;
}
  .columnnineteen {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columnnineteen:hover {
    color: blue;
}
  .columntwenty {
    width: 30%; /* Adjust as needed */
    background-color: white; /* Adjust background color and opacity */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwenty:hover {
    color: blue;
}
  .columntwentyone {
    width: 30%; /* Adjust as needed */
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }
  .columntwentytwo {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwentytwo:hover {
    color: red;
}
  .columntwentythree {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwentythree:hover {
    color: red;
}
  .columntwentyfour {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwentyfour:hover {
    color: red;
}
  .columntwentyfive {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }
  .columntwentyfive:hover {
    color: red;
}
  .columntwentysix {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwentysix:hover {
    color: red;
}
  .columntwentyseven {
    width: 30%; /* Adjust as needed */
    background-color: white;
    padding: 1.5vw;
    border-radius: 2vw;
    color: black;
  }

  .columntwentyseven:hover {
    color: red;
}

.containertitleone {
    position: relative;
    text-align: center;
    color: black;
   /* font-size: 140px;*/
    font-size: 13vw;
    font-weight: bold;

 }

.containertitletwo {
    position: sticky;
    text-align: top;
    color: white;
    font-size: 108px;
    font-weight: bold;
    /* text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;*/

} 

.containertitlethree {
    position: relative;
    text-align: center;
    color: white;
    font-size: 108px;
    font-weight: bold;
    text-decoration: underline;
    /* text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;*/
     

}

.containertitlefour {
    position: relative;
    text-align: center;
    color: white;
    font-size: 108px;
    font-weight: bold;
    text-decoration: underline;
    /*text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;*/

}


.blackzero {
    position: sticky;
    opacity: 0%;
}

.punchone {
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
}


/* Rotate the image vertically when screen width is 480px or less */
@media (max-width: 550px) {
.punchone {
    transform: translateX(-100%) translateY(75%) rotate(90deg);
    max-width: unset;
    transform-origin: bottom right;
    width: unset; /* Adjust width to auto to handle the rotation */
    height:100vw;
}
}

.blackone {
    position: sticky;
    opacity: 0%;
}


.punchtwo{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}

/* Rotate the image vertically when screen width is 480px or less */
@media (max-width: 550px) {
  .punchtwo {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.blacktwo {
    position: sticky;
    opacity: 0%;
}
.punchthree{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}
/* Rotate the image vertically when screen width is 480px or less */
@media (max-width: 550px) {
  .punchthree {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.punchfour{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}

@media (max-width: 550px) {
  .punchfour {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.greenzero {
    position: sticky;
    opacity: 0%;
}

.greenone {
    position: sticky;
    opacity: 0%;
}

.punchfive{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
   
}
@media (max-width: 550px) {
  .punchfive {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.greentwo {
    position: sticky;
    opacity: 0%;
}
.punchsix{
    position: sticky;
    top: 0;


}

.greenthree {
    position: sticky;
    opacity: 0%;
}

.punchseven{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}
@media (max-width: 550px) {
  .punchseven {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.bluezero {
    position: sticky;
    opacity: 0%;
}

.blueone {
    position: sticky;
    opacity: 0%;
}
.puncheight{
    position: sticky;
    top: 0;
    
}
.bluetwo {
    position: sticky;
    opacity: 0%;
}
.punchnine{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}
@media (max-width: 550px) {
  .punchnine {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.bluethree {
    position: sticky;
    opacity: 0%;
}

.punchten{
    position: sticky;
    top: 0;
    background-color: white;
    
}

.redzero {
    position: sticky;
    opacity: 0%;
}

.redone {
    position: sticky;
    opacity: 0%;
}

.puncheleven{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}
@media (max-width: 550px) {
  .puncheleven {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.redtwo {
    position: sticky;
    opacity: 0%;
}

.punchtwelve{
    position: sticky;
    top: 0;
    
}

.redthree {
    position: sticky;
    opacity: 0%;
}

.punchthirteen{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}
@media (max-width: 550px) {
  .punchthirteen {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.punchfourteen{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
    
}
@media (max-width: 550px) {
  .punchfourteen {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }

.punchfifthteen{
    position: sticky;
    top: 0;
    transition: transform 0.5s ease;
    width: 100%;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
     
}
@media (max-width: 550px) {
  .punchfifthteen {
      transform: translateX(-100%) translateY(75%) rotate(90deg);
      max-width: unset;
      transform-origin: bottom right;
      width: unset; /* Adjust width to auto to handle the rotation */
      height:100vw;
  }
  }