* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  display: flex;
  flex-flow: column;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: #9c98af;

  #mainCanvas {
    image-rendering: pixelated;
    background-color: #000;
    aspect-ratio: 160/144;
    width: 100%;
  }

  .controls {
    flex: 1  1 auto;
    background-color: #d9d9d9;
    position: relative;
    padding: 2rem;
    width: 100%;

    .cross {
      position: absolute;
      left: 2rem;
      top: 50%;
      transform: translateY(-50%);
      width: 192px;
      aspect-ratio: 1;

      button {
        position: absolute;
        height: 64px;
        aspect-ratio: 1;
        border: none;
        background-color: #222222;
        border-radius: 50%;

        &.up {
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        &.down {
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        &.left {
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        &.right {
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }

    .ab {
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
      height: 128px;
      aspect-ratio: 1;

      button {
        width: 64px;
        aspect-ratio: 1;
        border: none;
        background-color: #71011a;
        border-radius: 50%;
        font-size: 20px;
        font-weight: bold;
        color: white;
        position: absolute;

        &.a {
          top: 0;
          right: 0;
        }
        &.b {
          bottom: 0;
          left: 0;
        }
      }
    }

    .ss {
      position: absolute;
      bottom: 2rem;
      right: 50%;
      transform: translateX(50%);
      display: flex;
      gap: 1rem;

      button {
        padding: 0.5rem;
        background-color: #9c98af;
        color: #373442;
        border: none;
        border-radius: 4px;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  #mainCanvas {
    width: 100%;
    height: auto;
  }
  
}

@media screen and (min-width: 480px) {
  #mainCanvas {
    max-width: 720px;
  }
  
  .controls {
    max-width: 720px;
  }
}