main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  
}

header {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-radius: 120px;
  text-shadow: 1px 8px 1px rgba(53,53,53,0.09);
  margin: 40px 20px 0px 20px; 
}

h1 {
  font-family: Impact, Rubik Mono One, Charcoal, sans-serif;
  font-size: 40px;
  letter-spacing: 4.8px;
  word-spacing: -2.4px;
  color: #000000;
  font-weight: 400;
  text-decoration: none solid rgb(68, 68, 68);
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

h3 {
  text-align: center;
  font-weight: 500;
  font-size: 22px;
}

p {
  font-family: Geneva, Verdana, sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 4px;
}

.welcome-message {
  margin: 0px;
  margin-top: 60px;
}

.feedback-image-containers {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-right: 3%;
}

.robot-container {
  display: flex;
  justify-content: center;
}

.robot-image {
  width: 40%;
}

progress[value]{
  width: 60%;
  height: 20px;
}

.progress-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.percentage {
  display: flex;
  justify-content: center;
}

.question-text-css {
  font-family: Impact, Rubik Mono One, Charcoal, sans-serif;
  font-size: 20px;
  text-align: center;
  letter-spacing: 4.8px;
  word-spacing: -2.4px;
  color: #000000;
  font-weight: 400;
  text-decoration: none solid rgb(68, 68, 68);
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
  margin-bottom: 45px;
  margin-left: 4px;
  margin-right: 4px;
}

.question-form-css {
  margin: 0px 25px 0px 25px;
}

.info {
  border: solid #ccc 2px;
  margin: 0px 40px 20px 40px;
}

.score-card {
  display: flex;
  justify-content: center;
  font-family: Impact, Rubik Mono One, Charcoal, sans-serif;
  font-size: 22px;
  letter-spacing: 4.8px;
  word-spacing: -2.4px;
  color: #000000;
  font-weight: 400;
  text-decoration: none solid rgb(68, 68, 68);
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
  margin-top: 10px;
  text-align: center;
}

form {
  margin: 45px;
}

hr {
  margin: auto;
  width: 20%;
}

.button-wrapper {
  display: flex;
  justify-content: center;
  margin: 25px;
}

.correct {
  font-family: Impact, Rubik Mono One, Charcoal, sans-serif;
  font-size: 32px;
  color: rgb(81, 231, 81);
  
}

.wrong {
  font-family: Impact, Rubik Mono One, Charcoal, sans-serif;
  font-size: 32px;
  color: rgb(231, 81, 81);
  
}

/* Submit Button Styling */

.myButton {
	box-shadow: 1px 3px 0px 3px #899599;
  background:linear-gradient(to bottom, #ededed 5%, 
   100%);
	background-color:#ededed;
	border-radius:10px;
	border: 2px solid #0c8bf3;
	display:inline-block;
	cursor:pointer;
	color:#474747;
	font-family: Impact, Rubik Mono One, Charcoal, sans-serif;
	font-size:22px;
	padding:9px 54px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
}
.myButton:hover {
	background:linear-gradient(to bottom, #bab1ba38 5%, #ededed 50%);
	background-color:#bab1ba;
}
.myButton:active {
	position:relative;
	top:1px;
}

/* -----Radio Buttons Styling---------- */

.container-css {
  font-family: Geneva, Verdana, sans-serif;
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 20px;
  margin-left: 5%;
}

.container-css input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

.container-css:hover input ~ .checkmark {
  background-color: #ccc;
}

.container-css input:checked ~ .checkmark {
  background-color: #0c8bf3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container-css input:checked ~ .checkmark:after {
  display: block;
}

.container-css .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* -----Animations---------- */

.bounce-animate  {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; 
  animation-duration: 3.5s;
}

.fadeIn-animate  {
  display: inline-block;
  margin: 0 0.5rem;

  animation: fadeIn; 
  animation-duration: .7s; 
}

.rotate-animate {
  display: inline-block;
  margin: 0 0.5rem;

  animation: pulse; 
  animation-duration: 1s; 
}

.shake-animate {
  display: inline-block;
  margin: 0 0.5rem;

  animation: headShake; 
  animation-duration: 3.2s; 
}


/* -----Media Queries---------- */

@media all and (min-width: 480px) {
  
  .question-form-css {
    width: 600px;
  }
  .question-text-css {
    font-size: 32px;
  }

  .score-card {
    font-size: 26px;
  }

  .robot-image {
    width: 35%;
  }

  h1 {
    font-size: 58px;
  }

  .container-css {
    font-size: 22px;
  }
}