*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background: linear-gradient(90deg, #808080 0%, #ffffff 50%, #808080 100%);
    background-size: 400% 400%;
    animation: gradientBG 10s ease-in-out infinite;
    width: 100%;
    cursor:not-allowed;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {   
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container img{
    width: 100%;
    max-width: 400px;
    height: auto;
}
* {
  box-sizing: border-box;
  transition: all 0.15s ease 0s;
}
:root {
  --movement: 0.85;
  --stop: 0.5;
  --duration: calc((var(--movement) * (1 / var(--stop))));
  --stagger: 0.1125;
  --perspective: 500;
  --size: 50;
  --ease: cubic-bezier(1, -0.52, 0.26, 0.89);
  --bg: #e6e6e6;
  --panel: #fff;
  --color: #0d0d0d;
  --hue: 23;
  --saturation: 100;
  --lightness: #25a7b1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --panel: #ffffff;
    --color: #000000;
  }
}
body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
.scene {
  perspective: calc(var(--perspective) * 1px);
}
.word {
  display: flex;
  transform: translate(calc(var(--size) * 0.7px), 0) rotateX(-30deg) rotateY(45deg);
  transform-style: preserve-3d;
}
.letter__wrap {
  -webkit-animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
          animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
  transform-origin: bottom center;
  transform-style: preserve-3d;
}
.letter__wrap .letter {
  -webkit-animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
          animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
}
.letter {
  color: var(--color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  height: calc(var(--size) * 1px);
  margin-right: calc(var(--size) * 0.2px);
  position: relative;
  text-transform: uppercase;
  transform-style: preserve-3d;
  width: calc(var(--size) * 1px);
}
.letter__panel {
  align-items: center;
  background: var(--panel);
  border: 5px hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%)) solid;
  display: flex;
  height: calc(var(--size) * 1px);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  width: calc(var(--size) * 1px);
}
.letter__panel:nth-of-type(1) {
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(2) {
  transform: translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(3) {
  transform: translate3d(-50%, -50%, 0) rotateX(180deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(4) {
  transform: translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(5) {
  transform: translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
@-webkit-keyframes rotate {
  0%, 30.625% {
    transform: rotateX(0deg);
  }
  33.125%, 81.625% {
    transform: rotateX(90deg);
  }
  83.125%, 100% {
    transform: rotateX(180deg);
  }
}
@keyframes rotate {
  0%, 30.625% {
    transform: rotateX(0deg);
  }
  33.125%, 81.625% {
    transform: rotateX(90deg);
  }
  83.125%, 100% {
    transform: rotateX(180deg);
  }
}
@-webkit-keyframes jump {
  0%, 50%, 100% {
    transform: scaleX(1) scaleY(1) translate(0, 0);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
  }
}
@keyframes jump {
  0%, 50%, 100% {
    transform: scaleX(1) scaleY(1) translate(0, 0);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
  }
}

@media (max-width: 800px) {
  .letter {
    font-size: 1.5rem;
    height: calc(var(--size) * 0.75px);
    width: calc(var(--size) * 0.75px);
  }
  .letter__panel {
    height: calc(var(--size) * 0.75px);
    width: calc(var(--size) * 0.75px);
  }
  .welcome-text{
    display: none;
  }
}

@media (max-width: 500px) {
  .letter {
    font-size: 1rem;
    height: calc(var(--size) * 0.5px);
    width: calc(var(--size) * 0.5px);
  }
  .letter__panel {
    height: calc(var(--size) * 0.5px);
    width: calc(var(--size) * 0.5px);
  }
    .welcome-text{
    display: none;
  }
}