@import url("https://fonts.googleapis.com/css2?family=Anybody:wght@500&display=swap");

* {
  margin: 0%;
  padding: 0%;
  font-family: "Anybody", cursive;
}

body {
  background-color: gray;
  background-size: cover;
  background-position: top;
}

nav {
  padding: 1rem;
}

header li {
  display: inline;
  padding: 0 1rem;
}

header ul {
  list-style: none;
}

section {
  position: relative;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.hidden {
  display: none;
}

ul {
  margin-top: 10px;
}

ul li {
  list-style: none;
  margin-bottom: 12px;
}

input {
  margin-top: 0.5rem;
  width: 200px;
  height: 20px;
  border-radius: 10px;
  padding: 5px 7.5px;
}

.title {
  margin-top: 10%;
  font-size: 7.5rem;
  margin-bottom: 1rem;
  color: white;
  text-shadow: 8px 8px 16px black;
}

.subtitle {
  font-size: 3rem;
  margin-bottom: 3rem;
  color: white;
  text-shadow: 8px 8px 16px black;
}

#start-quiz-button {
  background-color: white;
  color: black;
  padding: 12px;
}

button {
  width: 150px;
  cursor: pointer;
  padding: 2px;
  box-shadow: 8px 8px 16px black;
  color: black;
}

#highscores {
  cursor: pointer;
  font-size: 1.5rem;
  color: white;
}

.questionAsked {
  font-size: 2.5rem;
  color: white;
  text-shadow: 8px 8px 16px black;
  padding: 12px;
}

.timer {
  margin-top: 1rem;
  font-size: 4rem;
  color: white;
  text-shadow: 8px 8px 16px black;
}

.multipleChoice {
  padding: 12px 5px;
  width: 210px;
  background-color: white;
  margin-top: 1rem;
  font-size: 1rem;
}

img {
  margin-top: 1rem;
  width: 390px;
  height: 350px;
  box-shadow: 8px 8px 16px black;
  border: 5px #ffe15d solid;
}

.feedback {
  font-size: 1.75rem;
  color: lightskyblue;
  text-shadow: 8px 8px 16px black;
  padding: 5px;
}

.ansOutput {
  font-size: 2.5rem;
  color: white;
  text-shadow: 8px 8px 16px black;
  padding: 5px;
}

.gameOver {
  font-size: 7rem;
  font-weight: bold;
  color: red;
  text-shadow: 8px 8px 16px black;
  padding: 5px;
}

.lastButtons {
  margin-top: 2rem;
  padding: 7.5px 7.5px;
  width: 105px;
  background-color: white;
  font-size: 1rem;
  color: black;
}

.score {
  font-size: 2.5rem;
  color: lightskyblue;
  text-shadow: 8px 8px 16px black;
  padding-bottom: 2rem;
}

.finalScore {
  color: #ffe15d;
}

.urName {
  font-size: 1.25rem;
  color: white;
  text-shadow: 8px 8px 16px black;
}

table {
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

td {
  border: 2px black solid;
  color: white;
  padding: 6px;
  font-size: 1.25rem;
  background-color: #6b728e;
  box-shadow: 8px 8px 16px black;
}

th {
  border: 2px black solid;
  background-color: whitesmoke;
  padding: 12px;
  font-size: 1.75rem;
  box-shadow: 8px 8px 16px black;
}

.noHighscores {
  font-size: 5rem;
  color: white;
  text-shadow: 8px 8px 16px black;
  padding: 5px;
  margin-bottom: 2rem;
}

main {
  text-align: center;
}

/* Background Styles */
.bg0 {
  background-image: url(../images/goat.png);
}

.bg1 {
  background-image: url(../images/uclfinal.png);
}

.bg2 {
  background-image: url(../images/depression.png);
}

.bg3 {
  background-image: url(../images/goats.png);
}

.bg4 {
  background-image: url(../images/jogabonito.png);
}

.bg5 {
  background-image: url(../images/lpool.png);
}

.bg6 {
  background-image: url(../images/magic.png);
}

.bg7 {
  background-image: url(../images/portrait.png);
}

.bg8 {
  background-image: url(../images/ranieri.png);
}

.bg9 {
  background-image: url(../images/rossonero.png);
}

.bg10 {
  background-image: url(../images/war.png);
}

.bg11 {
  background-image: url(../images/cheat.png);
}

.bg12 {
  background-image: url(../images/flyingdutch.png);
}

.bg13 {
  background-image: url(../images/greatness.png);
}

.bg14 {
  background-image: url(../images/happiness.png);
}

.bg15 {
  background-image: url(../images/ibelongtojesus.png);
}

.bg16 {
  background-image: url(../images/legends.png);
}

.bg17 {
  background-image: url(../images/lifesaver.png);
}

.bg18 {
  background-image: url(../images/sadness.png);
}

.bg19 {
  background-image: url(../images/thanks.png);
}

.bg20 {
  background-image: url(../images/crash.png);
}

@media only screen and (max-width: 450px) {
  .title {
    margin-top: 50%;
    font-size: 3rem;
  }

  .subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }

  #start-quiz-button {
    padding: 8px;
  }

  button {
    width: 110px;
  }

  #highscores {
    font-size: 0.75rem;
  }

  .questionAsked,
  .feedback {
    font-size: 1.25rem;
  }

  .timer,
  .score {
    font-size: 1.75rem;
  }

  .multipleChoice {
    padding: 10px 5px;
    width: 150px;
    margin-top: 0.75rem;
    font-size: 0.7rem;
  }

  img {
    margin-top: 1rem;
    width: 290px;
    height: 250px;
  }

  .ansOutput {
    font-size: 2rem;
  }

  .gameOver {
    font-size: 3rem;
  }

  .urName {
    font-size: 1rem;
  }

  .lastButtons {
    font-size: 0.75rem;
    width: 80px;
  }

  .noHighscores {
    font-size: 2rem;
    margin-bottom: 0rem;
    margin-top: 6rem;
  }

  .bg0 {
    background-image: url(../images/phoneDevice/argentine.png);
  }

  .bg1 {
    background-image: url(../images/phoneDevice/badboy.png);
  }

  .bg2 {
    background-image: url(../images/phoneDevice/beckenbauer.png);
  }

  .bg3 {
    background-image: url(../images/phoneDevice/becks.png);
  }

  .bg4 {
    background-image: url(../images/phoneDevice/comander.png);
  }

  .bg5 {
    background-image: url(../images/phoneDevice/cruyff.png);
  }

  .bg6 {
    background-image: url(../images/phoneDevice/curve.png);
  }

  .bg7 {
    background-image: url(../images/phoneDevice/dinho.png);
  }

  .bg8 {
    background-image: url(../images/phoneDevice/divino.png);
  }

  .bg9 {
    background-image: url(../images/phoneDevice/dream.png);
  }

  .bg10 {
    background-image: url(../images/phoneDevice/fabregas.png);
  }

  .bg11 {
    background-image: url(../images/phoneDevice/giggs.png);
  }

  .bg12 {
    background-image: url(../images/phoneDevice/gladiatore.png);
  }

  .bg13 {
    background-image: url(../images/phoneDevice/goatime.png);
  }

  .bg14 {
    background-image: url(../images/phoneDevice/magestic.png);
  }

  .bg15 {
    background-image: url(../images/phoneDevice/mou.png);
  }

  .bg16 {
    background-image: url(../images/phoneDevice/orei.png);
  }

  .bg17 {
    background-image: url(../images/phoneDevice/poetry.png);
  }

  .bg18 {
    background-image: url(../images/phoneDevice/nazario.png);
  }

  .bg19 {
    background-image: url(../images/phoneDevice/wallitalian.png);
  }

  .bg20 {
    background-image: url(../images/phoneDevice/zizou.png);
  }
}