.game_container {
    width: 100%;
    height: 100%;
}

.text {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.sand {
    width: 100%;
    height: 100%;
}

:root {
    --aspect: 2/1;
  }
  
  #main_canvas_container {
    max-width: 70%;
    height: 100%;
  
    aspect-ratio: var(--aspect);
  }
  
  #viewport {
    width: 100%;
    max-height: 100%;
    
    aspect-ratio: var(--aspect);
  }
  
  #controls_left, #controls_right {
    width: 15%;
  }

  #controls_left {
    padding-top: 20%;
  }
  
  @media (max-width: 500px) {
    #controls_contrainer {
      height: 100%;
      width: 100%;
    }
  
    #main_canvas_container {
      width: 100%;
      max-width: none;
      height: 60%;
    }
  
    #viewport {
      width: 100%;
      max-height: 100%;
    }
  
    #controls_right, #controls_left {
      width: 50%;
      height: 40%;
    }
  }