* {
  margin: 0;
  padding: 0;
}

:root {
  --background: hsl(0, 0%, 11%);
  --accent: hsl(131, 45%, 50%);
  --hover: hsl(51, 100% 50%);
  --visited: hsl(203, 92%, 75%);
  --text: hsl(330, 100%, 98%);
}


body {
  background-color: var(--background);
  color: var(--text);
  font-family: roboto;
  font-weight: 300;
}

nav {
  background-image: linear-gradient(to bottom, hsl(131, 45%, 50%), hsl(0, 0%, 11%) 90%);
  height: 50px;
  padding: 1em;
}

.layout {
  display: grid;
  grid-template-columns: 20% auto 20%;
}

h1 {
  text-align: center;
  color: var(--text);
  font-weight: 500;
}

h2 {
  text-align: center;
  color: var(--text);
  font-weight: 400;
}

:link {
  color: var(--accent);
}

a:hover {
  color: var(--hover);
}

:visited {
  color: var(--visited);
}

footer {
  text-align: center;
  padding: 1em;
  font-weight: 300;
}