body {
  margin-left: 200px;
  background-color:rgb(83, 35, 128);
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  text-align: center;
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 120%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   margin-right: 60px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 120%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: rgb(12, 12, 12);
  color: black;
}

.flip-card-back {
  background-color: #7837ce;
  color: white;
  transform: rotateY(180deg); 
}
header{
  font-family: 'Comfortaa', cursive;;
  color: rgb(255, 255, 255);
}
p{
  font-family: 'Comfortaa', cursive;;
  text-shadow:
  -2px -2px 0 #000000, 
  2px -2px 0 #000000, 
  -2px 2px 0 #000, 
  2px 2px 0 #000;
}
footer{
  font-family: 'Comfortaa', cursive;;
  color: aliceblue;
  text-shadow:
  -2px -2px 0 #6dc4d3, 
  2px -2px 0 #000, 
  -2px 2px 0 #000, 
  2px 2px 0 #000;
}
h2{
  font-family: 'Comfortaa', cursive;
  text-shadow:
        -2px -2px 0 #6dc4d3, 
        2px -2px 0 #000, 
        -2px 2px 0 #000, 
        2px 2px 0 #000;
}
button{
  margin-top:30px ;
  background-color: turquoise;
}
h1{
  text-align: center;
  margin: auto;
  font-family: 'Comfortaa', cursive;
  background-color: #a686cf;
  border: 5px;
  border-radius: 90px;
  width: 500px;
  margin-bottom: 30px;
  color: aliceblue;
  text-shadow:
  -2px -2px 0 #c26dd3, 
  2px -2px 0 #000, 
  -2px 2px 0 #000, 
  2px 2px 0 #000;
  
}
div{
  
  border-radius: 10px;
  margin: auto;
  float: left;
  margin-bottom:  200px;
  

}
.nvm{
  text-align: center;
}
h3{
  font-family: 'Comfortaa', cursive;
  text-shadow:
        -2px -2px 0 #6dc4d3, 
        2px -2px 0 #000, 
        -2px 2px 0 #000, 
        2px 2px 0 #000;
}
