:root {
  --animation-time: 2s;
  --your-height: 9vh;
  --your-aura-height: 10vh;
  --your-aura-color-1: #5CB5BB;
  --your-aura-color-2: #4AA3A9;
  --your-aura-color-3: #33708C;
  --your-aura-color-4: #244F71;
  --cuteness-color: #F0F2E5;
  --your-color: snow;
}

:root.light-theme {
  --your-aura-color-1: #ffe240;
  --your-aura-color-2: #FFD700;
  --your-aura-color-3: #FFC300;
  --your-aura-color-4: #FF8C00;
  --cuteness-color: snow;

}


/* my space start */
.your-aura {
  position: absolute;
  top: calc(var(--your-height) * -2);
  right: calc(var(--your-aura-height)* -4);
  height: calc(var(--your-aura-height)*10);
  border-radius: var(--pritam);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: translateY(100vh);
  /* initial state */
}

.you-go {
  animation: you-go-animation var(--animation-time) forwards;
}

.you-come {
  animation: you-come-animation var(--animation-time) forwards;
}


@keyframes you-go-animation {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translateY(100vh)
  }

}

@keyframes you-come-animation {
  0% {
    transform: translateY(100vh)
  }

  100% {
    transform: translate(0);
  }
}

.you {
  /*     
   height: var(--your-height);
*/
  cursor: pointer;
  width: var(--your-height);
  border-radius: var(--pritam);
  aspect-ratio: 1;
  background: var(--your-color);
  overflow: hidden;
  z-index: 3;
  position: relative;
  box-sizing: content-box;
  transform: translateZ(0);
  /* border: calc(var(--your-aura-height)) solid var(--body-color); */
}

.show-aura {
  /* animation: show-aura calc(var(--animation-time)*3) var(--animation-time) forwards; */
  animation: show-aura calc(var(--animation-time)*2) ease-out calc(var(--animation-time) + 0.5s) forwards;
}

@keyframes show-aura {

  0% {
    border: calc(var(--your-aura-height)/6) solid var(--your-aura-color-1);
    outline: calc(var(--your-aura-height)/8) solid var(--your-aura-color-2);

  }

  12% {
    border: calc(var(--your-aura-height)/4) solid var(--your-aura-color-1);
    outline: calc(var(--your-aura-height)/6) solid var(--your-aura-color-2);

  }

  25% {
    border: calc(var(--your-aura-height)/2) solid var(--your-aura-color-1);
    outline: calc(var(--your-aura-height)/4) solid var(--your-aura-color-2);

  }

  50% {
    border: var(--your-aura-height) solid var(--your-aura-color-1);
    outline: calc(var(--your-aura-height)/2) solid var(--your-aura-color-2);

  }

  75% {
    border: var(--your-aura-height) solid var(--your-aura-color-1);
    outline: calc(var(--your-aura-height)) solid var(--your-aura-color-2);
  }

  100% {
    border: var(--your-aura-height) solid var(--your-aura-color-1);
    outline: calc(var(--your-aura-height)) solid var(--your-aura-color-2);
    box-shadow: 0 0 0 calc(var(--your-aura-height) * 2) var(--your-aura-color-3),
      0 0 0 calc(var(--your-aura-height)*3) var(--your-aura-color-4);
  }
}

/* 
.you::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  border-radius: inherit;
  height: calc(var(--your-height) + var(--your-aura-height) + var(--your-aura-height));
  aspect-ratio: 1;
  background: radial-gradient(var(--your-aura-color-2), var(--your-aura-color-1));
  padding: var(--your-aura-height);
  -webkit-mask:
    linear-gradient(white 0 0) content-box,
    linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
} */

.cuteness {
  border-radius: var(--pritam);
  height: calc(var(--your-height) / 4);
  aspect-ratio: 1;
  background: var(--cuteness-color);
  position: absolute;

}

.cuteness-1 {
  height: calc(var(--your-height) / 4);
  top: calc(var(--your-height) / 4);
  left: calc(var(--your-height) / 6);
}

.cuteness-2 {
  height: calc(var(--your-height) / 6);

  top: calc(var(--your-height) / 10);
  left: calc(var(--your-height) / 2);
}

.cuteness-3 {
  height: calc(var(--your-height) / 8);

  bottom: calc(var(--your-height) / 4);
  left: calc(var(--your-height) / 2);
}


@media (min-width:480px) {
  :root {
    --your-height: calc(8vh * 1.75);
    /* your height was 8vh */
    --your-aura-height: calc(6vh * 2.5);
    /* your aura height was 6vh */
  }

  .your-aura {
    top: calc(var(--your-height) * -4);
    right: calc(var(--your-height) * -3);
  }
}

@media (min-width:700px) {
  :root {
    --your-height: calc(8vh * 2);
    /* your height was 8vh */
    --your-aura-height: calc(6vh * 3);
    /* your aura height was 6vh */
  }

  .your-aura {
    top: calc(var(--your-height) * -4);
    right: calc(var(--your-height) * -3);
  }
}

/* my space end */