@media (max-width: 767px)  {
  /* CSS rules for mobile devices */
}


  .lo{
    
    text-align: center !important;
    font-size: 100px;
    font-family: castellar;
}
*{
  margin: 0px;
  padding: 0px;
}
body{
  align-items: center;
  background:rgba(169, 179, 223, 0.699);
  
}
.allo{
  text-decoration: none;
 font-family: 'Times New Roman', Times, serif;
 transition: .5s;
  
}
.allo:hover{
  transition: .5s;
  color: white;
}
.imageq{
  margin-left:-50px ;
  position: relative;
  width:300px;
  height:350px ;
  margin-top:50px ;
  float: left;
  
 
  
}
.image--imgq{
  display: block;
  width:100% ;
  height: 100%;
  
 
  
}
.image--overlayq{
  width: 300px;
  height:350px ;
  position: absolute;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.6);
  color: wheat;
  font-family:Segoe Print;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ;
  border-radius:65px 65px 65px 65px ;
}
.image--overlay--blurq{
  backdrop-filter: blur(5px) ;
}
.image--overlayq > *{
  transform: translateX(-20px);
  transition:transform 0.25s
}
.image--overlayq:hover{
 opacity: 1;

}
.image--overlayq:hover > *{
  transform: translateX(0);
}
.image--titleq{
  
 font-size: 2em;
 font-weight: bold;
 
}

.image--discriptionq{
font-size: 1.25em;
margin-top: 0.25em;
font-family: Comic Sans MS ;


}

.imagep{
 margin-top:-350px ;
  margin-left:315px ;
  position: relative;
  width:300px;
  height:350px ;
 
  
}
.image--imgp{
  display: block;
  width:100%;
  height: 100%;
  border-radius:65px 65px 65px 65px ;
  
}
.image--overlayp{ 
  border-radius:65px 65px 65px 65px ;
  width: 300px;
  height:350px ;
  position: absolute;
  top: 0;
  left:0;
  
  background-color: rgba(0, 0, 0, 0.6);
  color: wheat;
  font-family: quicksand,sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ;
}
.image--overlay--blurp{
  backdrop-filter: blur(5px) ;
}
.image--overlayp > *{
  transform: translateY(-20px);
  transition:transform 0.25s
}
.image--overlayp:hover{
 opacity: 1;

}
.image--overlayp:hover > *{
  transform: translateY(0);
}
.image--titlep{
  
 font-size: 2em;
 font-weight: bold;
}
.image--discriptionp{
font-size: 1.25em;
margin-top: 0.25em;
font-family: Comic Sans MS ;

}



.imager{
  margin-left:315px ;
  top:-350px ;
 
  position: relative;
  width:300px;
  height:350px ;
 
  
}
.image--imgr{
 
  display: block;
  width:100%;
  height: 100%;
  border-radius:65px 65px 65px 65px ;
}
.image--overlayr{ 
  
  width: 300px;
  height:350px ;
  position: absolute;
  top:0;
  left:0;
  border-radius:65px 65px 65px 65px ;
  background-color: rgba(0, 0, 0, 0.6);
  color: wheat;
  font-family: quicksand,sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ;
}
.image--overlay--blurr{
  backdrop-filter: blur(5px) ;
}
.image--overlayr > *{
  transform: translateX(20px);
  transition:transform 0.25s
}
.image--overlayr:hover{
 opacity: 1;

}
.image--overlayr:hover > *{
  transform: translateY(0);
}
.image--titler{
 font-size: 2em;
 font-weight: bold;
}
.image--discriptionr{
font-size: 1.25em;
margin-top: 0.25em;
font-family: Comic Sans MS ;

}




.cen{
  align-items: center;
  margin: 50px;
  width:0% ;
  padding-left: 200px;
  padding-top:-150px ;
  margin-bottom:150px ;
  
}
*{
    padding: 0px;
    margin:0px ;

}

.title{
    background-color: khaki;
    
    text-align: center;
    color:saddlebrown;
    font-family: candara;
    font-weight:bolder ;
    height:100px ;
    font-size: 30px;
    width:100% ;
}

.pic{
    float: right;
    position: relative;
    width:100% ;
    height: 600px;
}
.tt{
   text-align: center;
    font-weight: bolder;
    margin-top:100px ;
    margin-left:100px ;
    position: absolute;
   color: beige;
   font-family: castellar;
   font-size:20px ;
}
.ii{
    padding: 0px;
    margin: 0px;
    width: 100%;
}
.in{
margin-left:100px ;
margin-top: 200px;

}
.pp{
  font-size: 15px;
}
.bt{
    margin-left:130px ;
    margin-top: 300px;
    position: absolute;
    text-align: center;
    width:460px ;
    height:60px ;
    font-size:40px ;
    background-color: darkorange;
    color: black;
    font-weight: bolder;
    border: 1px;
    border-radius:20px 20px 20px 20px ;
    box-sizing: 20px 20px 20px;
    transition: .5s;

}
.bt:hover{

height:100px ;
transition: .5s;
color: white;
}
a{
    text-decoration: none;
    color:saddlebrown;
}