:root {
    --bg_1: #81b29a;
    --bd_1: #3d405b;
    --ctrl_1: #e07a5f;
    --ctrl_2: #f2cc8f;
    overflow-y: scroll;
  }
  
  #controls_container {
    height: auto;
    width: 100%;
    
    position: relative;
    border: 8px solid var(--bd_1);
    background-color: var(--bg_1);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  
    /* disable touch scrolling */
    touch-action: none;
  }
  
  #controls_container #fullscreen {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  }
  
  #main_canvas_container {
    padding: 1%;

    position: relative;
    background-color: var(--bg_1);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  
  #viewport {
    background-color: var(--bg_1);  
    display: flex;
    justify-content: space-evenly;
  }
  
  #main_canvas {
    width: 100%;
    height: 100%;

    border: 5px solid var(--bd_1);
    border-radius: 10px;
    z-index: 99;
    display: flex;
  }
  
  #controls_left, #controls_right {
    position: relative;
    background-color: var(--bg_1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #controls_left {
    justify-content: end;
  }
  
  #controls_right {
    justify-content: space-between;
  }
  
  #joystick, #fire, #fire_left {
    position: relative;
    width: 80%;
    aspect-ratio: 1 / 1;
    background: var(--ctrl_2);
    border: 5px solid var(--bd_1);
    margin: 6%;
  
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  
  #joystick, #knob {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
  
  #knob {
    position: relative;
    width: 40%;
    aspect-ratio: 1 / 1;
    background: var(--ctrl_1);
    z-index: 98;
  }
  
  #fullscreen {
    position: relative;
    width: 60%;
    aspect-ratio: 2 / 1;
    border-radius: 10px;
    background: var(--ctrl_2);
    border: 5px solid var(--bd_1);
  
    margin: 6%;
    top: 0;
  }
  
  #fire, #fire_left {
    border-radius: 10px;
  }
  
  #fire:active, #fire_left:active {
    background-color: var(--ctrl_1);  
  }
  
  /* differentiate between vertical and horizontal mobile screens
      ruleset is for horizontal adjustments 
      if width of screen is small enough
      then adjust the controls position */
  @media (max-width: 500px) {
    body {
      align-items: center;
    }
  
    #controls_container {  
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  
    #main_canvas_container {
      height: auto;/*45%;*/
      background-color: var(--bg_1);
    }
  
    /*swap the order of flex elements*/
    #controls_container {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
    }
  
    #controls_container #controls_left {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
    }
  
    #controls_container #main_canvas {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
    }
  
    #controls_container #controls_right {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
    }
  }