body {
  background: url(images/worldmap.jpg);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

header {
  order: 0;
}

button,
.grid,
.start-over {
  background-color: rgb(255, 153, 0);
}

.jeopardy,
.welcome {
  background-color: rgba(84, 165, 209, 0.9);
}

span,
.footer,
header {
  background-color: rgba(0, 51, 102, 0.8);
}

button,
input,
p,
h1,
h2,
.continent,
.inline {
  font-family: 'Raleway', sans-serif;
}

main {
  display: block;
  order: 1;
}

.notify-player {
  font-weight: bold;
}

header,
footer {
  padding: 0.5% 0%;
}

p {
  text-align: left;
}

.quote {
  font-size: 100%;
  text-align: center;
}

.banner {
  color: rgb(255, 153, 0);
  font-weight: bolder;
  font-size: 150%;
}

p {
  font-size: x-large;
  padding: 0 10%;
  color: rgb(0, 51, 102);
}

h1,
h2 {
  font-weight: 700;
  font-size: xx-large;
  color: rgb(0, 51, 102);
}

ul {
  list-style: none;
  color: rgb(0, 51, 102);
  text-align: left;
  font-weight: 600;
  font-size: 140%;
}

button,
.quote,
.welcome-header,
.footer-content {
  color: rgb(228, 233, 237);
}

.grid {
  border-color: rgb(228, 233, 237);
  margin: 2% 3%;
  font-size: medium;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

.jeopardy {
  margin: 3% 18%;
  padding: 0.5%;
}

.jeopardy-header {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.continent {
  font-size: medium;
  font-weight: 600;
  text-transform: uppercase;
  padding: 5%;
  margin: 3%;
  color: rgb(0, 51, 102);
  background-color: rgb(228, 233, 237);
}

.americas-50,
.americas-100,
.americas-200,
.americas-500,
.europe-50,
.europe-100,
.europe-200,
.europe-500,
.asia-50,
.asia-100,
.asia-200,
.asia-500 {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  padding: 5%;
  background-color: rgba(84, 165, 209, 0.8);
  margin: 3% 18%;
}

.notification {
  border-style: double;
  background-color: rgba(84, 165, 209, 0.8);
  margin: 3% 18%;
}

.check-score,
.restart,
.notify-player {
  margin: 2%;
  padding: 1%;
}

.start {
  margin: 0 2%;
  padding: 1%;
  border-color: rgb(228, 233, 237);
  border-style: double;
}

.welcome {
  padding: 5% 10%;
  margin: 8%;
  display: block;
}

.main-p,
.footer-content,
h1,
h2,
button,
.continent,
p,
.notify-player,
.notification,
.user-form {
  text-align: center;
}

.user-input,
.start {
  padding: 2%;
}

span {
  color: rgb(238, 159, 40);
  padding: 0.5%;
}

.notification,
.jeopardy {
  display: none;
}

footer {
  position: static;
  bottom: 0;
  margin-top: 13%;
  order: 2;
}

.check-score,
.restart {
  padding: 3%;
}

li {
  margin: 0.5%;
}

.question {
  font-weight: 800;
}

.user-response {
  margin: 1%;
  padding: 1%;
}

.inline {
  display: inline;
  font-size: 60%;
}

a:hover {
  color: rgb(228, 233, 237);
}

a {
  color: rgb(238, 159, 40);
  text-decoration: none;
}

a:visited {
  text-decoration: underline;
}