html {
  background-color: #310055;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  flex-direction: column;
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 18em;
  padding-bottom: 3.5em;

}

header h1 {
  font-size: 5em;
  color: white;
}

section {
  border-bottom: solid #D283FF 2px;
  width: 80%;
  padding-top: 3.5em;
  padding-bottom: 3.5em;
}

section h1 {
  font-size: 2.5em;
  text-align: center;
  color: white;
}

#sec-flip {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 85%;
  height: 75em;
}

.flip-card {
  background-color: transparent;
  width: 23em;
  height: 27.5em;
  perspective: 1000px;
  margin-bottom: 40px;

}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

.flip-card-front,
.flip-card-back {
  position: absolute;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 30px;
}

.flip-card-front {
  color: black;
  height: 100%;
}

.flip-card-front img {
  width: 90%;
  height: 90%;
  border-radius: 30px;
  box-shadow: 5px 5px 5px 0px #9f69c0;

}

.flip-card-back {
  height: 90%;
  width: 80%;
  background-color: #EABFFA;
  color: black;
  transform: rotateY(180deg);
  box-shadow: 5px 5px 5px 0px #9f69c0;

}

.flip-card-back h1,
.flip-card-back span {
  color: black;
}

.flip-card-back h1{
  font-size: 2.5em;
}

.flip-card-back span{
  font-size: 1.5em;
  font-family: Arial, Helvetica, sans-serif;
}