body {
  margin: 0;
  font-family: sans-serif;
}

h1 {
  text-align: center;
}

#toggle-switch {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 2em;
}

#toggle-switch > div{
  margin: 0em 1em;
}

label.switch {
  height: 0.8em;
  width: 1.6em;
  background-color: lightgrey;
  border-radius: 999px;
  padding: 0.2em;
  flex-shrink: 0;
}

label.switch input {
  display: none;
}

label.switch div {
  position: relative;
  height: 0.8em;
  width: 0.8em;
  background-color: white;
  border-radius: 999px; /*add transition properties*/
}

label.switch input:checked ~ div { /*div that is a sibling of the checked input*/
  left: 0.8em;
}


#game-container {
  display: grid;
  grid-template-columns: 1.2em 1.2em 1.2em;
  grid-template-rows: 1.2em 1.2em 1.2em;
  justify-content: center;
  align-items: center;
  justify-items: center;
  font-size: 8rem;
}

.field {
  width: 1em;
  height: 1em;
  line-height: 1;
  border: 2px;
  border-radius: 0.1em;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 5px 5px 5px lightgrey;
  text-align: center; 
  cursor: pointer;
}

#end {
  width: 30vw;
  /* height: 15vh; */
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  border: 2px;
  padding: 2em;
  border-radius: 1em;
  border-style: solid;
  border-color: grey;
  box-shadow: 5px 5px 10px grey, -5px -5px 10px grey;
  background-color: white;
  text-align: center;
  font-size: 2rem;
}

button {
  width: 3em;
  height: 1.5em;
  background-color: grey;
  border-radius: 0.5em;
  color: white;
  border-style: none;
  font-size: 0.7em;
  cursor: pointer; 
}

button:focus {
  outline: none;
} 

.field.X, /*variables!*/
#end-text.X {
  color: darkred;
}

.field.O,
#end-text.O {
  color: darkblue;
}

button.X {
  background-color: darkred;
}

button.O {
  background-color: darkblue;
}

.field.off {
  color: lightgray;
  cursor: default;
}

@media (max-width: 480px) {
  
  #toggle-switch {
    font-size: 1rem;
  }

  #game-container {
    font-size: 4rem;
  }

  #end {    
    font-size: 1.5rem;
    top: 65%;
  }
}