body {
	position: relative; /* usually the parent, in this case the body element, has position relative so that the absolute positioned child is positioned relative to it */
	margin: 0; /* recommended */
	background-color: #2d2d2d;
	min-height: 100dvh; /* 100dvh is the height of the viewport, but it accounts for dynamic changes in height (like on mobile when the address bar hides) */
}

h1 {
  position: absolute; /* taken out of the normal flow of the document */
  top: 50%; /* moved down by 50% of the screen height */
  transform: translateY(-50%); /* moved back up (Y axis) by half of its height to achieve the perfect center */
  width: 100%; /* needs to be defined to keep the default block behavior */
  text-align: center;
  margin: auto;
  color: white;
  font-family: 'Oxanium-Reg', Helvetica;
  font-weight: 400;
  font-size: 8vw;
}

h2 {
  position: absolute;
  bottom: 1%;
  text-align: left;
  margin-left: 2%;
  color: white;
  font-family: 'Oxanium-200', Helvetica;
  font-weight: 200;
  font-size: 4vw;
}

footer {
  position: absolute;
  bottom: 1%;
  text-align: left;
  margin-left: 2%;
  color: white;
  font-family: 'Oxanium-200', Helvetica;
  font-weight: 200;
  font-size: 4vw;
}

@media screen and (min-width: 641px) {
    h1 {
        font-size: 65px;
    }
    h2 {
        font-size: 35px;
    }
}

@font-face {
    font-family: 'Oxanium'; /*a name to be used later*/
    src: url('fonts/Oxanium-VariableFont_wght.ttf') format('truetype'); /*URL to font*/
    font-display: block;
}

@font-face {
  font-family: 'Oxanium-Reg'; /*a name to be used later*/
  src: url('fonts/oxanium-v19-latin-regular.ttf') format('truetype'); /*URL to font*/
  src: url('fonts/oxanium-v19-latin-regular.woff2') format('woff2'); /*URL to font*/
  font-display: block;
}

@font-face {
  font-family: 'Oxanium-200'; /*a name to be used later*/
  src: url('fonts/oxanium-v19-latin-200.ttf') format('truetype'); /*URL to font*/
  src: url('fonts/oxanium-v19-latin-200.woff2') format('woff2'); /*URL to font*/
  font-display: block;
}

/* unvisited link */
a:link {
	color: Orange;
}

/* visited link */
a:visited {
	color: MediumSeaGreen;
}

/* selected link */
a:active {
	color: whitesmoke;
}

/* mouse over link */
a:hover {
	color: crimson;
}