.crossRotate {
background: transparent !important;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}

.crossRotate:hover {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.food {
border-radius:10px; 
margin-top: 200px; 
width:25%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}

.food:hover {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

.open-sans-fontstyle {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:"wdth" 100;
font-size:35px;
}

.icons {
border-radius: 10px; 
padding:10px;
margin-top:200px;
}
  
.earth {
  margin-top:200px;
}


/*  Define the keyframes for the flip animation */
@keyframes flip-horizontal {
  0% {
    transform: scaleX(1); /* Starting state: no vertical flip */
  }
  100% {
    transform: scaleX(-1); /* Back to unflipped */
  }
}

/*  Basic styling for the image */
.flipCard {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}

/* Apply the animation to the image on hover */
.flipCard:hover {
transform: scaleX(-1); 
}