html {
  scroll-behavior: smooth;
}

#meirl {
  border: 5px solid black;
  background: url(/meta/img/sunburst.svg);
  background-size: 100% 100%;
  aspect-ratio: 8/9;
  overflow: hidden;
  background-color: #dea431;
}

#meirl a,
#meirl div {
  width: 100%;
  height: 100%;
}

#meirl img {
  position: absolute;
}

#meirl .doll {
  z-index: 1;
  top: 8%;
  left: 7%;
  width: 90%;
  animation: 5s sway infinite ease-in-out;
  transform-origin: 40% 0;
}

#meirl .cursor {
  z-index: 2;
  width: 15%;
  top: 3%;
  left: 37%;
}

#container {
  max-width: 300px;
  padding: 1rem;
  margin: auto;
}

h1 {
  padding: 0 0.5rem;
}

button {
  padding: 0.5rem;
}

#iyshm {
  position: static;
  color: rgba(0, 0, 0, 1);
}

#i4zyj {
  left: 673px;
  top: 72px;
  position: absolute;
  width: 39.296875px;
  height: 49.328125px;
}

#meirl a>div {
  position: relative;
  animation: 1.5s ease-out dragUp;
}

main>* {
  transform: translateY(-1.2rem);
  z-index: 3;
}

#iyshm.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

body {
  font-family: 'pixel_operator', monospace;
}

@keyframes dragUp {
  0% {
    transform: translateY(90%);
  }

  100% {
    transform: none;
  }
}

@keyframes sway {
  0% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

@font-face {
  font-family: 'pixel_operator';
  src: url('PixelOperator.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 992px) {
  #iyshm.centered {
    text-align: center;
  }
}

@media (max-width: 480px) {
  #iyshm.centered {
    text-align: center;
  }
}