* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  color: white;
  text-shadow: 2px 2px 2px black;
  background-color: #a9a0ff;
  background-size: 200px;

  &.show-bg {
    background-image: url(assets/flag-japon.gif);
  }
}

.overlay {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;

  img {
    position: absolute;
  }

  .age { left: 100px; top: 100px; height: 150px; }
  .dog { right: 100px; height: 250px; }
  .tomato { left: 100px; bottom: 100px; height: 250px; }
  .celine { right: 100px; bottom: 100px; height: 200px; }

  .mute-btn {
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
    background-image: url(assets/speaker.png);
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: left;
    border-radius: 100vmax;
    width: 40px;
    height: 40px;

    &.muted {
      background-position: right;
    }

    &:hover {
      transform: scale(1.1);
    }
  }
}

.wrapper {
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;

  .emma {
    animation: rotate 5s steps(12) infinite;
    width: 120px;
  }
}

@media only screen and (max-width: 680px) {
  body { background-size: 100px; }

  .overlay {
    .age { left: 25px; top: 80px; height: 100px; }
    .dog { right: 10px; top: 10px; height: 100px; }
    .tomato { left: 10px; height: 150px; }
    .celine { right: 10px; height: 100px; }
  }

  .wrapper {
    .message-image { width: 90%; }
    .emma { width: 100px; }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}