body{
    min-height: 100vh;
    padding: 1% 1%;
    background-color:  #2ea15a;
    text-align: center;
    font-family: Roboto, Arial, sans-serif;
}
.home{
    align-items: center;
    align-content: center;
    
}

.navAnchor{
    color: yellow;
}
.left{
   text-align: left;
}
.instruction{
    text-align: left;
    padding-left: 20%;
    padding-right: 2%;
}
a{
    text-decoration: none;
    transition-duration: 0.3s;  
    color: white;
    text-decoration: none; 
}
::-webkit-scrollbar{
    width:15px;
}
::-webkit-scrollbar-track{
    background: #d1e5ff;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient( #2ea15a, #118d4f);
    border-radius: 10px;
}

.objective0{
    background-color: #30ac63;
    margin-left: 20%;
    margin-right: 1.5%;
    text-align: left;
    padding-left: 2%;
    padding-top: 2%;
}
.side-bar{
    background: #2ea15a;
    width: 250px;
    left: -250px;
    height: 100vh;
    position: fixed;
    top: 0;
    overflow-y: auto;
    transition: 0.6s ease;
    transition-property: left;
}
header{
    background: #538a4e;
}
header img{
    width: 100px;
    margin: 15px;
    margin-left: 10px;
    margin-top: 30px;

}
.close-btn{
    position: absolute;
    color: #fff;
    font-size: 23px;
    right:0px;
    margin: 15px;
    cursor:pointer;
}
header h1{
   text-align: center;
   font-weight: 500;
   font-size: 25px;
   padding-bottom: 13px;
   font-family: sans-serif;
   letter-spacing: 2px;
}
.menu{
    width: 100%;
    margin-top: 3px;
    text-align: left;
    padding-left: 10px;
}
.menu .item {
   position: relative;
   cursor: pointer; 
}
.menu .item a{
  color:  #fff;
   font-size: 16px;
   display: block;
   padding: 3px 3px;
   /* height of side bar*/
   line-height: 30px;
}

.item i{
    margin-right: 15px;
}
.item a .dropdown{
 position: absolute;
 right:0;
 margin:20px;
 transition:0.3s ease;
}
.item .sub-menu{
    background: #3c803a;
    display: none;
    text-align: left;
    padding-left: 3%;
}
.menu-btn{
   position: absolute;
   color: black;
   font-size: 40px;
   cursor: pointer;
   margin: 25px;
}
.side-bar.active{
   left:0; 
}
.side-bar::-webkit-scrollbar{
    width: opx;
}
.item .sub-menu a{
    padding-left: 2px;
}
.rotate{
    transform: rotate(90deg);
}

.question p{
    font-size: 18px;
    /*text-align: center;*/
    color: white;
}

.drag-container{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    container-type: inline-size;

}

.draggable {
    height: 150px;
    width: 25%;
    margin: 10px;
    /*border: solid 2px black;*/
    cursor: pointer;
    background-color: #147a34;
    /* border: 2px solid rgb(7, 162, 64);*/
    text-align: center;
    border-radius: 30px;
    align-items: center;
    align-content: center;
}

.drop-container{
    display: flex;
    align-items: center;
    justify-content: center;
  /*  overflow-x: scroll; */
  overflow-wrap: break-word;
  container-type: inline-size;

}

.after-drop{
    height: 150px;
    width: 25%;
   /* width: min-content; */
   /* width: fit-content; */
    margin: 10px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    align-content: center;
  /*  overflow-x: scroll; */
   overflow-wrap: break-word;
  container-type: inline-size;
 
  aspect-ratio: 1/1;
}

.drop-target{
    height: 150px;
    width: 25%;
   /* width: min-content; */
   /* width: fit-content; */
    /*border: 2px dashed black;*/
    border: 2px solid rgb(21, 87, 6);
    margin: 10px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    align-content: center;
  /*  overflow-x: scroll; */
   overflow-wrap: break-word;
   container-type: inline-size;
   
   aspect-ratio: 1/1;
   
}

.drop-target>p{
    font-size: clamp(0.8rem, 7cqi, 2rem);
}

.drag-container>p{
    font-size: clamp(0.8rem, 7cqi, 2rem); 
}

.subset{
    font-size: 30px;
    font-weight: bold;
}

.correct{
    background-color: #04e863;
  
}
.wrong{
    background-color: #e16557;
}

/* Float window */

#floatCont{
/*background-color: #212228; */
  /*  background-image: linear-gradient(#292a30 .1em, transparent .1em),
    linear-gradient(90deg, #292a30 .1em, transparent .1em);
    */
    background-size: 4em 4em; 
    /* height: 100vh; */
}
 
#card{
    width: 200px;
    height: 210px;
    background-color: yellow;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    padding: 20px;
    padding-top: 50px;
    text-align: left;
}

#myButtonFloat{
    text-align: right;
}

/* -----------------------------------------  quiz 1.x ----------------------------  */

#dragScriptContainer{	/* BIG DIV containing HTML needed for the entire script */
    width:100%;
    margin:0 auto;
    height:400px;
    margin-top:20px;
    padding:3px;

}
#questionDiv{ /* Big div for all the questions */
    float:left;
    height:100%;
    width:60%;
   /* border:1px solid #000; */
    padding:2px;
    display: block;

}
#answerDiv{	/* Big div for all the answers */
    float:right;
    height:100%;
    width:30%;
    padding:2px;
}
#questionDiv div,#answerDiv div,#dragContent div{	/* General rules for small divs - i.e. specific questions and answers */
    width:45%;
    height:100px;
    line-height:20px;		
    float:left;
    margin-right:2px;
    margin-bottom:2px;
    text-align:center;
    background-color: white; 
    border-radius: 30px;
    align-items: center;
    align-content: center;
    padding: 2px;
}
#dragContent div{	/* Drag content div - i.e. specific answers when they are beeing dragged */
     border:1px solid #000; 
}
#answerDiv .dragDropSmallBox{	/* Small answer divs */
    border:1px solid #000;
    cursor:pointer;
    width: 100%;
}
#questionDiv .dragDropSmallBox{	/* Small answer divs */
    border:1px solid #000;
    cursor:pointer;
}
#questionDiv div div{	/* DIV after it has been dragged from right to left box */
    margin:0px;
    border:0px;
    padding:0px;
    width:100%;
}
#questionDiv .destinationBox{ /* Small empty boxes for the questions - i.e. where answers could be dragged */
    border:0px;
  background-color: rgba(255, 255, 255, 0); 
    width:45%;
    border:1px dashed #000; 
}
#questionDiv .correctAnswer{	/* CSS indicating correct answer */
    background-color:rgb(26, 95, 26);
    color:#fff;
}
#questionDiv .wrongAnswer{	/* CSS indicating wrong answer */
    background-color:rgb(183, 74, 74);
    color:#fff;
}

#dragContent{
    position:absolute;
    display:none;
}	


/* ---------------------- main index page --------------------------*/

.allCourses p{
  display: flex;
  align-items: center;
  justify-content: center;
/*  overflow-x: scroll; */
overflow-wrap: break-word;
container-type: inline-size;
width: 100%;

}

.cd{
    color: black;
    height: 150px;
    width: 35%;
    margin: 10px;
    /*border: solid 2px black;*/
    cursor: pointer;
    /* border: 2px solid rgb(7, 162, 64);*/
    text-align: center;
    border-radius: 30px;
    align-items: center;
    align-content: center;
    float:left;
    background-color: white;
}


.cd a{
    color: black;
}