/* GENERAL */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --bg-green: linear-gradient(
    90deg,
    rgba(4, 57, 46, 1) 0%,
    rgba(0, 153, 102, 1) 100%
  );
  --bg-red: linear-gradient(90deg, rgb(39, 0, 0) 0%, rgb(149, 0, 0) 100%);
  --bg-brown: linear-gradient(
    90deg,
    rgba(99, 61, 0, 1) 0%,
    rgba(149, 93, 0, 1) 100%
  );
  --bg-white: white;
  --bg-modal: #0e110eaf;
  --text-white: white;
  --text-dark: rgb(54, 54, 54);
  --text-light: #c7c7c7;
  --text-gold: rgb(255, 217, 0);
  --dark: #080808;
  --border: 0.1rem solid rgb(224, 224, 224);
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  font-family: "Poppins", sans-serif;
  background: var(--bg-green);
}

h1 {
  margin: 0;
  font-size: 1rem;
}

h1:hover,
h2:hover {
  cursor: default;
}

/* INFO */

#info {
  text-align: center;
  width: 15rem;
  color: var(--text-gold);
}

#info__title {
  font-size: 2rem;
}

.info__player {
  display: flex;
  justify-content: space-between;
  margin: 1rem;
  padding: 0.5rem;
  border-radius: 0.3rem;
  border: var(--border);
  color: var(--dark);
  background: var(--bg-white);
}

.info__player__icon {
  height: 1.3rem;
  padding-top: 0.13rem;
}

.cross {
  background-image: url(assets/cross.png);
}

.circle {
  background-image: url(assets/circle.png);
}

.cross,
.circle {
  background-size: cover;
}

/* GRID */

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 25rem;
  width: 25rem;
  grid-gap: 0.4rem;
  padding: 0.4rem;
  border-radius: 0.5rem;
  background: var(--bg-brown);
}

.grid__square {
  background-color: var(--bg-white);
  border-radius: 0.3rem;
  border: var(--border);
}

.grid__square:hover {
  cursor: pointer;
}

/* INSTRUCTIONS */

#instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15rem;
}

#instructions__text {
  text-align: center;
  font-size: 1rem;
  color: var(--text-white);
}

#instructions__btn {
  cursor: pointer;
  width: 10rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 2rem;
  background: var(--dark);
  border: var(--border);
  color: var(--text-white);
}

#instructions__btn:active {
  transform: translateY(0.125rem);
}

/* MODAL */

#modal {
  display: none;
  align-items: center;
  position: absolute;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: var(--bg-modal);
}

#modal__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 65%;
  width: 40%;
  border-radius: 5rem;
  color: var(--text-white);
  background: var(--bg-red);
  border: var(--dark) solid 0.1rem;
}

/* FORM */

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  display: none;
}

input {
  margin: 1.25rem;
  font-size: 1rem;
  border-radius: 2rem;
  padding: 0.625rem 1.25rem;
}

::placeholder {
  font-style: italic;
}

input[type="submit"]:active {
  transform: translateY(0.125rem);
}

/* MEDIA QUERIES */

@media (max-width: 1100px) {
  #grid {
    width: 18.75rem;
    height: 18.75rem;
  }
  #info__title {
    margin: 0 0 1rem;
  }
  body {
    align-content: center;
  }
  #modal__content {
    text-align: center;
    height: 60%;
    width: 80%;
  }
  input {
    width: 10rem;
  }
}