* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    /* float:inline-end;
    width:  275px;
    height: 275px; */
    object-fit: cover;
}
body{
height:105vh;
   background:linear-gradient(to right, #66ffcc 0%, #ff99cc 100%);
   display:flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
  
}
section{
    display: grid;
    grid-template-columns: repeat(4, 8rem);
    grid-template-rows: repeat(4, 8rem);
    grid-gap: 2rem;
    perspective: 800px;
}
.card{
   position: relative;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -o-transition:all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -moz-transition:all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -ms-transition:all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition:all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition:all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   
   box-shadow:rgba(0,0,0,0.2) 0px 5px 15px;
   font-size: 20px;
   
   
   
   
}
.card div {
    height: 100%;
    
  }


.face,
.back{
height: 100%;
width: 100%;
position: absolute;

backface-visibility: hidden;
-webkit-backface-visibility: hidden;


 backface-visibility: hidden;
-webkit-backface-visibility: hidden;


}

.back{
background-color : white;



pointer-events: none;
 
}

.toggleCard{
    
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face{

transform:rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform: rotateY(180deg);

}
/* #res-btn{
    font-size :20px;

position:relative;
bottom:px;
} */
section{
position:relative; 
bottom:-14px;
}
p{
    font-weight:100 ;
}
.btn{
font-size :14.5px;
padding: 5px 5px;

position:relative;
bottom:-5px;

background:#B9C7CC;
background:#D5B5CC;
background:linear-gradient(to right, #82ECCC 0%, #ff99cc 150%);
border-radius:30px;
box-shadow: 0.2px 0.4px #888888;
}
footer{
    position: relative;
    bottom:-40px;
}
@media (min-width: 300px) and (max-width : 767px) { */
   body{
   height: 100%;    
   }
section{
 display: grid;
grid-template-columns: repeat(4, 3rem);
grid-template-rows: repeat(4, 3rem);
grid-gap: 2.75rem;
perspective: 600px;
position : relative;
bottom : 40px;
right: 7.25px;
}
    .face,
    .back{
    height: 100%;
    width : 100%;
    position: absolute;
    }
 .card{
 /* position: relative; */
height: 145%;
width: 145%;
}


#hp-h1{
font-size:25px;
position:relative;
bottom:95px;
}
footer{
position: relative;bottom:-30px;
        

}
.btn{
 font-size :15.5px;
    
    position:relative;
    bottom:80px;
    background:linear-gradient(to right, #82ECCC 0%, #ff99cc 150%);
border-radius:30px;
box-shadow: 0.2px 0.4px #888888;
    
    
    }
}
@media (min-width: 767px) and (max-width : 1250px){
    #hp-h1{
   font-size:22.5px;
   position:relative;
   bottom:0px;
    right:15px;
   }
    .btn{
    font-size :13.5px;
   
       position:relative;
       bottom:-6px;
       right:15px;
    background:linear-gradient(to right, #82ECCC 0%, #ff99cc 150%);
    border-radius:30px;
    box-shadow: 0.2px 0.4px #888888;
       
   
       }
   
     .card{
    /* position: relative; */
   height: 75.5%;
   width: 75.5%;
   }
    section{
    display: grid;
    bottom:-15.5px;
   grid-gap:0rem;
    }
    footer{
   position: relative;bottom:6.5px;
   
   
   }
   }
   @media screen and (min-width: 1250px) {
    #hp-h1{
   font-size:27px;
   position:relative;
   bottom:20px;
   right:8px;
   }
     .card{
    /* position: relative; */
   height: 90%;
   width: 90%;
  
   }
    section{
    display: grid;
    bottom:5px;
   
   grid-gap: 0.85rem;
    }
   
    .btn{
     font-size:18px;
    position: relative;
     bottom: 15px;
   right:8px;
   background:linear-gradient(to right, #82ECCC 0%, #ff99cc 150%);
border-radius:30px;
box-shadow: 0.2px 0.4px #888888;
    }
    footer{
     font-size:18px;
   position: relative;
   bottom:-17.5px;
   
   
   }
   
   
   }
   /* @media only screen and (min-width:1400px){
    .card{
        position: relative;
       height: 100%;
       width: 100%;
      
       } 
       section{
        display: grid;
        bottom:5px;
       
       grid-gap: 2rem;
        } 
       
   } */