html {
  height:100%;
}
body {
  background-color:#b8bcc8;
  height:100%;
}
.mainheader {
  width:auto;
  background-color:#dfdfe6;
  margin:15px;
  padding:3px;
  box-shadow: 4px 7px 3px #8e95a8;
  border-radius:3px;
}
.title {
  padding-left:10px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:35px;
}
.bodycontent {
  background-color:#cdcbd1;
  width:85%;
  min-height:100%;
  margin:auto;
  border-radius:3px;
}
.bodystep {
  clear:left;
  display:block;
  padding:15px 10px 15px 10px;
}
.stepimg {
  max-height:50%; 
  max-width:50%;
  float:left;
  margin-right:20px;
  min-height:25%;
  min-width:25%;
  box-shadow: 4px 7px 3px #8e95a8;
  image-rendering: crisp-edges;
}
.stepvid {
  max-height:50%; 
  max-width:50%;
  float:left;
  margin-right:20px;
  min-height:25%;
  min-width:25%;
  border:none;
  box-shadow: 4px 7px 3px #8e95a8;
}
.mainpara {
  padding:20px;
  margin:25px;
  font-size:20px;
  font-family: Arial, Helvetica, sans-serif;
  background-color:#dfdfe6;
  box-shadow: 4px 7px 3px #8e95a8;
  border-radius:2px;
}
.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:35px;
}
.sepdiv {
  padding:15px 10px 15px 10px;
  margin:25px;
  background-color:#dfdfe6;
  box-shadow: 4px 7px 3px #8e95a8;
  border-radius:2px;
}
.smallimg {
  max-width:10%;
  margin:10px;
}
.centerdiv {
  text-align:center;
}
.card {
  margin:25px;
  background-color:#e1e6e8;
  box-shadow: 4px 7px 3px #8e95a8;
  border-radius:5px;
  display:flex;
  flex-direction: column;
  align-items:stretch;
  justify-content:space-between;
  flex-basis:250px;
  height:300px;
}
.carddiv {
  padding:15px 10px 15px 10px;
  margin:auto;
  width:95%;
  display:flex;
  justify-content:space-evenly;
  flex-wrap:wrap;
  align-content:space-around;
  align-items:center;
  position:relative;
}
.question {
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
  font-weight:bold;
  height:50%;
  border-radius: 5px 5px 0px 0px;
}
.answer {
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
  color:#b8bcc8;
  background-color:#b8bcc8;
  padding:auto;
  height:50%;
  border-radius: 0px 0px 5px 5px;
  transition: all 1s;
}
.answer:hover {
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
  color:#000000;
  background-color:#e1e6e8;
  padding:auto;
  height:50%;
  border-radius: 0px 0px 5px 5px;
  transition: all .1s;
}
.cardtext {
  position: relative;
  top: 25%;
  transform: translateY(-50%); 
}
.fade {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:black;
  z-index:99999;
  pointer-events: none;
}