* {
  --background-colour: #004a66;
  --colour: #ffffff;
}

html,
body {
  margin: 0;
  background-color: var(--background-colour);
  color: var(--colour);
  font-size: 16px;
}

body {
  padding: 1rem;
}

a {
  padding: 2px;
  color: var(--colour);
}

a:not([href]) {
  position: absolute;
  width: 1px;
  height: 1px;
}

a:focus {
  outline: dotted 1px var(--colour);
}

nav {
  position: absolute;
  padding: 1rem;
  border: solid 1px var(--colour);
  background-color: var(--background-colour);
  color: var(--colour);
  transform: translate(-9999px, -9999px);
}

nav:focus-within {
  transform: translate(0, 0);
}

nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

h1 {
  margin: 0;
}