/* Your styles should be mobile-first and responsive */

/** 
  * If you are unclear on how to utilize a mobile-first, responsive technique to write your CSS, here is an example: 
  *
  * https://github.com/andreacardybailey/responsive_example/blob/master/styles/responsive-base.css 
  *
*/
/*mobile first*/
body {
  background-color: #98fb98;
  font-family: 'Lucidia Bright';
  color: #082213;
  font-size: 18px;
  font-weight: 600;
}

header {
  text-align: center;
}

h1 {
  display: inline-block;
}

ul {
  list-style: none;
}

ul.tracker {
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
}

img {
  width: 350px;
  height: 350px;
  margin-bottom: 15px;
}

#start-view {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#question-view {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#question-view form.radio {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
}

#question-view li {
  display: flex;
  justify-content: center;
  width: 90%;
  margin-bottom: 15px;
  font-size: 18px;
}

#feedback-view-correct {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#feedback-view-incorrect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#results-view {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*tablet*/

@media (min-width: 700px) {
  body {
   width: 80%;
   margin: 0 auto;
   font-size: 20px;
   background-color: #e0ffff;
   color: #0000FF;
  }
}

/*desktop*/
@media (min-width: 1024px) {
  body {
    background-color: #d6d6d6;
    font-family: 'Lucida Sans';
    color: #4b6319;
    font-size: 24px;
    font-weight: 600;
  }
}