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

body {

    font-family: 'Josefin Sans', sans-serif;
    background-color: hsl(235,24%,19%);
    font-size:18px;
    justify-content: center;
    
}

audio{
    width:200px;
}


.background-image {

    position: fixed;
    width: 100%;
    top:0;
    left:0;
    right:0;
    height: 150px; 
    z-index: -1; 
}



.background-image-click {

    position: absolute;
    width: 100%;    
    left:0;
    bottom:0;
    height: 100px;
    z-index: 1; 
}

.background-image-click img{
    
    width:100%;
   height:100%;
   border-radius: 10px;

   
}



.background-image img{
     width:100%;
    height:100%;
    object-fit: cover;
    object-position: left;
}





.header{
  
  align-items: center;
  justify-content: space-between;
}

.title{
    background: purple;
    color: white;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 2px;
    width: 100%;
    
}

.title2{ 
    color: white;
    font-weight: bold;
    letter-spacing: 2px;

}


.Module{
margin-top: 70px;    
}

.ModuleStartingPoint h3{
    color: green;
}

h2 {
    color: whitesmoke;
    
}



h4 {
    /* color: #000000; */

    color: whitesmoke;
    
}

h5 {
    color:whitesmoke;
    
}


.slider-wrap-collection{
    
    height: 700;
    padding: 10px;
    top: 80px;
    left:2.5%;
    border: 2px solid, white;

}

.slider-wrap {
    position: relative;

    left:2.5%;
    width: 100%;
    height: 350px;
    border: 1px solid black;
    cursor:grab;
    
}

.slider-wrap-2{
    position: relative;
    top: 30px;
    left:2.5%;
    width: 100%;
    height: 350px;
    border: 1px solid black;
    cursor:grab;

}


.slider{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow:scroll;
       
}

.slider-inner{
    position:absolute;
    display: flex;  
    justify-content: space-around;
    justify-content: left;
    top: 0;
    left: 0; 
    height: 100%;
    width: 2600px;
    background-image: linear-gradient(45deg, red, blue, green);
    
      
}

.card, .card2 {
    position: relative;
    text-align: center;
    justify-items: center; 
    width: 220px;
    height: 310px;
    top:5%;
    transition: transform 1s;
    transform-style: preserve-3d;
    
    
    
 
}




/* toggle flip */
.card.is-flipped{
    transform: rotateY(180deg);
}

.card2.is-flipped{
    transform: rotateY(180deg);
}
/* toggle flip */


.note-card{
    position:relative;
    width: 218px;
    height: 245px;
    

}

.note-card h3{
    color:whitesmoke;
    font: weight 20px;;
}

h4{
    margin-left: 10px;
    
}

.card-face {
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility: hidden;
    border: 1px solid #000000;
    border-radius: 10px;

}

.card_face--front{
    background-image: linear-gradient(gray,brown,white);
    align-items: center;
    justify-items: center;
    


}



.card_face--back{
    /* background-color: orange; */
    background: rgba(180, 17, 212, 0.8) ;
    transform:rotateY(180deg);
    text-align: left;
    font-size: 15px;

}

ol{
    padding: 2px;
}