* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  padding: 32px 16px 80px;
  background-color: #222534;
}

@property --direc {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  0% {
  }
  100% {
    --direc: 360deg;
  }
}

.box {
  --direc: 0deg;
  width: min(480px, 100%);
  min-height: min(800px, calc(100vh - 112px));
  aspect-ratio: 3 / 5;
  border-radius: 12px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(var(--direc), #5ddcff, #3c67e3 43%, #4e00c2);
}

.box:hover {
  animation: spin 4s linear infinite;
  cursor: pointer;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: inherit;
  border-radius: inherit;
  filter: blur(8px);
}

.box span {
  display: block;
  inset: 8px;
  padding: 32px;
  background-color: #191c29;
  position: absolute;
  border-radius: 8px;
  color: #ddd;
  font-size: 32px;
  font-weight: bolder;
}

@media (max-width: 640px) {
  body {
    padding: 16px 12px 72px;
  }

  .box span {
    padding: 20px;
    font-size: 24px;
  }
}