:root {
  font-size: 1vw;
  --wd-color: lightskyblue;
}


header {
  max-width: 100vw; 
  background-color: var(--wd-color);
  position: relative;
  padding-top: 1%;
}


h1 {
  text-align: center;
  color: white;
  font-family: "Rubik Iso", Impact, "Arial Black", Arial;
  font-size: 3rem;
  margin: 0;
  margin-bottom: 2%;
  /* margin-bottom: 7%; --------> Space needed for the drawing (TO BE IMPLEMENTED) */
}


#drawing { /* ------> Drawing styles go here (TO BE IMPLEMENTED) */
  position: absolute;
  top: 25%;
}


nav {
  display: flex;
  gap: 1%;
  justify-content: center;
  list-style-type: none;
  font-family: "Pixelify Sans", "Lucida Console", consolas, monospace;
  font-size: 1.1rem;
  border-top: 0.18rem solid white;
  border-bottom: 0.18rem solid white;
  padding: 0.6%;
}
nav a:link {
  text-decoration: none;
  color: white;
  background-color: var(--wd-color);
  border: 0.18rem outset white;
  padding: 0.3%;
}
nav a:visited {
  text-decoration: none;
  color: white;
}
nav a:hover {
  text-decoration: none;
  color: white;
  background-color: #a3d8f8;
}
nav a:active {
  text-decoration: none;
  color: white;
  border-style: inset;
}

.current:link {
  color: white;
  background-color: #87b7fa;
  border: 0.18rem outset white;
}
.current:visited {
  color: white;
  background-color: #87b7fa;
  border: 0.18rem outset white;
}
.current:hover {
  color: white;
  background-color: #a3c4f3;
  border: 0.18rem outset white;
}
.current:active {
  color: white;
  background-color: #87b7fa;
  border: 0.18rem inset white;
}