*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: white transparent;
}

@keyframes changeBg {
  0% {
    --top: #c953df;
    --bottom: #b6c4d1;
  }

  12.5% {
    --top: #8ccfea;
    --bottom: #8191a8;
  }

  25% {
    --top: #85c2ef;
    --bottom: #caada7;
  }

  37.5% {
    --top: #60de97;
    --bottom: #4a5159;
  }

  50% {
    --top: #fdce42;
    --bottom: #e4cb93;
  }

  62.5% {
    --top: #ab74dc;
    --bottom: #cbbdd7;
  }

  75% {
    --top: #c0b3ba;
    --bottom: #b1c3c7;
  }

  87.5% {
    --top: #eba35b;
    --bottom: #aa2425;
  }

  100% {
    --top: #c953df;
    --bottom: #b6c4d1;
  }
}

body {
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  animation: changeBg 16s steps(8) infinite both;
  animation-delay: 1s;
  background-image: linear-gradient(to bottom,
      var(--top),
      var(--bottom));
}

.iphone {
  width: 280px;
  height: 580px;
  background-size: contain;
  background-image: url('assets/iphone-15.png');
  position: relative;
  background-repeat: no-repeat;

  &:hover {
    &::before {
      filter: contrast(150%);
    }
  }


  &::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: red;
    z-index: -1;
    border-radius: 40px;
    transform: scale(.97);
    background-image: url('assets/spritesheet.avif');
    width: calc(2240px / 8);
    height: 100%;
    transition: filter .5s ease;
    animation: mover 16s steps(8) infinite;


  }

  @media (width <= 1000px) and (orientation: landscape) {
    transform: rotate(90deg) scale(.7);
  }
}

@keyframes mover {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -2240px 0;
  }
}