/* main */
*{
    padding:0;
    margin:0;
    overflow:hidden; 
}
.body{
    width:100%;height: 100vh; 
    display:flex;
}

/* nav */
.nav{
    width:20%; height:100vh;
    background: #333333;
    overflow-y:auto; /* border-top-left-radius:80px; */
}.lesson{
    width:100%; margin-top:10px; 
}
.btn{ 
    margin-top:5px;margin-bottom:5px;;
    padding:2px;
    width:100%;
    height:35px;
    text-decoration: none;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    cursor:pointer; display: flex;
    transition: 0.4s ease-in-out;  border-bottom: 1px solid black;
}.name{ 
    margin-left:0px;
    transition: 0.4s ease-in-out; 
}.btn:hover{
    box-shadow: 0px 7px 10px  rgba(0, 0, 0, 0.5);
}.sublesson .bx{
    margin-left:65px;
}.sublesson .subname{
    font-size: 1.3rem;padding:5px; color: hsl(0, 0%, 67%);
}.bx{
    margin-left:15px;
}
/* display */
.display{
    width:80%;height:100vh;
}.board{
    width:98%;height:80%; position:sticky;
    margin-top:6%; margin-left: 1%; margin-right:1%; display:flex; flex-direction: column;
    justify-content: center;align-items: center; background:#2e2e2e;
    border:1px solid grey; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); 
}.imge{
    width: 70vw;
    margin:0;
    display: flex;
    flex-direction: column; align-items: center; 
    justify-content: center; 
}.iimge{
    margin:0;margin-left:50px;
}.IMG{
    overflow-y:visible;
}.icon{
    margin:0;
    padding:0;
    margin-left:10px;margin-right:3px;
    margin-bottom:5px;;
}.popup{
    position:fixed;
    top:0;left:0;
    background:rgba(0,0,0,0.9);
    width:100%;height:100%;
    z-index:100;overflow:auto; display:none;
  }
  .popup .close{
    position: absolute;top:0;right:10px;
    font-size: 40px;font-weight: bold;color:#fff;cursor:pointer;background:none;
    z-index: 100;
  }.popup .IImg{
    position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
    width:750px;border-radius: 5px;object-fit: cover; display:flex; flex-direction: column;
  }

 
@media screen and (max-width:480px){
    .body{
        background: #333333;
        width:auto; overflow:hidden;
        height:100vh; flex-direction: column-reverse;
    }.nav{
        height: 150%;width:auto; overflow: scroll; margin-bottom: 0; flex-wrap: nowrap;
    }.display{
        height:0;width:0;display:none; 
    }.popup{
        display:flex; flex-direction: column; flex-wrap: nowrap; right:0;left:0;
    }.popup .close{
        left:0; top:0;
    }
    .popup .IImg{
        transform:scale(1); display:flex; left:0%;top:5%;right:5%;bottom:0%; flex-wrap: nowrap;
        height:200%; overflow-y:scroll;
    }.popup .Img{
        transform:scale(1);margin:0;
    }
} 
/* extras */
.hidden{
    display:none;
}
.sublesson .selected{
    color: #fff;
}
::-webkit-scrollbar {
    width: 10px;
    height: 4px;
  }::-webkit-scrollbar-track {
    background:rgba(53, 53, 53, 0.9);
  }::-webkit-scrollbar-thumb {
    background: #555555;
  }