body {
  background-image: url(../Media/backgrounds/seattle-background-640x415.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.hideElement {
  display: none;
}

h1 {
  /* Reference https://www.midwinter-dg.com/permalink-7-great-css-based-text-effects-using-the-text-shadow-property_2011-03-03.html */
  text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
  color: rgba(255,255,255,0);
  font: 65px 'ChunkFiveRegular';
  float: right;
  margin-top: 30px;
  margin-right: 167px;
}

.quizContainer {
  align-items: center;
  float: right;
  text-align: center;
}

/* <============================================ Page's Introduction. ===================================================> */
#instruct {
  top: 25px;
  left: 25px;
  margin-top: 322px;
  margin-right: 150px;
  text-align: center;
  color: rgb(221, 221, 221);
  font-size: 1em;
  font-variant-caps: petite-caps, unicase;
}

.intro {
  text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
  color: rgba(255,255,255,0);
  font: 'ChunkFiveRegular';
  float: right;
}

#title {
  font-family: Cursive;
  text-align: center;
  font-size: 2.5em;
  color: #ccc2a6;
  text-shadow: -2px 2.3px 0 #000;
  background-image: url(../Media/dykf.jpg);  background-repeat: no-repeat;
  border: 1px;
  border-radius: 50%;
  background-position: center; background-size: 100;
}

/* <==================================================== Quiz ===========================================================> */
/* Timer, Score, and High Score headers. */
#quizHeader {
  margin: 0px;
  align-items: center;
  text-align: center;
  color: #fff;
	text-shadow: 0px -1px 4px rgb(255, 255, 255), 0px -2px 10px rgb(0, 255, 234), 0px -10px 20px #0084ff, 0px -18px 40px #006eff;
  font-weight: bolder;
  font-size: 45px;
}

#quizTime { /* Timer */
  margin-top: 5px;
  align-items: center;
  text-align: center;
  color: #fff;
	text-shadow: 0px -1px 4px rgb(255, 255, 255), 0px -2px 10px rgb(0, 255, 234), 0px -10px 20px #0084ff, 0px -18px 40px #006eff;
  font-weight: bolder;
  font-size: 45px;
}

/* User's Current Score */
#qScore {
  margin-top: 5px;
  align-items: center;
  text-align: center;
  font: 60px 'BlackJackRegular';
}

/* Q & A */
#quiz {
  margin-top: 75px;
  margin-right: 100px;
  align-items: center;
  text-align: center;
}

#Q {
  text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
  color: rgb(221, 221, 221); /* rgba(255,255,255,0) Hard to read questions.  I need to adjust text-shadow.*/
  background:linear-gradient(to bottom,rgba(255,255,255,0)  5%, #292b2e 100%);
  background:linear-gradient(to bottom, #292b2e 5%,  rgba(255,255,255,0) 100%);
  font-size: 35px;
  margin-top: 0px;
  padding: 2px;
  align-items: center;
  text-align: center;
  width: auto, fit-content;
}

#choiceSection {
  margin-top: 5px;
  align-items: center;
  text-align: center;
}


/* <========================================== End of Quiz & List of Scores. ============================================> */
#goToScoreboard { /* Fred's Chaps */
  cursor: context-menu;
  color: rgb(221, 221, 221);
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  font-size: 1em;
  text-decoration: none;
}

#goToScoreboard:hover {
  background-color: #408c99;
  background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
}

#beat {
  width: 100%;
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  color: rgb(221, 221, 221);
  font-size: 1em;
}

#endQuiz {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  color: rgb(221, 221, 221);
  font-size: 1em;
}

.ownIt {
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  color: rgb(221, 221, 221);
  font-size: 1em;
  width: auto, fit-content;
}

/* <============================================= Button Styles =========================================================> */
/* Ref. https://www.bestcssbuttongenerator.com/ */
#knock {
	box-shadow: 0px 1px 0px 0px #1c1b18;
	background: linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color: #eae0c2;
	border-radius: 25px;
	border: 2px solid #333029;
	display: inline-block;
	cursor: context-menu;
	color: #505739;
	font-family: 'Dynalight', cursive;
	font-size: 22px;
	font-weight: bold;
  padding: auto;
  padding-top: 7px;
	text-decoration: none;
	text-shadow: 0px 1px 0px 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
}

.knock:hover {
	background: linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
	background-color: #ccc2a6;
}

.knock:active {
	position: relative;
	top: 1px;
}

#choiceSection {
  display: flex;
  justify-content: center;
}

.choices {
	box-shadow: 0px 10px 14px -7px #276873;
	background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color: #599bb3;
	border-radius: 8px;
	display: inline-block;
	cursor: pointer;
	color: rgb(221, 221, 221);
	font-family: 'Tangerine', Serif;
	font-size: 30px;
  font-weight: bolder;
  margin-top: 12px;
	padding: 13px 32px;
	text-decoration: none;
  text-shadow: 0px 1px 0px #3d768a;
  opacity: 0.7;
}

.choices:hover {
	background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}

.choices:active {
	position: relative;
	top: 1px;
}

.ownIt {
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  border: 5px groove silver;
}

#submit{
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}

#total:hover {
  background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}

#redoBtn {
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  box-shadow: 3px 4px 0px 0px #19cf92;
	background: linear-gradient(to bottom, #3847f0 5%, #21c2b5 100%);
	background-color: #360580;
	border-radius: 18px;
	border: 1px solid #21548a;
	cursor: context-menu;
	color: rgba(255,255,255,0);
	font-family: 'Dynalight', cursive;
  font-size: 30px;
  font-weight: 700;
	padding: 7px 25px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #3847f0;
}

#redoBtn:hover {
  background: linear-gradient(to bottom, #21c2b5 5%, #3847f0 100%);
	background-color: #21c2b5;
}

#total:active, #redoBtn:active, #top   {
  position: relative;
	top: 1px;
}

#beat {
  margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
  width: 100%;
  justify-content: center;
}

#top {
  box-shadow: 3px 4px 0px 0px #21548a;
	background: linear-gradient(to bottom, #21c2b5 5%, #3847f0 100%);
	background-color: #21c2b5;
	border-radius: 18px;
	border: 1px solid #19cf92;
	margin-top: 350px;
  margin-right: 350px;
  align-items: center;
  text-align: center;
	cursor: context-menu;
	color: rgba(255,255,255,0);;
	font-family: 'Dynalight', cursive;
	font-size: 17px;
	padding: 7px 25px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #360580;
}

#top:hover {
  background: linear-gradient(to bottom, #3847f0 5%, #21c2b5 100%);
	background-color: #3847f0;
}

/* Scoring Displays */
#chapsScores {
  margin-top: 350px;
  margin-right: 370px;
  align-items: center;
  text-align: center;
  color: rgb(221, 221, 221);
  font-size: 1em;
  list-style-type: none;
}


/* <=================================================== Verdicts ========================================================> */

/* Correct */
#correct {
  text-shadow: 2px 1px 10px rgba(255,255,255,0), 3px 4px 30px rgba(221, 221, 221), 5px 6px 50px #19cf92, 7px 8px 180px #21c2b5, 9px 10px 150px #21548a;
  color: #3d5a7a;   
  text-align: center;
  font-weight: bolder;
  font-size: 85px;
}

#correctPic {
  background-image: url('../Media/choiceReactions_future project/correct.jpg');
  align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Falling money Animation adapted from Ref. https://codepen.io/lihz27/pen/bxpEbw Checkout lihz27 @ https://codepen.io/lihz27 I disagreed with some of it; and change some of the code, quite a bit; i. e. "text-align" should be "align-items," in my opinion, etc.*/
.RainBaby {
  align-items: center;
}

.RainBaby span {
  display: inline-block;
  margin: -235px 30px 27px  -18px;
  background: url("../Media/choiceReactions_future project/$100,000baby.jpg");
  background-size: contain;
  -webkit-animation: RainBaby 3s infinite  linear;
  -moz-animation: RainBaby 3s infinite  linear;
}

.RainBaby span:nth-child(5n+5) {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
}

.RainBaby span:nth-child(3n+2) {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}

.RainBaby span:nth-child(2n+5) {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
}

.RainBaby span:nth-child(3n+10) {
  -webkit-animation-delay: 2.7s;
  -moz-animation-delay: 2.7s;
}

.RainBaby span:nth-child(7n+2) {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
}

.RainBaby span:nth-child(4n+5) {
  -webkit-animation-delay: 5.5s;
  -moz-animation-delay: 5.5s;
}

.RainBaby span:nth-child(3n+7) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
}

@-webkit-keyframes RainBaby {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;

  -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;

  -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;

  -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes RainBaby {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;
    
  -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;
  
  -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    
  -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

#incorrect {
  color: red;
  text-align: center;
  font-size: 85px;
  font-weight: bold;
}

#incorrectPic {
  background-image: url('../Media/choiceReactions_future project/noWay.jpg');
  align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Incorrect */
.whyRain {
  align-items: center;
}

.whyRain span {
  display: inline-block;
  margin: -235px 30px 27px  -18px;
  background: url("../Media/choiceReactions_future project/uglyBoots.jpeg");
  background-size: contain;
  -webkit-animation: whyRain 3s infinite  linear;
  -moz-animation: whyRain 3s infinite  linear;
}

.whyRain span:nth-child(5n+5) {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
}

.whyRain span:nth-child(3n+2) {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}

.whyRain span:nth-child(2n+5) {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
}

.whyRain span:nth-child(3n+10) {
  -webkit-animation-delay: 2.7s;
  -moz-animation-delay: 2.7s;
}

.whyRain span:nth-child(7n+2) {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
}

.whyRain span:nth-child(4n+5) {
  -webkit-animation-delay: 5.5s;
  -moz-animation-delay: 5.5s;
}

.whyRain span:nth-child(3n+7) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
}

@-webkit-keyframes whyRain {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;

  -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;

  -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;

  -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes whyRain {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;
    
  -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;
  
  -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    
  -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}