* {box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:#ffdc49 #ff256f;
cursor:url(cursortry.gif), crosshair;
}

::selection {background-color:#ff256f;}

body{ background: rgb(255,107,157);
background: linear-gradient(180deg, rgba(255,107,157,1) 50%, rgba(249,255,100,1) 100%); 
background-attachment:fixed;
font-family:Averia Libre;}


svg text{
  font-family:'WindSong', Vivaldi, cursive;
  stroke: #ffdc49;
  font-size: 65pt;
  font-weight: 400;
  stroke-width: 1;
   fill: transparent;
  animation: animationEffect 6s linear alternate infinite;
}

@keyframes animationEffect{
  0%{
    stroke-dasharray:0 10%;
    stroke-dashoffset:20%;
   
  } 
  100%{
    stroke-dasharray: 10% 0;
    stroke-dashoffset: 50%;
  }
}

#collage {
transform:rotate(2deg);
margin:auto;
width:fit-content;
}

#collage img {max-width:100%;box-shadow:1px 3px 10px rgba(00,00,00,0.3)}

.flex {display:flex;
justify-content: center;}

.face {
    backdrop-filter: blur(15px) saturate(130%);
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid white;
padding:10px;
font-size:11pt;
line-height:1;
overflow:auto;
text-align:justify;
color:rgba(00,00,00,0.6);
}

.spiral {height:500px;
width:50%;}

ul {
  list-style: none;
  height: 100%;
  overflow: hidden;
  text-align: center;
  perspective: 900px;
color:rgba(255, 255, 255, 0.5);
text-shadow:0px 0px 5px rgba(256, 256,256,0.8);
line-height:1.5;
}

li {
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 15px;
  transform: translateY(500px);
  animation: animate 9s linear infinite;
}

@keyframes  animate {
  0% {
    transform: rotateY(90deg) translateY(505px) rotate(0deg);
  }

  100% {
    transform: rotateY(-90deg) translateY(-25px) rotate(0deg);
  }
}

li:nth-child(1) {
  animation-delay: 0.5s;

}

li:nth-child(2) {
  animation-delay: 1s;
}

li:nth-child(3) {
  animation-delay: 1.5s;

}

li:nth-child(4) {
  animation-delay: 2s;

}

li:nth-child(5) {
  animation-delay: 2.5s;

}

li:nth-child(6) {
  animation-delay: 3s;

}

li:nth-child(7) {
  animation-delay: 3.5s;

}

li:nth-child(8) {
  animation-delay: 4s;

}

li:nth-child(9) {
  animation-delay: 4.5s;
}
li:nth-child(10) {
  animation-delay: 5s;
}
li:nth-child(11) {
  animation-delay: 5.5s;
}
li:nth-child(12) {
  animation-delay: 6s;
}
li:nth-child(13) {
  animation-delay: 6.5s;
}
li:nth-child(14) {
  animation-delay: 7s;
}
li:nth-child(15) {
  animation-delay: 7.5s;
}
li:nth-child(16) {
  animation-delay: 8s;
}

li:nth-child(17) {
  animation-delay: 8.5s;
}

li:nth-child(18) {
  animation-delay: 9s;
}

.cube-container {
  perspective: 1000px;
width:40%;
display:flex;
justify-content: center;
padding-top:100px;

}
.cube {
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
  animation: rotateCube 9s infinite linear;
}

.cube:hover {animation-play-state: paused;}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
scrollbar-color:rgba(256, 256, 256,0.2) rgba(255,107,157,0.2);
}

.face p {margin:0;
margin-bottom:10px;}
.front {
  transform: translateZ(100px);
}
.back {
  transform: rotateY(180deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px) rotateZ(270deg);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px) rotateZ(270deg);
}
@keyframes rotateCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(40deg)
  }
  100% {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(40deg)
  }
}
@media only screen and (max-width: 870px) {}