svg {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

body {
  min-height: 500vh;
}

svg {
  position: fixed;
  top: 9%;
  right: 5%;
  margin-top: -50px;
  margin-left: -50px;

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

body {
  min-height: 500vh;
  text-decoration: none;

}
html {
  scroll-behavior: smooth;
  text-decoration: none !important;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  animation: fadeIn 2s ease-in;

}
a {
  transition: all .4s ease;
}

a:link{
  text-decoration: none!important;
  color: #ffffff;
}
a:hover{
  -moz-transition: all .43s ease;
  -o-transition: all .43s ease;
  -webkit-transition: all .43s ease;
  transition: all .43s ease;
  color: #5b5b5b;
  transform: scale(1.6);
}
p {
  position: relative;
  right:80px;
  margin-top:10%;
  width: 150%;
  height:500px;

}

p {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}



@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
html,body {
  width: 100%;
  height: 100%;
  overflow: hidden;

}

.colorChange{
  transition: background-color 0.3s ease-in-out;

}
#block{
  background-color:black;
  width:100px;
  height:100px;
  margin-top:1300px;
  display:inline-block;
}
body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#content.slide-right {
  transform: translateX(-100%);
}


.scroll-box-container {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 50%; /* Adjust width as needed */
  overflow-y: auto;
  border-radius: 0px; /* Border radius */
  /**background: white;*/

}

.scroll-box {
  background-attachment: fixed;
  height: 100%;
  margin: 50px; /* 50px margin on all sides */
  filter: blur(0px);
  /*background: inherit;*/

}



.side-box-container {
  position: fixed;
  top: 0;
  right: -400px; /* Initially outside the viewport */
  width: 300px;
  height: 100%;
  background-color: #fff;
  transition: right 0.3s ease; /* Smooth sliding transition */
}

.side-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

#content.slide-right {
  transform: translateX(-100%);
}




@keyframes fadeIn {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}

.boxbox {
  border-radius: 5px;
  background: white;
  height: auto;
  width: auto;
  padding: 50px;
  margin-bottom: 20px;
}
.boxTitle {
  font-size: 500%;
}



.tiny5-regular {
font-family: "Tiny5", sans-serif;
font-weight: 400;
font-style: normal;
}

.grape-nuts-regular {
font-family: "Grape Nuts", cursive;
font-weight: 400;
font-style: normal;
}



img {

  -webkit-filter: drop-shadow(0px 10px 15px #000000);
     filter: drop-shadow(0px 10px 15px #000000); 
}
img:hover {
  animation: shadow 5s infinite alternate; 
  margin: 0;
}

@keyframes shadow {
  0% {
    opacity: 100%;

    -webkit-filter: drop-shadow(0px 10px 15px #ff0000);
     filter: drop-shadow(0px 10px 15px #ff0000); 
  }

  15% {
    opacity: 100%;
    -webkit-filter: drop-shadow(0px 10px 15px #ffb700);
     filter: drop-shadow(0px 10px 15px #ffb700);
  }

  30% {
    opacity: 100%;
    -webkit-filter: drop-shadow(0px 10px 15px #b3ff00);
     filter: drop-shadow(0px 10px 15px #b3ff00);
  }

  45% {
    opacity: 100%;
    -webkit-filter: drop-shadow(0px 10px 15px #00b312);
     filter: drop-shadow(0px 10px 15px #00b312);
  }

  60% {
    opacity: 100%;
    -webkit-filter: drop-shadow(0px 10px 15px #0062b3);
     filter: drop-shadow(0px 10px 15px #0062b3);
  }

  75% {
    opacity: 100%;
    -webkit-filter: drop-shadow(0px 10px 15px #5f00b3);
     filter: drop-shadow(0px 10px 15px #5f00b3);
  }

  90% {
    opacity: 100%;
    -webkit-filter: drop-shadow(0px 10px 15px #db51c2);
     filter: drop-shadow(0px 10px 15px #db51c2);
  }
}