/* RESET */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
  font-family: "Red Hat Display";
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* *********************************************************************************************************************************** */

html, body {
  height: 100%;
  width: 100%;
}

.overlay{
  background-color: rgb(0,0,0,0.5);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  z-index:1000;
}

.main-container {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom right, white, 5%, rgb(86, 135, 205), 95%, white);
  /* background: linear-gradient(to top, white, 3%, rgb(27, 79, 235, 0.8)); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game-container-start { /* before "start game" */
  background: linear-gradient(to top, gray, 4%, black);
  box-shadow: 12px 10px 7px 15px rgba(0, 0, 0, 0.5);
  width: 95vw;
  height: 90vh;
  border-radius: 50px;
  /* padding: 20px 42px 55px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; */
  color: white;
  font-weight: 700;

  /* --- new --- */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3vh 3vw 9vh 3vw;
  justify-content: space-between;
}

.header {
  font-size: 1.2em;
  letter-spacing: 0.11em;
}

.game-buttons { /* container for all buttons */
  /* height: min(70%, 35vw); */ height: 60vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw; /* 20px */
  text-align: center;
  letter-spacing: 0.08em;
}

.europe, .usa, .worldwide { /* container for each label + button (which contains img) */
  /* height: 100%; */ height: 27vw;
  /* width: 31%; */ width: 27vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  font-size: max(1.4vw, 14px);
}

.game-buttons a { /* button wrapper */
  padding: 0px;
  width: 100%;
  height: 88%; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, white, 5%, black);
  /* text-shadow: 3px 3px 1px rgba(60, 90, 190, 0.8); */
  color: white;
  border-radius: 6vw;
  /* border: 3px solid whitesmoke; */
  font-weight: 700;
  box-shadow: -2px -2px 5px 2px rgba(255, 255, 255, 0.6);
  /* border: 0.2rem outset black; */
}

.start-buttons { /* actual button */
  padding: 0px;
  width: 100%;
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, white, 5%, black);
  /* text-shadow: 3px 3px 1px rgba(60, 90, 190, 0.8); */
  color: white;
  border-radius: 6vw;
  /* border: 3px solid whitesmoke; */
  font-weight: 700;
  border: 0.3rem outset black;
}

#usa-button img, #europe-button img, #worldwide-button img { /* img within button */
  height: 100%;
  width: 100%;
  /* border-radius: 70px; */ border-radius: 6vw;
}

.game-buttons a:hover {
  filter: brightness(1.25);
}

#worldwide a:hover {
  filter: none;
}

@media screen and (min-width: 601px) {
  #comingSoon { /* worldwide button currently disabled */
    opacity: 1;
    position: absolute;
    bottom: 40%;
    font-size: 1.6vw;
    font-weight: 600;
  }
}

@media screen and (max-width: 600px) {
  body {
    height: 275vw;
  }

  #game-one, #game-two {
    height: 100%;
  }

  .main-container {
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
  }

  .game-container-start {
    height: 100%;
    justify-content: start;
    background: linear-gradient(to right, gray, 1%, black, 98%, gray);
    padding-bottom: 5vh;
    padding-top: 5vh;
    gap: 9vh;
  }

  .game-buttons {
    flex-direction: column;
    justify-content: start;
    width: 60vw;
    height: 225vw;
    gap: 6%;
  }

  .game-buttons a {
    box-shadow: -2px -2px 4px 1px rgba(255, 255, 255, 0.6);
  }

  .europe, .usa, .worldwide {
    height: 62vw;
    width: 62vw;
    font-size: calc(14px + .5vw);
  }

  #comingSoon { /* worldwide button currently disabled */
    opacity: 1;
    position: relative;
    bottom: 32vw;
    font-size: 4vw;
    font-weight: 600;
  }
}

/* END FIRST PAGE */
/* --------------------------------------------------------------------------------------------------------------------------------------- */

#versionDisplayContainer {
  width: 52%;
  height: 52%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 1.5em;
  margin-bottom: 75px;
  letter-spacing: 0.08em;
}

#versionDisplayContainer div {
  height: 52%;
  width: 52%;
  border-radius: 2.5vw;
}

#versionDisplayContainer div>img {
  border-radius: 2.5vw;
}

#game-one > .main-container > .game-container-start, #game-two > .main-container > .game-container-start { /* center the version display */
  justify-content: center;

}

@media screen and (max-width: 600px) {
  #versionDisplayContainer {
    width: 45vw;
    height: 45vh;
    margin-bottom: 0%;
  }

  #versionDisplayContainer div {
    height: 55vh;
    width: 55vw;
  }

}

/* END VERSION DISPLAY */
/* --------------------------------------------------------------------------------------------------------------------------------------- */

.game-container-next { /* once game starts */
  background-color: black;
  box-shadow: 12px 10px 7px 15px rgba(0, 0, 0, 0.5);
  width:95%;
  height: 90%;
  border-radius: 50px;
  padding: 15px;
  display: flex;
  gap: 15px;
}

.city-image {
  border-radius: 40px;
  width: 70%;
}

.city-image img {
  border-radius: 40px;
  width: 100%;
  height: 100%;
}

.game-panel {
  width: 30%;
  border-radius: 40px;
  border: 2px solid white;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  padding: 10px;
  font-weight: 700;
  gap: 40px;
  background: linear-gradient(to top, gray, 2%, black)
}

.score {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 25px;
  padding-right: 25px;
  /* flex-grow: 2; */
  height: 6.5%;
  border-bottom: 2px solid white;
}

.questions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  justify-content: start;
  border-radius: 40px;
  /* flex-grow: 3; */
  height: 60%; 
}

@media screen and (max-width: 900px) { /* remove "Which city is this?" below 900px width */
    .questions h2 {
      position: relative;
      visibility: hidden;
    }
}

.questions h2 {
  font-size: 2vw; /* 1.75rem */
}

.choices {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
  position: relative;
}

.choices button {
  /* background-color: black; */
  background: linear-gradient(to bottom right, white, 5%, black);
  /* text-shadow: 3px 3px 1px rgba(60, 90, 190, 0.8); */
  color: white;
  border-radius: 40px;
  border: 1px solid whitesmoke;
  box-shadow: 2px 2px 4px 2px white;
  height: 3em;
  position: relative;
}

.choices button:active {
  background: linear-gradient(to bottom right, black, 20%, white, 90%, black);
  color: black;
}


@media screen and (min-width: 601px) {
  .choiceButtonHover:hover {
    background: linear-gradient(to bottom right, white, 20%, black);
  }

  .choices button:active {
    background: linear-gradient(to bottom right, white, 5%, black);
    color: white;
  }


  .changeOpacity { /* for the above message and picture at the start of the game
    /* opacity: 1; */
    transition: opacity 2s ease-in;
  }
  
  #leftSide h3 { /* "Can you guess the city/country?" */
    position: absolute;
    top: calc(44%);
    left: 25vw;
    font-size: 2vw;
    color: white;
  }

  .score {
    font-size: max(14px, 1.25vw);
  }

  .hints {
    width: 90%;
    /* flex-grow: 2; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    height: 20%;
    font-size: 18px;
    letter-spacing: .08vw;
  }
  
  #hintButton {
    padding-left: 12px;
    padding-right: 12px;
    color: white;
    border: outset 2px gray;
    border-radius: 15px;
    width: 11.5vw;
    height: 3em;
    background: linear-gradient(to right, rgb(35, 181, 58), 98%, gray);
    /* background: linear-gradient(to right, red, 4%, black, 4%, black, 97%, gray); */
    text-shadow: 2px 1px 6px black;
    font-size: 16px;
    letter-spacing: .06vw;
    box-shadow: 2px 2px 2px 2px black;
  }
  
  #hintButton:hover {
    filter: brightness(1.15);
    position: relative;
    height: 3.2em;
    width: 11.7vw;
  }
}

.chargeHintButton {
  transition: background-color 2s ease-out;
}

#answer {
  flex-grow: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#answer h2 {
  font-size: 2.5rem;
}

#answer p {
  font-size: 1.2rem;
  font-weight: 600;
}

@media screen and (max-width: 600px) {
  .game-container-next {
    height: 100%; /* height: 97%; */
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, gray, 4%, black),
                linear-gradient(to right, gray, 1%, black, 98%, gray); /* <-- not working */
    gap: 23px;
  }

  #leftSide { /* the same element with class '.city-image' above */
    height: 70%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: black;
    color: white;
    font-weight: 700;
    gap: 12px;
    background: transparent;
    position: relative;
  }

  .score {
    align-items: center;
    height: 8%;
    border: none;
    padding: 0px 8% 0px 8%;
    letter-spacing: 0.07em;
    font-size: max(14px, 3.7vw);
  }

  #leftSide img {
    height: 92%;
    border: outset 7px rgb(100, 100, 100, 0.8);
    object-fit: cover;
  }

  #leftSide h3 { /* "Can you guess the city/country?" */
    position: absolute;
    top: calc(50%);
    left: 12vw;
    font-size: 5vw;
  }

  .changeOpacity { /* for the above message and picture at the start of the game
    /* opacity: 1; */
    transition: opacity 2s ease-in;
  }

  .game-panel {
    height: calc(30% - 25px);
    width: 100%;
    /* background: linear-gradient(to right, gray, 1%, black, 98%, gray); */
    background: transparent;
    border: none;
    padding: 0%;
  }

  .questions {
    justify-content: center;
  }

  .choices {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 80%;
    padding: 0px 7% 0px 7%;
  }

  .choices button {
    /* width: 25vw; */
    width: 44%;
    box-shadow: 2px 2px 3px .7px white;
    letter-spacing: 0.07em;
  }

  .hints {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40%;
  }

  #hintButton {
    padding-left: 12px;
    padding-right: 12px;
    color: white;
    border: outset 2px gray;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgb(35, 181, 58), 98%, gray);
    /* background: linear-gradient(to right, red, 4%, black, 4%, black, 97%, gray); */
    text-shadow: 2px 1px 6px black;
    letter-spacing: .06vw;
    box-shadow: 2px 2px 2px 2px black;
    font-size: 1em;
  }

  .hintBrightness {
    transition: opacity 1s ease-in;
  }
}

.hintAttention {
  transition: filter 1s ease-out;
}

/* END GAME DISPLAY PAGE */
/* --------------------------------------------------------------------------------------------------------------------------------------- */

.game-container-end { /* styling for final game display" */
  background: linear-gradient(to top left, gray, 5%, black);
  box-shadow: 12px 10px 7px 15px rgba(0, 0, 0, 0.5);
  width:95%;
  height: 90%;
  border-radius: 50px;
  padding: 20px;
  display: flex;
  /* flex-direction: column; that's the main thing that changes */
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  gap: 20px;
}

.results {
  border: 2px solid rgb(20, 45, 253, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 95%;
  width: 74%;
  border-radius: 60px;
  padding: 25px 100px 30px;
  gap: 40px;
  background: linear-gradient(to bottom right, white, 0.5%, rgb(40, 65, 253, 0.6));
  /* box-shadow: 10px 6px 4px 4px rgba(255, 255, 255, 0.5); */
  box-shadow: 6px 2px 4px 6px rgba(120, 145, 253, 0.3), 7px 3px 4px 6px rgba(100, 125, 253, 0.35), 8px 4px 4px 6px rgba(80, 105, 253, 0.4),
  9px 5px 4px 6px rgba(60, 85, 253, 0.45), 10px 6px 4px 6px rgba(40, 65, 253, 0.5);
}

.calculating-container {
  border-bottom: 2px solid rgb(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  width: 70%;
  padding-bottom: 10px;
  text-align: center;
}

#calc {
  display: flex;
  justify-content: start;
  width: 80%;
}

#resultsHeader {
  border-bottom: 2px solid rgb(255, 255, 255, 0.8);
  width: 70%;
  padding-bottom: 10px;
  font-size: 1em;
  text-align: center;
}

.resultsFirstSection {
  /* background-color: white; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 30px;
  width: 100%;
  height: 80%;
}

.results-sections {
  width: 100%;
  height: 15%;
  /* background-color: rgb(0, 0, 0, 0.4); */
  background: linear-gradient(to top left, rgb(90, 90, 90, 0.8), 5%, white);
  color: black;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 20px;
  border-radius: 30px;
  font-size: 1.4em;
  font-weight: 800;
  padding: 20px;
  border: outset 3px rgb(122, 122, 122);
}

#resultline4 {
  font-size: 1.3em;
}

.results-sections p {
  width: 27%;
}

#resultline4 {
  height: 35%;
  align-items: start;
}

#resultline3 span {
  font-size: 1.2em;
}

.results-sections span {
  font-weight: 500;
}

#leftEnd {
  width: 13%;
  height: 95%;
  /* border: 3px solid whitesmoke; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-top: 75px;
}

#rightEnd {
  width: 13%;
  height: 95%;
  /* border: 3px solid whitesmoke; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-top: 75px;
}

#leftSideDiv {
  /* background: linear-gradient(to bottom, white, 3%, black); */
  /* box-shadow: 1px 1px 4px 4px rgb(245, 245, 245, 0.8); */
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  text-align: center;
  gap: 40px;
  /* border: 2px solid white; */
  padding: 10px 20px;
  /* border-radius: 30px; */
  font-weight: 400;
}

#rightSideDiv {
  /* background: linear-gradient(to bottom, white, 3%, black); */

  /* box-shadow: 1px 1px 4px 4px rgb(245, 245, 245, 0.8); */
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  text-align: center;
  gap: 40px;
  /* border: 2px solid white; */
  padding: 10px 20px 10px 30px;
  /* border-radius: 30px; */
  font-weight: 400;
}

#otherVersionsContainer {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.diffGameContainer {
  height: 40%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

.diffGameContainer label {
  font-weight: 600;
}

.new-game-button {
  width: 8vw;
  height: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-weight: 900;
  letter-spacing: .09rem;
  border: outset 3px black;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.new-game-button:hover {
  margin-right: -2px;
  margin-top: 2px;
}

/* END RESULTS PAGE (For screen size > 600px) */
/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* RESULTS PAGE ON SCREEN SIZE <= 600px */

@media screen and (max-width: 600px) {
  .game-container-end {
    height: 100%; /* height: 97%; */
    flex-direction: column;
    background: linear-gradient(to right, gray, 1%, black, 98%, gray);
    /* gap is 20px - set above */
  }
}

#resultsHeaderContainer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: -20vh;
}

#calcContainer {
  display: flex;
  justify-content: start;
  width: 38ch;
  font-size: 3.2vw;
}

.calcTransition {
  transition: background-color 4.2s ease-in-out;
}

#resultsContainer {
  height: 55vh;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.05em;
}

#resultsDisplay {
  height: 45vh;
  width: 100%;
  /* background-color: white; */
  background: linear-gradient(to right, white, 99%, gray);
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5vw;
  gap: 5px;
  padding-bottom: 10px;
  border: outset 4px black;
}

#evaluationType {
  height: calc(20%);
  width: 80%;
  /* border-bottom: solid 2px black; */
  display: flex;
  align-items: center;
  justify-content: center;
}

#evaluationType h3 {
  font-weight: 800;
  font-size: 5vw;
}

#evaluation {
  height: calc(80% - 30px);
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vw;
  border-radius: 5vw;
  /* box-shadow: inset 0px 0px 3px 5px blanchedalmond; */
  background: radial-gradient(white, 60%, rgb(86, 135, 205, 0.2));
  text-align: center;
  padding: 10px;
}



#swivelButtonsContainer {
  width: 100%;
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5vw;
}

#swivelButtonsContainer button {
  height: 90%;
  width: 20%;
  border-radius: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 5vh;
  border: outset 2px black;
  background: linear-gradient(to right, white, 90%, gray);
}

#nextGameButtonsContainer {
  display: flex;
  justify-content: space-around;
  width: 80%;
  height: 10vh;
  position: absolute;
  top: calc(30px + 1vw);
}

.nextGame1, .nextGame2, .nextGame3 {
  width: 15vw;
  height: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3vw;
  letter-spacing: 0.05em;
  align-items: center;
}

.nextGame1 label, .nextGame2 label, .nextGame3 label {
  font-size: 3vw;
}

.nextGameButton { /* selects all 3 next game buttons */
  width: 15vw;
  height: 15vw;
  border-radius: 3vw;
  background-size: 105%;
  background-repeat: no-repeat;
  background-position: center;
  border: outset 2px black;
}