/* My Variables */
:root {
  --quizQBackGround: rgb(253, 123, 1);
  --quizQfontColor: rgb(26, 13, 197);
}

/* Universal selector */
* {
  margin: 0;
  padding: 0;
}

/* Body section */
body {
  display: flex;
  flex-direction: column;
  font-family: 'Helvetica, sans-serif';
  font-size: 22px;
  background: url("../media/field.jpg");
  background-position: center;
  /* background-repeat: no-repeat; */
  /* min-height: 100vh; */
  /* height: fit-content; */
  background-color: var(--quizQBackGround);
}

/* Header Section */
header {
  display: flex;
  /* Flex container to display the child elements as flex with space between and wrap */
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  color: var(--quizQfontColor);
  background-color: var(--quizQBackGround);
  height: 70px;
  /* font-size: 4vw; */
  padding: 10px, 10px, 10px, 10px;
  font-family: 'Merienda';
  font-size: 22px;
  border-top: var(--quizQfontColor);
  border-bottom: var(--quizQfontColor);
  border-style: inset;
}

header #welcome {
  font-size: 34px;
}

#timer {
  font-size: large;
}

.highScorebtn {
  font-size: large;
  color: var(--quizQfontColor);
  background-color: white;
  margin: 4px;
  padding: 3px;
}

#main {
  display: flex;
  /* Flex container to display the child elements as flex with space between and wrap */
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  visibility: visible;
}

#mainB {
  visibility: hidden;
}

#gridContainer {
  display: flex;
  /* Flex container to display the child elements as flex with space between and wrap */
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}

.btn {
  visibility: hidden;
}

.startBtn {
  visibility: visible;
  font-size: larger;
  color: var(--quizQfontColor);
  background-color: var(--quizQBackGround);
  margin: 4px;
  padding: 3px;
}

.startBtnB {
  visibility: hidden;
}

.btnB {
  visibility: visible;
  font-size: larger;
  color: var(--quizQfontColor);
  background-color: var(--quizQBackGround);
  margin: 4px;
  padding: 3px;
}

.endGame {
  display: flex;
  /* Flex container to display the child elements as flex with space between and wrap */
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  color: var(--quizQfontColor);
  background-color: var(--quizQBackGround);
  height: 70px;
  font-size: 8vw;
  padding: 10px, 10px, 10px, 10px;
  font-family: 'Merienda';
  font-size: 22px;
  border-top: var(--quizQfontColor);
  border-bottom: var(--quizQfontColor);
  border-style: inset;
}

#questionDisplay {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  padding: 14px;
  color: white;
  text-shadow: 2.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

#aRod {
  position: fixed;
  right: 27%;
}

footer {
  position: sticky;
  align-self: center;
  color: chartreuse;
  text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

input {
  font-size: 24px;
}

#audio {
  background-color: rgba(0, 0, 0, 0);
}