@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{
    background-color: white;
    font-family: "Montserrat", sans-serif;  			
}

a {
  text-decoration: none;
  color: black;
  list-style: none;
  font-optical-sizing:16px;
  font-weight: 700;
  font-style: bold;   
}
#foot{
  background-color: #efd321; 
  min-height: 250px;  
  
 
    
}
#head{
  background-color: #ffffff;   
}
#right_pannel{
    background-color: #fbcd15;
}
.navbar > .container {
    width: 100%;    
    background-color: #ffffff; 
}
.navbar a {  
 width: auto;
 margin-left: 3px;
}
.nav-link{ 
    font-family: "Montserrat", sans-serif;  
    font-size: auto; 
    font-weight: bold;
}
/* Add a background color on mouse-over */ 
.navbar a:hover {
  background-color: #ffffff;
}

input[type="search"] {
    background-color :none; 
    border: none;    
  }
a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    a, a:hover {
      text-decoration: none !important; 
    }
    #links{
     visibility: visible;      
    }

/* Flip Card */
#avatar{
  width:80px;
  height: 80px;
  margin-top: 120px;
}
.flip-card {  
  width:18vw;  
  height: 400px;
  perspective: 600px;  
  
}
#human{
  background-color: #ed1b24;
}
#env{
  background-color: #3eb93c;
}
#we{
  background-color: #ef4522;
}
#ethical{
  background-color: #d52160;
}
#good{
  background-color:#5595d5;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 15px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  height: 100%;  
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width:100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-size: 14px ;
  border-radius: 10px;
  }

.flip-card-front {  
  color: black;  
}

.flip-card-back {  
  color: white;
  transform: rotateY(180deg);
}

@media (max-width:767px)
{
  .flip-card {  
    width: 95vw;  
    height: 300px;
    perspective: 1000px;
    
  }
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    height: 100%;
  }
 /* #links{
    visibility: hidden;
    display: none;
  }*/
}