.lol{

    align-items: center;
    text-align: center;
    
    
}


/*Nav Bar Starts Here*/

.nav{
     display: flex;
  justify-content: space-between; /* THIS pushes left & right */
  align-items: center;
  padding: 16px 32px;
    background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  height:30px;
  transition: 0.8s;
  
}

.nav:hover{
    background: rgba(255, 255, 255, 0.08);
}

.logo{
    width: 62px;
    border-radius: 20px;
    filter: drop-shadow(0 0 2px #7c5cff);
}

.navbar ul li{
    display: inline-flex;
    margin-left: 50px;
    font-size: larger;
     transition: 1s; 
    
}

.navbar a{
    text-decoration: none;
    color: #EAEAF0;
    transition: 0.7s;
    

}

.heading button{
   background:#7c5cff;
    border-width: 0px;
    border-radius: 8px;
    height: 60px;
    width: 200px;
    transition: 0.8s;
    color: rgb(201, 196, 196);
}

.heading button:hover{
   filter: drop-shadow(0 0 10px rgb(108, 108, 178));
   cursor: pointer;
   transform: translateY(5px);
   gap: 28%;
    
}

.navbar ul li a:hover{
    filter: drop-shadow(0 0 2px #6c5bae);
     color: #7c5cff;
     transform: translateY(2px);
      
filter: drop-shadow(0 0 10px rgb(169, 105, 188));
    

     
    
}

/*NavBar Ends Here*/

.heading{
    text-align: center;
    padding: 100px 20px;
    color: white;
    font-size: 38px;
}

.heading span{
    color: #9080d2;
}

.heading p{
    opacity: 0.7;
}


.heading1{
    
    text-align: center;
    padding: 100px 20px;
    color: white;
    font-size: 38px;
    margin-left: 300px;
    margin-right: auto;
    
}

.heading2{
    
    text-align: center;
    padding: 100px 20px;
    color: white;
    font-size: 38px;
    margin-left: 380px;
    margin-right: auto;
    
}

.col{
    display: inline-block;
    align-items: center;
      background: radial-gradient(
    circle at center,
    rgba(124, 92, 255, 0.15),
    transparent 60%
  );
}


.card{
    border: white 2px solid;
    width: 230px;
    height: 270px;
    margin-top: 35px;
    display: inline-block;
   border-radius: 10px;
    margin-left: 140px;
    background-color: #131313fd;
    filter: drop-shadow(0 0 5px  #7c5cff);
    box-shadow: 
        0 0 15px rgba(124, 92, 255, 0.5),
        0 0 40px rgba(124, 92, 255, 0.2);
        
 
    
}

.card:hover{
      display: inline-block;
    align-items: center;
      background: radial-gradient(
    circle at center,
    rgba(124, 92, 255, 0.15),
    transparent 60%
  );
    backdrop-filter: blur(6px);
}

h1{
   color: #EAEAF0;
}

.card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: sans-serif;
  color: white;
}

.sec1{
    width: 100%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.74);
    margin-top: 50px;
    align-items: center;
    border-top: solid rgba(39, 39, 39, 0.555) 2px;
    text-align: center;
    display: flex;
}

.sec h2{
     
      text-align: center;
    display: flex;
    
    
    
}



.sub{
    color: white;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.158);
    border: white 2px solid;
    width: 230px;
    height: 270px;
    margin-top: 40px;
    display: inline-flex;
    border-radius: 10px;
    background-color: #131313fd;
    transition: 0.8s;
    text-align: center;
    
}



.sub1{

     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("his.png");
    background-size: cover;
}

.sub2{

     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("civics.png");
    background-size: cover;
}

.sub3{

     background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("detective.png");
    background-size: cover;
}


.sub:hover{
    transform: translateY(10px);
    
    cursor: pointer;
}

h2 {
  text-align: center;
}

.col h2{
    text-align: center;
    display: inline-flex;
}

.col{
    width: 100%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.74);
    text-align: center;
    align-items: center;
    border-top: solid rgba(39, 39, 39, 0.555) 2px;
    background: radial-gradient(
    circle at center,
    rgba(127, 23, 159, 0.15),
    transparent 60%
  );
    backdrop-filter: blur(6px);
margin-right: 100px;

}

.re{
    color: white;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.158);
    border: white 2px solid;
    width: 230px;
    height: 270px;
    margin-top: 40px;
    display: inline-flex;
    border-radius: 10px;
    background-color: #131313fd;
    transition: 0.8s;
    position: relative;
    height: 250px;       /* fixed card height */
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    margin-right: auto;
    margin-left: 150px;
    
}

.re1{
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("haunted.png");
   
}

.re2{
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("haunt.png");
    background-size: cover;
   
}

.re3{
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("Nazi\ germany.png");
    background-size: cover;
   
}

.re4{
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("civics1.png");
    
   
}


.re5{
  background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("french.png");
    background-size: cover;
   
}


.re6{
  background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("the\ cover\ for\ russia.png");
    background-size: cover;
    
   
}

/*diff*/





.re:hover{
    transform: translateY(10px);
    filter: drop-shadow(0 0 5px rgb(172, 115, 172));
    cursor: pointer;
   

}


.col button{
   background:#7c5cff;
    border-width: 0px;
    border-radius: 8px;
    height: 60px;
    width: 200px;
    transition: 0.8s;
    color: rgb(201, 196, 196);
    text-align: center;
    margin-top: 100px;
    
    
}

.col button:hover{
   filter: drop-shadow(0 0 20px rgb(108, 108, 178));
   cursor: pointer;
   transform: translateY(5px);
   gap: 28%;
    
}


.cat{
    color: white;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.158);
    border: white 2px solid;
    width: 230px;
    height: 270px;
    margin-top: 40px;
    display: inline-flex;
    border-radius: 10px;
    background-color: #131313fd;
    transition: 0.8s;
    position: relative;
    height: 250px;      /* fixed card height */
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    margin: 40px 20px 0 20px; /* top, right, bottom, left */


}

.cat1{
   background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("his.png");
    background-size: cover;
}
.cat1{
   background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("his.png");
    background-size: cover;
}

.cat2{
   background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("civics.png");
    background-size: cover;
}

.cat3{
   background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("detective.png");
    background-size: cover;
}

.col{
  align-items: center;
  text-align: center;
}

.let{
  font-size: larger;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-style: oblique;
  filter: drop-shadow(0 0 5px rgb(101, 53, 144));
}

.let1{
  font-size: xx-large;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-style: oblique;
  filter: drop-shadow(0 0 5px rgb(101, 53, 144));
  border-bottom: 2px solid #9180d247;
}

.le{
    color: white;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.158);
    border: white 2px solid;
    width: 230px;
    height: 270px;
    margin-top: 40px;
    display: inline-flex;
    border-radius: 10px;
    background-color: #131313fd;
    position: relative;
    height: 250px;       /* fixed card height */
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    margin: 40px 20px 0 100px;
    transition: 0.3s;
    
}

.le1{
    background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("french.png");
    background-size: cover;
}

.le2{
    background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("Nazi\ germany.png");
    background-size: cover;
}
.le3{
      background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
    url("the\ cover\ for\ russia.png");
    background-size: cover;
}

a{
    text-decoration: none;
}

.le:hover{
  border: #9080d2 2px solid;
  filter: drop-shadow(0 0 5px #9080d2);
  transform: translateY(5px);
}