@import url("https://fonts.googleapis.com/css2?family=Electrolize&family=Nova+Mono&family=PT+Mono&family=Quicksand:wght@500");

:root {
  --springgreen: springgreen;
  --darkslategray: darkslategray;
  --darkcyan: darkcyan;
  --cyan: cyan;
  --cyan-60: rgba(0, 255, 255, 0.6);
}

:root.default-theme {
  --main-color: var(--springgreen);
  --background-color-dark: var(--darkslategray);
  --background-color-light: var(--darkcyan);
  --accent-color: var(--cyan);
  --accent-color-60: var(--cyan-60);
}

html {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  /* border: 1px solid red; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
}

body {
  height: 100vh;
  background-color: var(--background-color-dark);
  color: var(--main-color);
  font-family: "Quicksand", Tahoma, Geneva, Verdana, sans-serif;
  /* text-shadow: 0px 0px 9px; */
  margin: 0px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background-color: var(--background-color-light);
  padding: 10px;
}

.players {
  display: flex;
  justify-content: space-evenly;
}

.player-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 50%;
}

.input-name {
  padding: 8px;
  border: 2px solid var(--accent-color);
  border-radius: 10px;
  outline: none;
  width: 92%;
  color: var(--accent-color);
  background-color: var(--background-color-light);
  font-size: large;
  text-align: center;
  margin: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input-name::placeholder {
  color: var(--accent-color-60);
}

.marker {
  font-size: xx-large;
}

.marker.active {
  color: springgreen;
  text-shadow: 0 0 4px #00ff28, 0 0 8px #00ffff;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: springgreen;
}

main {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.message-display {
  color: var(--background-color-dark);
  background-color: var(--main-color);
  height: 3rem;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  padding: 10px;
}

.message-display.off {
  background-color: var(--background-color-dark);
}

.container-restart {
  display: flex;
  justify-content: center;
  height: 20vh;
}

.btn-restart {
  width: 4em;
  background-color: var(--background-color-dark);
  border: none;
  align-self: center;
  margin: 40px 0px 30px;
}

.icon-restart {
  height: 3em;
  width: 3em;
  fill: var(--accent-color);
}

.icon-restart.off {
  fill: var(--background-color-dark);
}

.game-board {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0px 0px 40px;
}

.game-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
  height: 25vmin;
  width: 25vmin;
  background-color: var(--background-color-light);
  border-radius: 1rem;
  padding: 10px;
  margin: 1px;
}

.game-cell.empty:hover {
  border: 3px dashed var(--main-color);
}

.win {
  border: 3px solid var(--main-color);
  text-shadow: 0 0 4px #00ff28, 0 0 8px #00ffff;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: springgreen;
}

footer {
  display: flex;
  background-color: var(--background-color-light);
  justify-content: space-evenly;
  padding: 5px;
}

footer a {
  color: var(--accent-color);
}

footer a:hover {
  color: var(--accent-color-60);
}

/* For larger screens */
@media only screen and (min-width: 600px) {
  .game-cell {
    height: 18vmin;
    width: 18vmin;
  }
}