@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
  box-sizing: border-box; }

html,
body {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: "Archivo", sans-serif;
  background-color: #2d4739; }

header {
  color: #d7dedc;
  display: grid;
  place-content: center;
  text-align: center; }
  header h1 {
    font-size: clamp(2.25rem, 8vw, 8rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    margin: 0; }
  header h3 {
    font-size: clamp(1.125rem, 4vw, 4rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    margin: 1em 0;
    text-decoration: underline;
    text-decoration-color: #e98a15;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em; }

.grid {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  padding: 1rem; }

footer {
  padding: 0.5em; }
  footer nav {
    display: flex;
    justify-content: flex-end; }
    footer nav a i {
      color: #e98a15;
      font-size: 1.125rem;
      margin-left: 0.75em; }
    @media only screen and (min-width: 600px) {
      footer nav a i {
        font-size: 1.75rem;
        margin: 1em; } }

@media only screen and (min-width: 600px) and (min-width: 1200px) {
  footer nav a i {
    font-size: 2.5rem; } }
    footer nav a i:hover {
      color: #856084; }