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

html {
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

canvas {
  border: 1px solid black;
  max-width: 100%;
}

label > div {
  margin-bottom: 0.3rem;
}

.options-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 1rem;
}

.options-section__img,
.options-section__select {
  text-align: left;
  margin-bottom: 1rem;
}

.canvas-section {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.canvas-section__original {
  margin-bottom: 1rem;
}

#default-img {
  display: none;
}

@media (min-width: 500px) {
  .options-section {
    flex-direction: row;
  }

  .options-section__select {
    text-align: right;
  }
}

@media (min-width: 870px) {
  .canvas-section {
    flex-direction: row;
  }

  .canvas-section__original {
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}