style.css

body{
    background-color: aquamarine;
    width:100vw;
    height:100vh
}

#container{

    box-sizing: content-box;
display:grid;
    background-color: gray;
    width:70vw;
    height:60vh;
    overflow: hidden;
    border-radius: 20px;
}
#frame{
    display: flex;
    background-color: #cc0000;
    width:80vw;
    height:80vh;
    margin:50px auto;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
}
#title{
    display: inline;
    font-family: 'Dancing Script', cursive;
    font-size: 400%;
    margin:0;
}

#controls{
    display: flex;
    margin-top:20px;
}
.resolution{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    margin-right: 60px;
}
.colors{
    display: flex;
    flex-direction: column;
    align-items:center;
}
button,input{
    margin-right:40px;
}
button{
    border: 2px solid rgb(146, 146, 146);
    height:130%;
    border-radius: 50px;
    color:white;
    font-size: 14px;
    background-color: rgba(23, 93, 185, 0.644);
    box-shadow: 2px 2px 5px 0px #2E5151;
}

label{
    font-size: 1.3em;
    font-weight: 600;
}
#range{
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
#range:hover {
    opacity: 1; 
  }
 #range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
  }
  
  #range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
  }

  @media (max-height:800px){
    button,input{
        margin-right:20px;
    }
    button{
        border: 2px solid rgb(146, 146, 146);
        height:70%;
        border-radius: 50px;
        color:white;
        font-size: 14px;
        background-color: rgba(23, 93, 185, 0.644);
        box-shadow: 2px 2px 5px 0px #2E5151;
    }
  }
  @media(max-width:1027px){
      #range{
          width:60%
      }
  }