* {

    box-sizing: border-box;

    margin: 0 0 0 0;

    padding: 0 0 0 0;

}
  
body {      
   
    width: 100vw;
    
    height: 100vh;   

}

.container{
    display: flex;

    flex-direction: column;

}

.controls-container {
    position: absolute;   
}

@media screen and (min-width: 15em) {  

    .controls-container{

        width: 20%;

        top: 0;
        right: 0;      

        margin-right: 60%;

    }

}

@media screen and (min-width: 22em) {  

    .controls-container{

        width: 23%;

        top: 0;
        right: 0;      

    }

}

@media screen and (min-width: 25em) {  

    .controls-container{

        width: 20%;

        top: 0;
        right: 0;      

    }

}


@media screen and (min-width: 30em) {  

    .controls-container{
      
        width: 10%; 
        
        right: 0;

    }

}

@media screen and (min-width: 40em) {  

    .controls-container{
      
        width: 5%; 
        
        right: 0;

    }

}


@media screen and (min-width: 48em) {  

    .controls-container{
      
        width: 5%; 
        
        right: 0;

    }

}


@media screen and (min-width: 50em) {  

    .controls-container{
      
        width: 4%; 
        
        right: 0;

        margin-top: 5%;

    }

}


@media screen and (min-width: 57em) {  

    .controls-container{
      
        width: 1.5%; 
        
        right: 0;

        margin-top: 5%;

    }

}


@media screen and (min-width: 75em) {  

    .controls-container{

        position: absolute;
      
        top: 0;

        right: -55%;

        height: 5%;

        width: 20%;                    

    }

}


@media screen and (min-width: 100em) {  

    .controls-container{
      
        right: -60%;              

    }

}