* {
  margin: 0;
  padding: 0;
  user-select: none;
  -moz-user-select: none;
  font-weight: bold;
  font-size: xx-large;
}

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

body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-image: url("../media/wood_texture.jpg");
}

@media (orientation: portrait) {
  body * {
    display: none;
  }

  #warning-orientation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #warning-orientation * {
    display: initial;
  }

  #warning-orientation img {
    width: 50%;
    animation: 1.5s ease-out 0s infinite rotation_device;
    margin-bottom: 10%;
  }

  #warning-orientation p {
    text-align: center;
  }

  @keyframes rotation_device {
    0% {
      transform: rotate(0deg);
    }
    80% {
      transform: rotate(90deg);
    }

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

@media (orientation: landscape) {
  #warning-orientation {
    display: none;
  }

  #pad-controller {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 25;
  }

  #pad-controller #up-button-container {
    display: flex;
    justify-content: center;
  }

  #pad-controller #left-right-buttons-container {
    display: flex;
    justify-content: space-evenly;
  }

  #pad-controller #down-button-container {
    display: flex;
    justify-content: center;
  }

  #game {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 60;
  }

  #buttons-controller {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 10vh;
    padding-bottom: 10vh;
    flex: 15;
  }

  canvas {
    max-width: 100%;
    max-height: 40vh;
    border-radius: 5%;
    border-color: black;
    border-style: solid;
  }

  #top-canvas {
    background-color: lightblue;
  }
  #bottom-canvas {
    background-color: darkgray;
  }
}

#lifesAndScore {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#soundController {
  position: absolute;
  top: 1vh;
  right: 1vw;
  width: 5vh;
  height: 5vh;
}