* {
  font-family: sans-serif;
  font-size: 3.125vw;
  text-shadow: 0px 0px 0.26vw;
  user-select: none;
  color: rgb(221, 221, 221);
  letter-spacing: 0.104vw;
  white-space: nowrap;
  max-width: 100%;
}

body {
  background-color: rgb(0, 0, 31);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

h3 {
  margin: 0;
}

h4 {
  margin: 0;
}

*:focus {
    outline: none;
}

button {
  transition: transform .2s;
  letter-spacing: 0.104vw;
  color: beige;
  /* background-color: darkblue; */
  background: none;
  border: none;
  border-radius: 1.302vw;
  padding: 0.781vw;
  padding-left: 1.563vw;
  padding-right: 1.563vw;
  font-size: 2.083vw;
  box-shadow: 0px 0px 2.604vw, 0px 0px 0.521vw inset;
}

button:focus {
  transform: scale(1.05);
}

button:hover {
  transform: scale(1.05);
}

button:active {
  transform: scale(0.95);
}

.game {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  min-height: 100vh;
}

#rolling-button-pos-wrapper {
  /* background-color: aqua; */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  text-align: center;
  width: 100%;
  height: 20%;
  /* min-width: 1500px; */
}

#rolling-button-pos-wrapper > * {
  flex: 1;
}

#rolling-images-div {
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36vw;
  height: 36vw;
}

.game-board-pos-wrapper {
  /* background-color: cyan; */
  position: relative;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
}

.game-board {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  text-align: center;
  align-items: center;
  /* background-color: darkgreen; */
  height: 100%;
  width: 85%;
}

#last-score-and-game-header {
  /* background-color: green; */
  /* color: beige; */
  /* border: solid; */
  /* border-radius: 0.781vw; */
  display: flex;
  /* background-color: darkblue; */
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* width: 50%; */
  /* color: beige; */
  /* border: solid; */
  /* border-radius: 0.781vw; */
}

#game-header {
  color: rgba(221, 221, 221, 0.7);
  /* text-shadow: 0px 0px 0.16vw rgb(221, 221, 221); */
}

#main-title {
  font-size: 5.125vw;
  text-shadow: 0vw 0.521vw 0vw rgb(52, 91, 177), 0px 0.521vw 0.26vw rgb(52, 91, 177), 0px 0vw 0.26vw;
}

#rolling-button {
  display: flex;
  /* background-color: greenyellow; */
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  align-items: center;
  /* width: 50%; */
  /* color: beige; */
  /* border: solid; */
  /* border-radius: 0.781vw; */
}

#hint-div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
  align-items: center;
  /* background-color: rgb(0, 0, 100);
  border-radius: 0.781vw; */
  /* border-radius: 0.781vw; */
  /* border-style: solid;
  border-color: rgb(199, 199, 199);
  border-width: 0.521vw; */
}

#hint {
  font-size: 8.125vw;
  text-shadow: 0vw 0.521vw 0vw rgb(52, 91, 177), 0px 0.521vw 0.26vw rgb(52, 91, 177), 0px 0vw 0.26vw;
  /* text-shadow: 0px 0px 1.302vw red; */
}

#format-hint {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#num-letters {
  text-shadow: 0vw 0.321vw 0vw rgb(52, 91, 177), 0px 0.321vw 0.26vw rgb(52, 91, 177), 0px 0vw 0.26vw;
}

#city-format {
  text-shadow: 0vw 0.321vw 0vw rgb(52, 91, 177), 0px 0.321vw 0.26vw rgb(52, 91, 177), 0px 0vw 0.26vw;
}

#rolling-images {
  /* background-color: aqua; */
  /* border: solid; */
  border-radius: 0.781vw;
  /* display: none; */
  width: 100%;
  height: 100%;
  /* aspect-ratio: 1 / 1; */
  box-shadow: 0px 0px 0.604vw;
  /* animation: imageChange 0.3s ease-out; */
}

#stopwatch {
  font-size: 3.125vw;
}

#submit-input {
  background-color: rgb(14, 22, 92);
  border: solid;
  border-color: beige;
  color: beige;
  border-radius: 0.781vw;
  border-width: 0.200vw;
  padding: 0.781vw;
  text-transform: uppercase;
  font-size: 1.563vw;
}

#submit-input::placeholder {
  color: rgb(129, 129, 125);
}

@keyframes imageChange {
  0% { opacity: 0; scale: 0.95; }
  100% { opacity: 1; scale: 1; }
}

.anime-image {
  animation: imageChange 0.5s ease-out;
}

@keyframes responseAnime {
  0% {
    rotate: -90deg;
    scale: 0;
  }
  100% {
    rotate: 0deg;
    scale: 1;
  }
}

.anime-res {
  animation: responseAnime 0.5s ease-out;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.042vw;
}

li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0vw;
  justify-content: space-around;
  background-color: rgb(51, 51, 80);
  padding: 2.083vw;
  border-radius: 1.042vw;
}

p {
  margin: 0;
}

#description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 5.042vw;
  background-color: rgb(35, 35, 59);
  padding-top: 2.604vw;
  padding-bottom: 2.604vw;
  border-style: solid;
  border-color: rgb(23, 23, 44);
  border-width: 0.521vw 0vw 0vw;
}

#mock-image {
  width: 32.49948vw;
  height: 20.833vw;
  border-radius: 0.781vw;
}

#mock-dep-example {
  font-size: 7.125vw;
  text-shadow: 0vw 0.521vw 0vw rgb(52, 91, 177), 0px 0.521vw 0.26vw rgb(52, 91, 177), 0px 0vw 0.26vw;
}

#mock-format {
  text-shadow: 0vw 0.521vw 0vw rgb(52, 91, 177), 0px 0.521vw 0.26vw rgb(52, 91, 177), 0px 0vw 0.26vw;
}

#footer-kiffance {
  white-space: normal;
  padding-left: 3.125vw;
  padding-right: 3.125vw;
}

.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* margin-bottom: 5.208vw; */
  gap: 2.604vw;
}

#loading-screen {
  display: none;
}