@media (min-width: 1024px) {
    .joystick-panel {
        /* Style for Firefox */
        background: rgb(206, 132, 36);
        border: 10px rgba(58, 35, 9, 0.106) solid;
        display: block;
        border-radius: 36%;
        background-color: rgba(221, 75, 16, 0.22);
        transform: scale(1.5);
    }


    .joystick-thumb {
        position: relative;
        left: 0px;
        top: 0px;
        bottom: 90%;
        height: 62% ;
        border: 8px rgba(58, 35, 9, 0.651) solid;
        aspect-ratio: 1/1;
        border-radius: 46%;
        background-color: rgba(218, 162, 59, 0.26);
    }

    #joystick1 {
        left: calc(33pt) ;
        top: calc(100% - 118pt) ;
        width: 99pt ;
    }

    #joystick2 {
        left: calc(100% - 144pt) ;
        top: calc(100% - 282pt) ;
        width: 103pt ;  
    }
}

@media (orientation: landscape)
{
    .joystick-panel
     {
    position: absolute; 
    aspect-ratio: 1/1;
    background: rgb(206, 132, 36);
    border: 10px rgba(58, 35, 9, 0.106) solid;
    display: block;
    border-radius: 36%;
    background-color: rgba(221, 75, 16, 0.22);
    }

    .joystick-thumb 
    {
  position: relative;
  left: 0px;
  top: 0px;
  bottom: 90%;
  height: 62% ;
  border: 8px rgba(58, 35, 9, 0.651) solid;
  aspect-ratio: 1/1;
  border-radius: 46%;
  background-color: rgba(218, 162, 59, 0.26);
    }

    #joystick1 
    {
    left: calc(33pt) ;
    top: calc(100% - 218pt) ;
    width: 99pt ;
    }

    #joystick2
    {
    left: calc(100% - 144pt) ;
    top: calc(100% - 222pt) ;
    width: 103pt ;  
    }
}

@media (orientation: portrait)
{
    .joystick-panel {
        position: absolute; 
        aspect-ratio: 1/1;
        background: rgb(206, 132, 36);
        border: 5px rgba(36, 21, 4, 0.63) solid;
        display: block;
        border-radius: 50%;
        background-color: rgba(221, 75, 16, 0.22);
    }
    
    .joystick-thumb {
      position: relative;
      left: 0px;
      top: 0px;
      bottom: 90%;
      height: 62% ;
      border: 8px rgba(43, 17, 9, 0.747) solid;
      aspect-ratio: 1/1;
      border-radius: 50%;
      background-color: rgba(218, 162, 59, 0.26);
    }

    #joystick1 {
        left: calc(22pt) ;
        top: calc(100% - 242pt) ;
        
        width: 94pt ;
        
    }
    
    #joystick2 {
        left: calc(100% - 120pt) ;
        top: calc(100% - 242pt) ;
        width: 94pt ;
        
    }
}