:root {
  --co-black: black;
  --co-brown: #4E3E40;
  --co-dark-green: #014631;
  --co-dark-green-generic-gradient: #82b25b;
  --co-light-green: #029547;
  --co-white: white;
  --co-white-matching-gradient: #dadde2;
  --ff-sans-serif: "Plus Jakarta Sans";
  --ff-serif: "Cormorant Garamond";
  --pa-large: min(32px, 4%);
}

* {
  font-family: var(--ff-sans-serif), sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  margin: 0px;
  padding: 0px;
}

html {
  font-size: 62.5%;
}

h1 {
  font-family: var(--ff-serif), serif;
  font-size: clamp(4rem, calc(6vw + 1rem), 10rem);
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 700;
}

.landing {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
  height: 100vh;
  height: 100dvh;
}

.landing header {
    display: flex;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    padding: var(--pa-large);
}

.landing main {
    align-items: center;
    display: flex;
    flex-direction: column;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    padding: var(--pa-large);
}

.landing main section {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    gap: 16px;
    text-align: center;
}

.landing main section p {
  max-width: 32em;
}

.linkable {
  color: var(--co-white);
  font-size: 1.1em;
}

.linkable:link {
  text-decoration: none;
}

.linkable:visited {
  color: var(--co-white-matching-gradient);
}

.linkable:focus {}

.linkable:hover {
  text-decoration: underline;
}

.linkable:active {
  color: var(--co-dark-green-generic-gradient);
}

.linkable--flex {
  align-items: center;
  background-color: var(--co-dark-green);
  border-radius: 8px;
  display: flex;
  gap: 0.25em;
  padding: 0.5em 0.75em;
}

.linkable__icon {
  width: 1.25em;
}

.logo {
  width: max(15vw, 160px);
}

@media (max-width: 600px) {
    .landing {
        grid-template-rows: minmax(min-content, 1fr) 2fr;
    }

    .landing header {
        align-items: center;
    }

    .logo {
        width: 100%;
    }
}