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

body {
  font-family: "Righteous", cursive;
  text-shadow: 2px 2px #8dc5ce;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  background-image: url("Tesselation-Transition.jpeg");
  background-size: 100vw 100vh;
  background-repeat: repeat-y;
}

#info {
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

h2 {
  font-size: 30px;
  margin-bottom: 10px;
  margin-top: 30px;
}

#teams {
  display: none;
}

#listtitle {
  display: none;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}

h2 img {
  height: 25px;
}

input {
  font-family: "Righteous", cursive;
  border-radius: 50px;
  text-align: center;
  font-size: 20px;
  width: 160px;
  height: 30px;
  margin-bottom: 10px;
}

h3 {
  color: #d7e8fa;
}

button {
  margin: auto;
  border-radius: 50px;
  width: 160px;
  height: 47px;
  font-size: 20px;
  color: #d7e8fa;
  background-color: rgb(110 163 197);
  box-shadow: 0 8px #213441;
  cursor: pointer;
  position: relative;
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: stretch;
  border: solid 2px #6ea3c5;
}

#submit {
  cursor: not-allowed;
}

button:hover {
  filter: brightness(85%);
}

button:active {
  box-shadow: 0 5px #040607;
  position: relative;
  transform: translateY(4px);
}

/* new page */
div#pointspage {
  display: none;
  flex-direction: column;
}

input {
  background-color: rgb(135 184 206 / 54%);
  border: solid 2px #6ea3c5;
  height: 43px;
}

input,
select,
textarea {
  color: #d7e8fa;
}

div#teambox {
  margin: 20px 70px 0px 70px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.container {
  margin: 41px 20px;
  margin-top: 10px;
  border: 2px solid #94b2d6;
  border-radius: 20px;
  background-color: #85c2cdb3;
  width: 164px;
  height: 205px;
}

button {
  font-family: "Righteous", cursive;
}

.increase {
  background-color: #aad27cd4;
  box-shadow: 0 8px #435439;
  border: solid 2px #bbcbb2;
  width: 149px;
  display: flex;
}

.decrease {
  background-color: #ca2e48d4;
  box-shadow: 0 8px #490d1b;
  border: solid 2px #b48c94;
  width: 149px;
  display: flex;
}

div#refreshButtons {
  margin-top: 20px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}

#newgame,
#startover {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#winner {
  flex-direction: column;
  margin: 70px;
  font-size: 51px;
}

.animate__heartBeat {
  color: #224b54;
  text-shadow: 5px 0px #8dc5ce;
  margin-top: 15px;
}

/* responsive design */

@media (max-width: 399px) {
  h1 {
    font-size: clamp(3rem, 4rem + -3.3333vw, 4rem);
  }
}

@media (max-width: 490px) {
  div#teambox {
    display: flex;
  }
}