html, body {
  overflow: hidden;
  background-color: #2d3436;
  width: 100%;
  height: 100%;
}

.card {
  position: relative;
  width: 360px;
  height: 504px;
  border: 10px solid #fd79a8;
  margin: 50px auto 0 auto;
  box-shadow: inset 10px 0px 15px 0px rgba(0,0,0,0.1);
  background-color: rgb(230, 240, 230);
}

.strikethrough {
  text-decoration: line-through;
}

.card .front { 
  position: absolute;
  width: 100%;
  height: 100%;
  margin: -10px 0px 0px -10px;
  border: 10px solid #fd79a8;
  backface-visibility: hidden;
  background-color: rgb(115, 163, 191);
  background-size: contain;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  transform: perspective(800px) rotateY(0deg);
  transition: all 0.8s ease-in-out;
}

.card:hover .front {
  transform: perspective(800px) rotateY(-170deg);
  background-color: rgb(115-50, 163-50, 191-50);
}

.card:hover .back {
  transform: perspective(800px) rotateY(-170deg);
  box-shadow: 7px 0px 5px 0px rgba(0,0,0,0.3), inset 2px 0px 15px 0px rgba(0,0,0,0.1);
  background-color: rgb(210, 220, 210);
}

.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 10px solid #fd79a8;
  margin: -10px 0px 0px -10px;
  /*backface-visibility: visible;*/
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  transform: perspective(800px) rotateY(0deg);
  transition: all 0.8s ease-in-out;
  background-color: rgb(230, 240, 230);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
}

.footer {
    background-color: #dfe6e9;
    width: 567px;
    margin: auto;
    text-align: center;
}
.footer ul {
    list-style: none;
}