.container{
    width: 100vw;
    height: 85vh;
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "aside videos";
    background-image: linear-gradient(to left 0% 20% white );
    background-color: rgba(2, 2, 2, 0.918);
}
.video-container{
    grid-area: videos;
    border: medium solid gold;
    height: max-content;
    min-height: 100%;
    width: 100%;
}.video-container iframe{
    width: 100%;
    height: 85vh;
    aspect-ratio: 16/9;

   
}.ejercicios{
    height: max-content;
    grid-area: aside;
    background-color: rgb(61, 57, 57);
    display: flex;
    flex-direction: column;
    border: medium solid gold;


}.tittle-container{
height: max-content;
display: flex;
flex-direction: column;

}
.tittle-exercice{
    width: 100%;
    height: 40px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    border: 2px solid white;
    margin-bottom: 2px;
}.subTittle-exercice{
    width: 100%;
    height: 30px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gold;
    margin-bottom: 1px;
    border: 2px solid rgb(0, 0, 0);
    font-size: 18px;
}.tittle-container{
    display: none;
}

.container-active{
    display: flex;
}.subTittle-exercice:hover{
    background-color: rgba(7, 6, 6, 0.753);
    color: gold;
    font-weight: bolder;
}

@media screen and (max-width:800px){
    .container{
        grid-template-rows: max-content max-content;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "aside"
        "videos";
       
    }
  
   .ejercicios{
    grid-area: aside;
   }
    .video-container{
        display: flex;
        align-items: top;
        grid-area: videos;
        border: medium solid black;

    }.video-container iframe{
        height: max-content;
        aspect-ratio: 16/9;
    }

}