html {
  box-sizing: border-box
}

/* The Universal Selector */
*, /* All elements*/
*::before, /* All ::before pseudo-elements */
*::after { /* All ::after pseudo-elements */
  /* height & width will now include border & padding by default
     but can be over-ridden as needed */
  box-sizing: inherit;
}

/* resets font size to be 62.5% of the user preference - 
   in most browser configurations this will be 10px */
:root {
  font-size: 62.5%
}
body {
  padding-top: 5vh;
  margin: 0;
  height: 25vh;
  display: flex;
  flex-direction: column;
  background-color: cornsilk;
}
h1 {
  text-align: center;
  }
section, 
footer {
  justify-content: center;
  text-align: center;
}
.status {
  font-size: 20px;
  height: 75px;
}
section.gameboard {
    border-radius: 10px;
    margin: auto;
    margin-top: 2vh;
    display: grid;
    grid-template-rows: repeat(6, 9vmin);
    grid-template-columns: repeat(7, 9vmin);
    gap: 1vmin;
    background-color: #034f84;
    border: 1px solid black ;
    padding: 15px;
    margin-bottom: 3vh;
    box-shadow: 10px 10px 5px rgb(39, 38, 38);
}
div {
  border: 3px solid black;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}
.puckHolder{
  background-color: white;
  box-shadow: inset 3px 3px 1px rgb(48, 48, 48);
}
.puckHolder:hover {
  background-color: slategrey;
}
.red {
  background-color: #c94c4c;
}
.yellow {
  background-color: #ffef96;
}
.hiddenPuck {
  display: none ;
}
body.dark-theme {
  background-color: #313236;
}
body.dark-theme h1{
  color: white;
}
body.dark-theme p {
  color: white;
}
body.dark-theme footer {
  color: white;
}
body.dark-theme .gameboard {
  background-color: lightblue;
  box-shadow: 10px 10px 5px gainsboro;
}