$lightsTransition: 500ms;

html {
  font-size: 62.5%; // = 10px 
  box-sizing: border-box;

  & * {
    box-sizing: inherit;
  }
}

img {
  max-width: 100%;
}

html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: var(--body-background);
  font-family: Noto Sans JP, sans-serif;

  --text-color: #333;
  --button-color: var(--text-color);
  --drawing-background: hsl(44deg 21% 86%);
  --drawing-frame: hsl(44deg 21% 10%);
  --drawing-shadow: hsl(44deg 21% 36% / 50%);
  --body-background: hsl(44deg 21% 83%);

  &.body--dimmed {
    --text-color: #666;
    --button-color: var(--text-color);
    --drawing-background: hsl(44deg 21% 86%);
    --drawing-frame: hsl(44deg 10% 2%);
    --drawing-shadow: hsl(44deg 2% 40% / 50%);
    --body-background: hsl(44deg 2% 10%);
  }

  color: var(--text-color);

  transition: background-color $lightsTransition, color $lightsTransition;
}

.drawing-container {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.drawing-wrapper {
  --rotate:0turn;
  --border-width: 5px;
  width: calc(320px + var(--border-width) * 2);
  height: calc(480px + var(--border-width) * 2);
  margin-bottom: 2em;
  border: 5px solid var(--drawing-frame);
  box-shadow: 1px 0px 15px var(--drawing-shadow);
  transform: rotate(var(--rotate));
  transition: transform 500ms;
  overflow: hidden;
}

.drawing {
  background-color: var(--drawing-background);
  transform: scale(.25);
  transform-origin: left top;
}

footer {
  width: 100%;
  text-align: center;
  font-family: Noto Sans JP, sans-serif;
  padding: 0.5em;
  color: #333;

  a {
    color: var(--text-color);
  }
}

#debug {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow-y: auto;
  background: hsl(0 0% 100% / 0.25);
}

.drawing-controls {
  margin: 1em 0;
  font-size: 14px;
  width: 270px;
  display: none;

  &.drawing-controls--show {
    display: block;
  }
}

.drawing-control {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  padding-top: 2em;
  border: 0;

  legend {
    position: absolute;
    top: 0.25em;
    left: 0;
  }

  select,
  input[type="number"] {
    max-width: 100%;
    background-color: hsl(0deg 0% 100% / 25%);
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 0.25em 0.5em;
    font-family: Noto Sans JP, sans-serif;
    font-size: 12px;

    &:hover,
    &:focus {
      background: hsl(0deg 0% 100% / 55%);
      outline: 0;
    }
  }

  input[type="checkbox"] {
    background-color: hsl(0deg 0% 100% / 25%);
  }

  label {
    justify-self: end;
  }

  &__input-group {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 0.5em;
    align-items: center;
  }
}