:root {
  font-size: 1vw;
}


header {
  max-width: 100vw; 
  background-color: #535878;
  position: relative;
  padding-top: 1%;
}


h1 {
  text-align: center;
  color: black;
  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 #181818;
  border-bottom: 0.18rem solid #181818;
  padding: 0.6%;
}
nav a:link {
  text-decoration: none;
  color: black;
  background-color: #535878;
  border: 0.18rem outset #414141;
  padding: 0.3%;
}
nav a:visited {
  text-decoration: none;
  color: black;
  border: 0.18rem outset #414141;
}
nav a:hover {
  text-decoration: none;
  color: black;
  background-color: #787d9f;
  border: 0.18rem outset #414141;
}
nav a:active {
  text-decoration: none;
  color: black;
  border: 0.18rem inset #414141;
}

.current:link {
  color: black;
  background-color: #3e425b;
  border: 0.18rem outset #414141;
}
.current:visited {
  color: black;
  background-color: #3e425b;
  border: 0.18rem outset #414141;
}
.current:hover {
  color: black;
  background-color: #4f5369;
  border: 0.18rem outset #414141;
}
.current:active {
  color: black;
  background-color: #3e425b;
  border: 0.18rem inset #414141;
}