:root {
 --purple: #8f45f9;
 --purple-dark: #653e8b;
 
 --dark: #000000;
 --black: #000000;
 
 --gray: #292929;
 --gray-dark: #171616;
 --gray-clear: #b8b7b7;
 --white-gray: #d6d6d6;
 
 --white: #ffffff;
 --white-hover: #efefef;
 --white-toggle: #f5f5f5;

 --controls-purple: #7C5E99;
 --controls-purple-dark: #4a385c;

 --purple-popup: #7c5e99;
 --purple-dark-popup: #4a385c;
 --content-purple-popup: #8568a3;
 --menu: #7c5e99e6;
}

*{
 margin: 0;
 padding: 0;
 font-family: sans-serif ;
 box-sizing: border-box;
}

body{
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center; 
 align-items: center;
 background: var(--gray);
}

/* start header */
header{
 position: absolute;
 top: 20px;
}

header label{
 padding:10px 25px ;
 cursor: pointer;
 outline: none;
 border: none;
 border-radius: 5px;
 background-color: rgb(218, 124, 124);
 color: rgb(219, 213, 213);
 font-size: 15px;
}

header input{
 display: none;
}

header input:hover{
 background-color: rgb(202, 112, 112);
}

/* start main */
main{
 width: 100%;
 height: 100%;
}

.player{
 width: 100%;
 height: 100%;
 display: flex;
 position: relative;
 overflow: hidden;
 background-color: var(--dark);
}

.player video{
 width: 100%;
}

.player .controls{
 display: flex;
 position: absolute;
 bottom: 0;
 background: var(--controls-purple-dark);
 width: 100%;
 height: 45px;
 align-items: center;
 transform: translateY(50px);
 transition: transform 0.3s;
}

.player:hover .controls{
 transform: translateY(0px);
}

.controls .btns{
 display: flex;
}

/* play and puase active */
.controls .play-pause{
 background: none;
 border: none;
 cursor: pointer;
 outline: none;
}

.play-pause svg{
 width: 35px;
 height: 35px;
}

.play-pause .pause{
 display: inline;
}

.play-pause.active .pause{
 display: none;
}

.play-pause .play{
 display: none;
}

.play-pause.active .play{
 display: inline;
}

/* next video */
.btns .next-video {
 cursor: pointer;
 margin-left: 15px;
}

.btns .next-video svg{
 position: relative;
 top: 7px;
 width: 22px;
 width: 22px;
}

/* audio btns */
.btns .audio-stute{
 cursor: pointer;
 margin-left: 17px;
}
.btns .audio-stute svg{
 position: relative;
 top: 6px;
 width: 25px;
}

.audio-stute .full-audio{
 display: inline;
}

.audio-stute .muffled-audio{
 display: none;
}

.audio-stute.active .full-audio{
 display: none;
}

.audio-stute.active .muffled-audio{
 display: inline;
}

/* range control voice */
.btns .audio-ratio{
 position: relative;
 top:8px;
 left: 20%;
 width: 0;
 transition:width 0.7s ease-in-out;
 overflow: hidden
}

.btns:hover {
 left: 20%;
}

.controls:hover .btns .audio-ratio{
 width: 100%;
}

.audio-ratio.active{
 display: none;
}

.audio-ratio input{
 -webkit-appearance: none;
 outline: none;
 border: none;
 background: #fff;
 width: 90px;
 height: 5px;
 cursor: pointer;
}

.audio-ratio input::-webkit-slider-thumb{
 -webkit-appearance: none;
 background: #fff;
 height: 15px;
 width: 15px;
 border-radius: 50%;
 user-select: none;
}

/* btns right*/
.controls .btns-right{
 position: absolute;
 display: flex;
 right: 0px;
 padding-inline-end: 5px;
 height: 100%;
 align-items: center;
}

.btns-right div{
 margin-right: 15px;
 cursor: pointer;
}

.btns-right .setting svg{
 transform: rotate(0deg);
 transition: transform  700ms;
}
.btns-right .setting svg:hover{
 transform: rotate(60deg);
}

/* screen display */
.v-zoom .on{
 display: inline;
}

.v-zoom .off{
 display: none;
}

.v-zoom.active .on{
 display: none;
}

.v-zoom.active .off{
 display: inline;
}

/* video progress */
.controls .v-progress{
 background-color: var(--controls-purple);
 width: 100%;
 height: 5px;
 position: absolute;
 top: -5px;
 display: flex;
 cursor: pointer;
}

.v-progress .progress{
 background-color: var(--white);
 width: 0%;
 height: 5px;
}



/* thime show the video */
.controls .times-video {
 font-size: 12px;
 margin-left: 20%;
 font-weight: 300;
 display: flex;
 color: #fff;
}

.times-video span{
 display: flex;
}

.times-video .marg{
 margin-left: 20%;
 margin-right: 20%;
}

.times-video .marg{
 margin-left: 20%;
 margin-right: 20%;
}

/* overlay for if click in inside video pause or play */
.overlay{
 width: 100%;
 height: 100%;
 position: absolute;
 background-color: none;
 cursor: pointer;
}

/* Menu */
.pasta {
 width: 460px;
 height: 118%;
 background: var(--menu);
 margin-left: 69.70%;
 display: none;
}

.pasta img {
 width: 170px;
 height: 100px;
 display: block;
 margin-top: 48px;
 margin-left: 7%;
 border: 4px solid rgb(218, 124, 124);
 cursor: pointer;
}

.pasta a {
 display: flex;
 color: var(--white);
 text-decoration: none;
 text-align: justify;
}

.modulo {
 width: 460px;
 height: 74px;
 color: var(--white);
 background: var(--gray-dark);
 font-family: 'Poppins';
 font-size: 25px;
 cursor: pointer;
}

h3 {
 margin-top: 80px;
 margin-left: 10px;
}

@media(max-width: 0%) {
    .pasta {
        width: 460px;
        height: 118%;
        background: var(--menu);
        margin-left: 69.70%;
        display: block;
       }

    .modulo {
        width: 460px;
        height: 74px;
        color: var(--white);
        background: var(--gray-dark);
        font-family: 'Poppins';
        font-size: 25px;
        cursor: pointer;
       }

    .menu {
        width: 460px;
        height: 118%;
        background: var(--menu);
        margin-left: 69.70%;
        display: block;
       }
}