/* Default Background - rgb(11, 18, 21)*/

/* Fonts --------------- */
@font-face { font-family: NexaHev; src: url("Nexa-Heavy.ttf"); }
@font-face { font-family: NexaLig; src: url("Nexa-ExtraLight.ttf"); }

html{
    background-color: rgb(11, 18, 21);
    overflow-x: hidden;
    overflow-y: auto;
    
}

#inv-sidebar{
    height: 100%;
    position: fixed;
    width: 250px;
    left: 0%;
    top: 0%;
    background-color: rgb(7, 11, 13);
    border-radius: 10px;

}

button {

    width: 250px;
    height: 30px;
    font-family: NexaLig;
    color: white;
    font-size: 15px;
    background-color: rgb(9, 14, 16);
    border-radius: 5px;
    border: transparent;
    margin-bottom: 10px;
    text-align: left;
    transition-duration: .4s;
    
}

button:hover{
    background-color: rgb(219, 155, 43);
    width: 255px;
}

#side-title{
font-family: NexaHev;
color: white;
font-size: 35px;
position: static;
top: 10px;
margin-left: 20px;
margin-bottom: 30px;

}

/* Lesson 1 ----------------------------------------------- */

/* FOR REFERENCE
#lesson-1-text-1{
    font-family: NexaLig;
    font-size: 12px;
    color: white;
    position: absolute;
    left: 25%;
    */


#lesson-1-mainbck{
    width: 1000px;
    position: absolute;
    left: 5%;
    top: 225px;
    height: 1700px; /* Keep same to lesson-1-sec height */
    flex-direction: column; 


}
#lesson-1-sec{
    width: 85%;
    position: absolute;
    left: 250px;
    top: 0px;

    background-color: rgb(11, 18, 21);
    height: 1700px;
}

#lesson-1-title{
    display: flex;
    flex-wrap: wrap;
    font-family: NexaHev;
    font-size: 40px;
    position: absolute;
    left: 5%;
    top: 50px;
    color: white;
    margin-left: 30px;
    display: flex;
}

#lesson-1-text-1-1{
    display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 12px;
    color: white;
    position: absolute;
    left: 5%;
    top: 20px;
    display: flex;
    width: 900px;

}

#lesson-1-text-1-2{
    display: flex;
    flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 13px;
    color: rgb(219, 155, 43);
    position: absolute;
    left: 5%;
    top: 55%;

}

#lesson-1-bck-1{
    background-color: rgb(7, 11, 13);
    position: relative;
    left: 0%;
    margin-bottom: 30px;
    width: 900px;
    height: 100px;
   
    border-radius: 10px;
}

#lesson-1-text-1{
     display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 12px;
    color: white;
    position: absolute;
    left: 5%;
    top: 20px;
    display: flex;
    width: 900px;
}

#lesson-1-text-2{
     display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 13px;
    color: rgb(219, 155, 43);
    position: absolute;
    left: 5%;
    top: 55px;
 
}


#lesson-1-bck-2{
    background-color: rgb(7, 11, 13);
    position: relative;
    left: 0%;
    margin-bottom: 30px;
    width: 900px;
    height: 100px;
   
    border-radius: 10px;

}

#lesson-1-text-3{
     display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 17px;
    color: white;
    position: absolute;
    left: 5%;
    top: 15px;
    width: 900px;
}
#lesson-1-img-1{
     display: flex;
     flex-wrap: wrap;
    position: absolute;
    left: 5%;
    top: 100px;
    width: 600px;
    height: 275px;
    border-radius: 10px;

}

#lesson-1-bck-3{
    background-color: rgb(7, 11, 13);
    position: relative;
    left: 0%;
    width: 1000px;
    height: 400px;
     margin-bottom: 30px;
    border-radius: 10px;
}

#lesson-1-text-4{
     display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 17px;
    color: white;
    position: absolute;
    left: 5%;
    top: 20px;
    width: 900px;
}

#lesson-1-img-2{
     display: flex;
     flex-wrap: wrap;
    position: absolute;
    left: 5%;
    top: 100px;
    width: 600px;
    height: 300px;
    border-radius: 10px;

}

#lesson-1-bck-4{
    background-color: rgb(7, 11, 13);
    position: relative;
    left: 0%;
    margin-bottom: 30px;
    border-radius: 10px;
    width: 1000px;
    height: 450px;

    
}

#lesson-1-text-5{
     display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 17px;
    color: white;
    position: absolute;
    left: 5%;
    top: 20px;
    width: 900px;
}

#lesson-1-img-3{
    display: flex;
     flex-wrap: wrap;
    position: absolute;
    left: 5%;
    top: 100px;
    width: 600px;
    height: 300px;
    border-radius: 10px;
}

#lesson-1-bck-5{
    background-color: rgb(7, 11, 13);
    position: relative;
    left: 0%;
    margin-bottom: 30px;
    width: 1000px;
    height: 450px;
    border-radius: 10px;

    
}


#lesson-1-text-6{
  display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 17px;
    color: white;
    position: absolute;
    left: 5%;
    top: 20px;
    width: 900px;
}

#lesson-1-img-4{
 display: flex;
     flex-wrap: wrap;
    position: absolute;
    left: 5%;
    top: 100px;
    width: 600px;
    height: 300px;
    border-radius: 10px;
    border: 2px solid rgb(219, 155, 43);
}

#lesson-1-bck-6{
    background-color:rgb(7, 11, 13) ;
    position: relative;
    left: 0%;
    margin-bottom: 30px;
    width: 1000px;
    height: 450px;
    border-radius: 10px;
}

#lesson-1-text-7{
    display: flex;
     flex-wrap: wrap;
    font-family: NexaLig;
    font-size: 15px;
    color: white;
    position: absolute;
    left: 5%;
    top: 20px;
    width: 900px;
}

#lesson-1-bck-7{
     background-color: rgb(7, 11, 13);
    position: relative;
    left: 0%;
    margin-bottom: 30px;
    width: 900px;
    height: 100px; 
    border-radius: 10px;

}

/* Lesson 2 ----------------------------------------------- */

#lesson-2-title{
    font-family: NexaHev;
    font-size: 40px;
    position: absolute;
    left: 25%;
    top: 10%;
    color: white;
    margin-left: 30px;
    display: flex;
}

#lesson-2-text-1{
     font-family: NexaLig;
    font-size: 15px;
    color: white;
    position: absolute;
    left: 25%;
    top: 225px;
     width: 900px;
}

#lesson-2-img-1{
    position: absolute;
    left: 25%;
    top: 325px;
    width: 600px;
    height: 375px;
    border-radius: 10px;
}

/* Lesson 3 ----------------------------------------------------- */

#lesson-3-title{
    font-family: NexaHev;
    font-size: 40px;
    position: absolute;
    left: 25%;
    top: 10%;
    color: white;
    margin-left: 30px;
    display: flex;

}