:root {
  --main-font: poppins, monospace, "Courier New", Courier;
  --title-font: playfair display, "Gill Sans", "Gill Sans MT", Calibri,
    "Trebuchet MS", sans-serif;
  --background-color: #ffffff;
  --navbar-color: #9b9b9b88;
  --web-color1: #a99985;
  --web-color2: #70798c;
  --web-color3: #252323;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
}
body {
  font-family: var(--main-font);
  background-color: var(--background-color);
  text-align: center;
}

h1 {
  font-size: 50px;
}

header,
footer {
  background-color: var(--navbar-color);
}
header {
  position: sticky;
  top: 0;
}
main {
  padding: 5em 2em 3em 2em;
}
a {
  color: var(--web-color3);
}
a:hover {
  color: #70798c;
}

footer {
  margin-top: 2px;
  padding: 5px 0px 5px;
  width: 100%;
  display: inline-block;
  position: relative;
  clear: both;
}
footer p {
  padding-top: 10px;
}
footer img {
  padding-top: 5px;
}
@media (max-width: 640px) {
  .name-year-of-footer {
    padding-top: 10px;
  }
}