*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  background: linear-gradient(153deg, rgba(97, 93, 173, 1) 35%, rgba(255, 200, 218, 1) 100%) fixed;
  font-size: 25px;
  color: white;
  text-align: center;
}

body {
  margin: auto;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.container {
  min-width: 80vmin;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.uvodni_name {
  width: 100%;
  font-size: 2rem;
  font-family: 'Lobster', cursive;
  font-weight: 500;
  margin: 0;
  padding: 2.5% 8% 2.5% 8%;
}

.menu_container {
  width: 100%;
  font-size: 1rem;
  justify-content: space-between;
  padding: 2.5% 0 2.5% 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-home {
  border: none;
  background-color: #1fcca4;
}

.menu {
  display: flex;
  gap: 0.2rem;
}

.button-home,
.button-reset {
  display: flex;
  justify-content: center;
  align-content: center;

  border-radius: 3px;
  padding: 3px;
}

.button-reset {
  background-color: #0197f6;
  border: none;
}

.game_play {
  width: 100%;
  aspect-ratio: 1/1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  border: 1px solid black;
}

.game_sq {
  margin: 0;
  padding: 0;
  border: 1px solid rgb(118, 100, 118);
  background-color: rgba(255, 255, 255, 0.29);
}

.game_properties {
  display: flex;
  gap: 10%
}

.button_player {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}

.button-reset:focus,
.button-reset:hover {
  background-color: #0090e9;
  outline: 1px solid rgb(255, 192, 245);
}

.button-home:focus,
.button-home:hover {
  background-color: #1cbb96;
  outline: 1px solid rgb(255, 192, 245);
}

.button-home:hover,
.button-reset:hover {
  box-shadow: 10px 7.5px 15px rgb(132, 0, 255), -10px 7.5px 15px rgb(255, 0, 170), -10px -7.5px 15px rgb(238, 128, 252), 10px -7.5px 15px rgb(156, 9, 87)
}

.game_sq:hover,
.game_sq:focus {
  background-color: #ffd8ffe1;
  outline: 1px solid rgb(255, 192, 245);
  z-index: 1;
}

.play_again {
  box-shadow: 10px 7.5px 15px rgb(132, 0, 255), -10px 7.5px 15px rgb(255, 0, 170), -10px -7.5px 15px rgb(238, 128, 252), 10px -7.5px 15px rgb(156, 9, 87)
}

/* ------------------------------JavaScript addition-----------------------------------------------------*/
@keyframes grow {
  0% {
    background-size: 10%;
  }

  50% {
    background-size: 50%;
  }

  100% {
    /*full size =70% */
    background-size: 70%;
  }
}

.board__field--circle {
  background-image: url("imgs/icons/circleColor.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 70%;
  background-position: center;
  animation: grow 0.25s linear;
}

.board__field--circle {
  fill: purple;
}

.board__field--cross {
  background-image: url("imgs/icons/crossColor.svg");
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
  animation: grow 0.25s linear;
}

.popup {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10;
  background: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);
  opacity: 80%;
  width: 30vw;
  min-height: 30%;
  justify-content: center;
  align-content: center;
  box-shadow: 10px 7.5px 15px rgb(132, 0, 255), -10px 7.5px 15px rgb(255, 0, 170), -10px -7.5px 15px rgb(238, 128, 252), 10px -7.5px 15px rgb(156, 9, 87)
}

.popup h1 {

  margin: auto;
  font-family: 'Lobster', cursive;
}

.overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(243, 105, 195, 0.345);
  pointer-events: none;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}