body{
    background-color:midnightblue;
}
img{
  max-width:100%; 
display:block;
}

{
    box-sizing:border-box;
}

.player {display: none;}

.content{
    border-radius:30px;
    background-color:red;
    margin:auto;
    margin-top: 5.5%;
    width: 96%;
    height:75vh;
    display:flex;
    flex-direction: column;
}

.top{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
    
    width:100%;
    background-color:red;
    height:18%;
    
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
        justify-content: space-around;
/*
    padding-left: 5px;
    padding-right: 5px;
*/

}

.bottom{
    width:100%;
    height:82%;
    display:flex; 
}


.right{
    background-color:red;
    width:35%;
        display:flex;
        flex-direction: row;
}

.left{
    background-color:red;
    width:35%;
        display:flex;
        flex-direction: row;
}

.center{
    background-color:red;
    width:30%;
        display:flex;
        flex-direction: column;
}

.square-left{
    height:60px;
    width:60px;
    background-color:black;
    margin-top:20px;
    border-radius:10px;

}

.l-left{
/*    background-color: antiquewhite;*/
    width:65%;

animation: spin 5s infinite reverse linear; 
    }

@keyframes spin{
    0%{transform: rotate(0);
    }
    
    100%{transform:rotate(360deg);
    }}
.l-middle{background-color: red;width:15%; padding-bottom: 20px; }
.l-right{background-color: red;width:20%;}


.square-right{
    height:60px;
    width:60px;
    background-color:black;
    margin-top:20px;
    border-radius:10px; 
}

.square-right:hover{
    animation-name: change;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;}

.square-left:hover{
    animation-name: change;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;}

@keyframes change{
    0% {background-color:blue;}
    15% {background-color:pink;}
    25% {background-color:blueviolet;}
    35% {background-color:paleturquoise;}
    45% {background-color:yellow;}
    55% {background-color:greenyellow;}
    65% {background-color:fuchsia;}
    70% {background-color:darkorchid;}
    80% {background-color:yellow;}
    90% {background-color:lime;}
    100% {background-color:purple;}
    }

.r-right{
/*    background-color: antiquewhite;*/
    width:65%;
 animation: spin 5s infinite linear; 
    }

@keyframes spin{
    0%{transform: rotate(0);
    }
    
    100%{transform:rotate(360deg);
    }}

.r-middle{
    background-color: red;
    width:15%;
    padding-bottom: 20px;
}


.r-left{background-color: red;width:20%;
}

.adjust{display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;}

.adjust2{display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}


.tknob{ 
    position: relative;
/*padding-right: 4%;*/
/*padding-left:10px;*/
height:auto;
width:3.5%;

    animation: turn 5s infinite linear; 
    }

@keyframes turn{
    0%{transform: rotate(0);
    }
    
    100%{transform:rotate(360deg);
    }}

.Lslider{
   position: relative;
    z-index:3;
    top:180px;
    left:0;
    rotate:90deg;
    width:60%;
    height:auto;
    
    animation: move1 6s infinite alternate; 
    }

@keyframes move1{
    0%{transform: translateX(0vh);
    }
    
    100%{transform:translateX(-45vh);
    }
}

.Rslider2{
   position: relative;
    z-index:1;
    top:180px;
    left:0;
    rotate:90deg;
    width:60%;
    height:auto;
    
    animation: move2 5s infinite alternate ; 
    }

@keyframes move2{
    0%{transform: translateX(0vh);
    }
    
    100%{transform:translateX(-45vh);
    }
}
.rectangle{
    position: absolute;
    height:350px;
    width:4px;
    background-color:black;
    border-radius:5px; 

}

.C-top{
    background-color:orangered;
    height:65%;
    width:auto;
    display:flex;
    flex-direction: row;
    
    animation: code 8s infinite alternate;
}

@keyframes code{
    0% {background-color:blue;}
    15% {background-color:pink;}
    25% {background-color:blueviolet;}
    35% {background-color:paleturquoise;}
    45% {background-color:yellow;}
    55% {background-color:greenyellow;}
    65% {background-color:fuchsia;}
    70% {background-color:darkorchid;}
    80% {background-color:yellow;}
    90% {background-color:lime;}
    100% {background-color:purple;}
    }

/*
.CT-Lrectangle{background-color:deeppink;}
.CT-Lslider{background-color:mistyrose;}
.CT-Cbox{background-color:palevioletred;}
.CT-name{background-color:plum;}
.CT-knobs{background-color:mediumturquoise;}
.CT-Rrectangle{background-color:yellow;}
.CT-Rslider{background-color:palevioletred;}
*/


.C-bottom{
    background-color:red;
    width:auto;
    height:35%;
    flex-direction: row;
    }
.CB-Lsquare{
    background-color:orange;
    width:15%;
    height:80px;
    margin-right:130px;
border-radius:10px;} 

.CB-rectangle{
    position:absolute;
    width:200px;
    height:8px;
    border-radius:8px; 

    background-color:black;
    }

.CB-slider{
    position: relative;
    z-index:6;
    bottom:5px;
    left:90px;
    height:auto;
    width: 10%;

    animation: move3 9s infinite alternate ; 
    }

@keyframes move3{
    0%{transform: translateX(0vh);
    }
    
    100%{transform:translateX(-22vh);
    }
}
    

.CB-Rsquare{
    background-color:orange;
    width:15%;
    height:80px;
    margin-left: 130px;
    border-radius:10px; 

}