html {
  box-sizing: border-box;
}

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

:root {
  font-size: 62.5%;
}

body {
  font-family: 'Source Code Pro', monospace, sans-serif;
  margin: 0;
  --body-bg: rgb(1, 11, 26);
  --grid-color: rgb(4, 183, 238);
  color: white;
  background-color: var(--body-bg);
  background-image: url("../img/space.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

body.dark {
  --body-bg: rgb(25, 48, 65);
  --grid-color: rgb(1, 11, 26);
  background-color: var(--body-bg);
}

section.dark {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #82f5e4,
              0 0 0.8rem #82f5e4,
              0 0 2.8rem #82f5e4,
              inset 0 0 1.3rem #82f5e4;
}

main {
  display: grid;
  width: 100%;
  justify-content: center;
  align-items: center;
  grid-template-rows: 200px;
  grid-template-areas: 
  ". game-title ."
  "player-one board player-two";
}

h1 {
  font-size: 40px;
}

.main-message {
  grid-area: main-message;
  height: 400px;
  width: 500px;
  background-image: url("../img/hud.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.player-one {
  grid-area: player-one;
  display: grid;
  height: 400px;
  width: 500px;
  margin-right: 10px;
  justify-content: center;
  background-image: url("../img/hud.png");
  background-size: 100%;
  background-repeat: no-repeat;
  grid-template-areas: 
  "p1-title"
  "p1-tokens";
}

.p1-tokens {
  grid-area: p1-tokens;
  display: grid;
  width: 250px;
  height: 220px;
  grid-template-areas: 
  "p1-token1 p1-token2 p1-token3 p1-token4 p1-token5"
  "p1-token6 p1-token7 p1-token8 p1-token9 p1-token10"
  "p1-token11 p1-token12 p1-token13 p1-token14 p1-token15"
  "p1-token16 p1-token17 p1-token18 p1-token19 p1-token20"
  ". . p1-token21 . .";
}

.player-two {
  grid-area: player-two;
  display: grid;
  height: 400px;
  width: 500px;
  margin-left: 10px;
  justify-content: center;
  background-image: url("../img/hud.png");
  background-size: 100%;
  background-repeat: no-repeat;
  grid-template-areas: 
  "p2-title"
  "p2-tokens";
}

.p2-tokens {
  grid-area: p2-tokens;
  display: grid;
  width: 250px;
  height: 220px;
  grid-template-areas: 
  "p2-token1 p2-token2 p2-token3 p2-token4 p2-token5"
  "p2-token6 p2-token7 p2-token8 p2-token9 p2-token10"
  "p2-token11 p2-token12 p2-token13 p2-token14 p2-token15"
  "p2-token16 p2-token17 p2-token18 p2-token19 p2-token20"
  ". . p2-token21 . .";
}

.board {
  grid-area: board;
  border-radius: 25px;
  display: grid;
  width: 456px;
  height: 390px;
  border: 3px solid;
  border-color: var(--grid-color);
  background-color: var(--grid-color);
  grid-template-areas:
  "col1 col2 col3 col4 col5 col6 col7";
}

.sq {
  border-radius: 50%;
  background-color: var(--body-bg);
  border: 5px solid;
  border-color: var(--grid-color);
}

.col1 {
  grid-area: col1;
  display: grid;
  grid-template-areas:
  "0"
  "1"
  "2"
  "3"
  "4"
  "5";
}
.col2 {
  grid-area: col2;
  display: grid;
  grid-template-areas:
  "6"
  "7"
  "8"
  "9"
  "10"
  "11";
}

.col3 {
  grid-area: col3;
  display: grid;
  grid-template-areas:
  "12"
  "13"
  "14"
  "15"
  "16"
  "17";
}

.col4 {
  grid-area: col4;
  display: grid;
  grid-template-areas:
  "18"
  "19"
  "20"
  "21"
  "22"
  "23";
}

.col5 {
  grid-area: col5;
  display: grid;
  grid-template-areas:
  "24"
  "25"
  "26"
  "27"
  "28"
  "29";
}

.col6 {
  grid-area: col6;
  display: grid;
  grid-template-areas:
  "30"
  "31"
  "32"
  "33"
  "34"
  "35";
}

.col7 {
  grid-area: col7;
  display: grid;
  grid-template-areas:
  "36"
  "37"
  "38"
  "39"
  "40"
  "41";
}

.drop-token1 {
  background-image: url("../img/token1-glow.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.drop-token2 {
  background-image: url("../img/token2-glow.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.used {
  display: none;
}

.turn {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

#game-title {
  font-size: 50px;
  grid-area: game-title;
  font-weight: bold;
  margin-left: 85px;
  color: rgb(2, 3, 82);
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

#instructions {
  font-size: 18px;
  grid-area: game-title;
  font-weight: bold;
  margin-left: 50px;
  margin-top: 110px;
  color: rgb(2, 3, 82);
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

#message {
  margin-top: 140px;
  text-align: center;
}

#title {
  margin-top: -150px;
  margin-left: 27px;
}

#main-button {
  margin-left: 212px;
  margin-top: 20px;
  font-size: 20px;
}

#replay {
  margin-top: 20px;
  margin-left: 215px;
  font-size: 20px;
}

#light {
  margin-left: 170px;
  margin-top: 20px;
  font-size: 20px;
}

#dark {
  margin-left: 15px;
  margin-top: 20px;
  font-size: 20px;
  color: rgb(170, 206, 250);
} 

#p1-title, #p2-title {
  margin-top: 70px;
  margin-bottom: -30px;
  margin-left: 25px;
  font-size: 25px;
}

div.p1-tokens > *{
  background-image: url("../img/token1-glow.png");
  background-size: contain;
  background-repeat: no-repeat;
}

div.p2-tokens > *{
  background-image: url("../img/token2-glow.png");
  background-size: contain;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 1455px) {
  .player-one, .player-two {
    background-image: none;
    width: 300px;
  }
}

@media only screen and (max-width: 1067px) {
  .player-one, .player-two {
    display: none;
  }
}

@media only screen and (max-width: 400px) and (orientation: portrait) {
  
  .player-one, .player-two {
    display: none;
  }

  .main-message {
    background-image: none;
    margin-top: 50px;
  }

  .board {
    margin-left: 30px;
    margin-top: 75px;
    width: 300px;
    height: 255px;
  }

  #message {
    margin-top: 0;
    font-size: 35px;
    margin-left: 10px;
  }

  #game-title {
    font-size: 35px;
    margin-left: 60px;
    margin-top: 50px;
  }
  
  #instructions {
    font-size: 15px;
    text-align: center;
    margin-left: 20px;
    margin-top: 150px;
  }
}