*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
}


.face {
  height: 100dvh;
  width: 100%;
  background: linear-gradient(600deg, #222 25%, transparent 25%), linear-gradient(-600deg, #222 25%, transparent 25%),
    linear-gradient(600deg, transparent 75%, #222 25%),
    linear-gradient(-600deg, transparent 75%, #222 25%);
    background-color: transparent;
    background-size: var(--length3) var(--length4), var(--length3) var(--length4), var(--length2) var(--length1), var(--length1) var(--length2);
  animation: changeBg 2s linear infinite alternate both;
  --length1: 50px;
  --length2: 50px;
  --length3: 100px;
  --length4: 100px;
  
  @media (width <= 1000px) {
    --length1: 25px;
    --length2: 25px;
    --length3: 50px;
    --length4: 50px;
  }
}

@keyframes changeBg {
  0% {
    background-color: #00f8;
    background-size: var(--length1) var(--length2), var(--length2) var(--length1), var(--length3) var(--length4), var(--length3) var(--length4);
  }

  100% {
    background-color: transparent;
    background-size: var(--length3) var(--length4), var(--length3) var(--length4), var(--length2) var(--length1), var(--length1) var(--length2);
  }
}