:root {
  --upperColor: #333333;
  --lowerColor: #F8F8F8;
}

.hide {
  display: none;
}

.loading {
  cursor: progress;
}

body {
  margin: 0 0;
  padding: 0 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 450;
}

#real-body {
  width: 100%;
  height: 100%;
}

#header {
  color: white;
  font-size: 5vh;
  grid-area: header;
  font-weight: bold;
}

#footer {
  grid-area: footer;
  background-color: rgb(223, 223, 223);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2vh;
}

#footer > p {
  margin: 0.2vh 0;
}

#content {
  width: 100%;
  height: 100%;
  grid-area: content;
}

:root {
  --upperColor-hs: 0, 0%;
  --upperColor-l: 20%;
  --upperColor: hsl(var(--upperColor-hs), var(--upperColor-l));
  --lowerColor-hs: 0, 0%;
  --lowerColor-l: 97%;
  --lowerColor: hsl(var(--lowerColor-hs), var(--lowerColor-l));
}

.hide {
  display: none;
}

.loading {
  cursor: progress;
}

body {
  margin: 0 0;
  padding: 0 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 450;
}

#real-body {
  width: 100%;
  height: 100%;
}

#header {
  color: white;
  font-size: 5vh;
  grid-area: header;
  font-weight: bold;
}

#footer {
  grid-area: footer;
  background-color: rgb(223, 223, 223);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2vh;
}

#footer > p {
  margin: 0.2vh 0;
}

#content {
  width: 100%;
  height: 100%;
  grid-area: content;
}

Use dynamic hsl colors instead of hex
Use dynamic hsl colors instead of hex
