* {
  margin: 0;
  padding: 0;
}

:root {
  /* player O color properties */
  --playerO-color: 0, 200, 255;
  --playerO-color-alpha: rgba(var(--playerO-color), 0.8);
  --playerO-color-small-alpha: rgba(var(--playerO-color), 0.15);
  --playerO-glow: 0 0 5px var(--playerO-color-alpha);
  --playerO-small-glow: 0 0 1px var(--playerO-color-alpha);
  --playerO-dark: rgba(0, 113, 141, 0.15);
  --playerO-border: rgb(0, 29, 36);

  /* player X color properties */
  --playerX-color: 255, 0, 170;
  --playerX-color-alpha: rgba(var(--playerX-color), 0.8);
  --playerX-color-small-alpha: rgba(var(--playerX-color), 0.15);
  --playerX-glow: 0 0 5px var(--playerX-color-alpha);
  --playerX-small-glow: 0 0 1px var(--playerX-color-alpha);
  --playerX-dark: rgba(152, 0, 101, 0.15);
  --playerX-border: rgb(48, 0, 32);

  /* standard color properties */
  --background-color-primary: 59, 44, 66;
  --background-color-secondary: 38, 28, 43;
  --background-color-secondary-alpha: rgba(var(--background-color-secondary), 0.5);
  --background-color-secondary-small-alpha: rgba(var(--background-color-secondary), 0.15);
  --text-color: 156, 139, 165;
  --text-color-alpha: rgba(var(--text-color), 0.8);

  /* fonts */
  --font-family: 'Roboto', sans-serif;
}

@font-face {
  font-family: "NeonFont";
  src: url("assets/NeonFont.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: rgb(var(--background-color-primary));
  font-family: "NeonFont", sans-serif;
  padding: 15px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  font-size: 36px;
}

header span.neon {
  color: rgb(var(--playerO-color));
  filter: drop-shadow(var(--playerO-glow));
}

header span.tictactoe {
  color: rgb(var(--playerX-color));
  filter: drop-shadow(var(--playerX-glow));
}

.github-repo-link {
  font-family: var(--font-family);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 8px;
  color: rgb(var(--text-color));
  background-color: rgb(var(--background-color-secondary));
  padding: 8px 12px;
  border-radius: 10px;
  line-height: 1;
}

.github-icon {
  display: block;
  height: 24px;
  width: auto;
}

.github-repo-link p {
  padding-top: 2px;
}

main {
  font-family: var(--font-family);
  background-color: rgb(var(--background-color-primary));
  box-shadow: 0px 3px 10px rgb(var(--background-color-secondary)) inset;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-board {
  width: max(80%, 360px);
  display: flex;
  justify-content: space-between;
}

.player {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.left {
  background-color: var(--playerO-dark);
  color: rgb(var(--playerO-color));
  border-top: 2px solid var(--playerO-border);
  border-left: 2px solid var(--playerO-border);
  border-top-left-radius: 25px;
  justify-content: flex-start;
}

.right {
  background-color: var(--playerX-dark);
  color: rgb(var(--playerX-color));
  border-top: 2px solid var(--playerX-border);
  border-right: 2px solid var(--playerX-border);
  border-top-right-radius: 25px;
  justify-content: flex-end;
}

.ties {
  background-color: var(--background-color-secondary-small-alpha);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  border-top: 2px solid rgb(22, 16, 26);
  flex-shrink: 0;
}

.ties p {
  color: rgb(var(--text-color));
  font-size: 12px;
}

.ties p.score {
  font-size: 20px;
  color: white;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.player-name {
  font-size: 16px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.score {
  flex-shrink: 0;
  font-size: 30px;
}

.left .score {
  filter: drop-shadow(var(--playerO-glow));
  margin-left: auto;
  padding-right: 10px;
}

.right .score {
  filter: drop-shadow(var(--playerX-glow));
  margin-right: auto;
  padding-left: 10px;
}

.singular-neon-O,
.singular-neon-X {
  height: 43px;
  width: auto;
  padding: 5px;
  flex-shrink: 0;
}

.singular-neon-O {
  background-color: var(--playerO-color-small-alpha);
  border-top-left-radius: 25px;
}

.singular-neon-X {
  background-color: var(--playerX-color-small-alpha);
  border-top-right-radius: 25px;
}

.singular-neon-O circle {
  fill: none;
  stroke: rgb(var(--playerO-color));
  stroke-width: 1.25;
  filter: drop-shadow(var(--playerO-small-glow));
}

.singular-neon-X line {
  stroke: rgb(var(--playerX-color));
  stroke-width: 1.25;
  filter: drop-shadow(var(--playerX-small-glow));
}

.game-content {
  box-shadow: 0px -5px 10px var(--background-color-secondary-alpha);
  width: max(80%, 360px);
  display: flex;
}

.game-board {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  gap: 20px;
  background-color: rgb(var(--background-color-secondary));
  padding: 10px;
  justify-content: center;
}

.dividers,
.winning-line {
  height: 340px;
  width: auto;
  position: absolute;
  pointer-events: none;
}

.dividers line {
  stroke: white;
  stroke-width: 5;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255));
}

.winning-line line {
  stroke: yellow;
  stroke-width: 5;
  filter: drop-shadow(0 0 5px rgb(255, 255, 0));
}

.cell {
  background-color: rgb(var(--background-color-secondary));
  border: none;
  border-radius: 20px;
  transition: background-color 0.15s ease-in;
}

.neon-O,
.neon-X {
  height: 100px;
  width: auto;
}

.neon-O circle {
  fill: none;
  stroke: rgb(var(--playerO-color));
  stroke-width: 10;
  filter: drop-shadow(var(--playerO-glow));
}

.neon-X line {
  stroke: rgb(var(--playerX-color));
  stroke-width: 10;
  filter: drop-shadow(var(--playerX-glow));
}

.cell.available:hover {
  cursor: pointer;
  background-color: rgb(47, 34, 53);
}

.game-panel {
  background: linear-gradient(135deg, rgba(232, 204, 246, 0.25) 0%,
                                      rgba(178, 120, 205, 0.25) 50%, 
                                      rgba(82, 35, 104, 0.25) 100%);
  width: 100%;
  display: flex;
  flex-direction: column;
}

form {
  display: flex;
  flex-direction: column;
  margin: 30px 30px 0 30px;
}

label[for="player-O-name"],
label[for="player-X-name"] {
  margin-bottom: 5px;
}

label[for="player-O-name"] {
  color: rgb(var(--playerO-color));
}

label[for="player-X-name"] {
  color: rgb(var(--playerX-color));
}

input {
  outline: none;
  background: linear-gradient(135deg, rgb(232, 204, 246) 0%,
                                      rgb(190, 147, 210) 50%, 
                                      rgb(120, 83, 138) 100%);
  padding: 5px;
  font-size: 16px;
  margin-bottom: 10px;
  border: none;
  box-shadow: 2px 2px 0px rgb(53, 28, 66) inset,
              -2px -2px 0px rgb(156, 139, 165) inset;
  width: max(60%, 150px);
}

form > button {
  background: linear-gradient(135deg, rgb(205, 124, 255) 0%,
                                      rgb(151, 68, 192) 50%, 
                                      rgb(103, 0, 150) 100%);
  color: white;
  font-weight: bold;
  letter-spacing: 1.5px;
  border: none;
  padding: 15px;
  width: 100px;
  border-radius: 10px;
  box-shadow: -2px -2px 0px rgb(54, 32, 65) inset,
              2px 2px 0px rgb(181, 149, 198) inset;
  cursor: pointer;
}

form > button:hover {
  color: black;
  background: linear-gradient(135deg, rgb(225, 176, 255) 0%,
                                      rgb(162, 104, 191) 50%, 
                                      rgb(108, 33, 143) 100%);
  box-shadow: -2px -2px 0px rgb(181, 149, 198) inset,
              2px 2px 0px rgb(54, 32, 65) inset;
}

form.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.game-console {
  background-color: rgb(var(--background-color-secondary));
  color: rgb(var(--text-color));
  filter: drop-shadow(0 0 5px var(--text-color-alpha));
  flex: 1;
  margin: 10px 30px;
  padding: 10px;
  border: 2px solid rgb(var(--text-color));
  border-radius: 10px;
  cursor: default;
  hyphens: auto;
}

.game-console.player-O {
  color: rgb(var(--playerO-color));
  filter: drop-shadow(var(--playerO-glow));
  border: 2px solid rgb(var(--playerO-color));
}

.game-console.player-X {
  color: rgb(var(--playerX-color));
  filter: drop-shadow(var(--playerX-glow));
  border: 2px solid rgb(var(--playerX-color));
}

footer {
  font-family: var(--font-family);
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
  background-color: rgb(var(--background-color-secondary));
  color: rgb(var(--text-color));
}

/* Media query for small screens! */
@media (max-width: 740px) {
    .game-content {
        flex-direction: column;
    }

    .game-board {
      padding: 10px 0;
      width: 100%;
    }

    .dividers,
    .winning-line {
      align-self: center;
      justify-self: center;
    }
}