body{
  height: 100svh;
  overflow-y: hidden;
}

.scroll-container {
  padding-left: 15%;
  overflow-y: auto;
  white-space: nowrap;
  display: flex;
  align-items: center; 
  height: 100vh; 
  position: sticky; 
  top: 0; 
  z-index: 2;   
}



@font-face {
  font-family: 'CustomFont';
  src: url('Font/RapidST-Bold.otf') format('woff2');
}

.scroll-text {
  font-family: 'CustomFont', 'Arial Black', Arial, sans-serif;
  font-size: 70px;
  color: yellow;
  -webkit-text-stroke: 2.5px rgb(0, 0, 0);
}

@font-face {
  font-family: 'SecondTypeface';
  src: url('Font/RapidST-BoldExtended.otf') format('woff2');
}
.highlight {
  font-family: 'SecondTypeface', sans-serif; /* Specify your second typeface here */
  font-size: 100px;
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 3px yellow;
}


/* For screens smaller than 768px */
@media only screen and (max-width: 768px) {
  .scroll-text {
     font-size: 37px;
     -webkit-text-stroke: 1px rgb(0, 0, 0);

   }
 }

 @media only screen and (max-width: 768px) {
  .highlight {
     font-size: 60px;
     -webkit-text-stroke: 2px yellow;

   }
 }

 .element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0) rotate(-90deg); /* Start rotation at -180 degrees */
  width: 50vmin;
  height: 50vmin;
  transition: transform 02s ease-in-out;
}

.element.is-on {
  transform: translate3d(-50%, -50%, 0) scale(3) rotate(0deg); /* Add desired rotation angle here */
}