body {
  line-height: 1.2;
  font-family: "Comic Sans MS", sans-serif;
}

#parent-div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  background-color: #38a571;
}

#container-css{
  position: absolute;
  background-color: #38a571;
  color: white;
  box-shadow: 0px 0px 3px 0px #ffffff;
}
#anchor-css{
  color: white;
  text-decoration: none;
}
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 420px;
  perspective: 1000px;
  position: absolute;
}

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



.flip-box-front, .flip-box-back {
  padding: 20px;
  background: white;
  border-radius: 25px;
  border: 1px solid #ccc;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.flip-box-front {
  z-index: 2;
  transform: rotateY(0deg);

}

.flip-box-front-child {
  z-index: 2;
  transform: rotateY(0deg);
  background-image: url(../images/blerd_back_printable-01.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  border-radius: 25px;
}



.flip-box-back {
  transform: rotateY(180deg);
}

.flip-box-back-child{
  background-image: url(../images/blerd_template_questions_editable.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  border-radius: 25px;
}



.card{
  background-color: #00000000;
  border: 0px solid #00000000;
  width: 100%
  height: 100%;
  color: white;
}


.card_text_bottom{
}

ol{
    padding-left: 20px;
}

li span { font-weight: normal; }

.hideMe {
  -webkit-animation: hideThat 1s forwards;
  animation: hideThat 1s forwards;

}

@keyframes hideThat {
  from{
    top: 35%;
    left: 40%;

  }
  100% {
    opacity: 0;
    top: 40%;
    left: 55%;
  }
}

.hidetopleft {
  -webkit-animation: topleft 1s forwards;
  animation: topleft 1s forwards;

}

@keyframes topleft {
  from{
    top: 20%;
    left: 30%;

  }
  100% {
    opacity: 0;
    top: 0%;
    left: 0%;
  }
}

  .hidetopright {
    -webkit-animation: topright 1s forwards;
    animation: topright 1s forwards;

  }

  @keyframes topright {
    from{
      bottom: 25%;
      right: 30%;

    }
    100% {
      opacity: 0;
      bottom: 50%;
      right: 5%;
    }
  }

  .hidebottomleft {
    -webkit-animation: bottomleft 1s forwards;
    animation: bottomleft 1s forwards;

  }

  @keyframes bottomleft {
    from{
      bottom: 20%;
      left: 35%;

    }
    100% {
      opacity: 0;
      bottom: 5%;
      left: 5%;
    }
  }

  .form-to-play {
      padding: 50px 0px 50px 0px;
      background: white;
      border-radius: 30px;
      box-shadow: 7px 7px 20px 0px #8a8a8a;
  }

  #emailHelp{
    text-align: left;
  }

  #submit-button{
    padding: 5px;
    width: 75%;
  }

  #submit-button, #inputEmail, #inputPass{
    border-radius: 30px;
  }

  #logo-css{
    width: 70px;
    height: 70px;
  }

 #error-message{
   color: red;
 }