:root {
  --xs: 360px;
  --sm: 480px;
  --md: 720px;
  --lg: 960px;
  --xl: 1020px;
}

:root * {
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
}

header,
footer {
  background-color: rgba(227, 254, 202, 0.865);
  background-blend-mode: overlay;
  width: 100vw;
}

h1 {
  text-align: center;
  padding: 4rem;
  font-size: 2rem;
  max-width: var(--lg);
  margin: auto;
}

.title {
  font-size: 2rem;
  mix-blend-mode: multiply;
  opacity: .7;
}

h2 {
  padding: 3rem 0 0 3rem;
  max-width: var(--xl);
  margin: auto;
}


ul {
  margin: auto;
  padding: 2rem;
  max-width: var(--lg);
}

li {
  list-style-type: none;
  padding: 0 0 1.6rem 0;
  margin: auto;
}

p {
  max-width: var(--lg);
  margin: auto;
  line-height: 2rem;
  padding: 2rem;
}

p,
li {
  font-size: 1.6rem;
}



@media screen and (max-width: 720px) {

  p,
  li {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 480px) {

  p {
    font-size: 1.2rem;
  }

  li {
    font-size: 1rem;
  }
}

section {
  background-color: rgba(47, 79, 79, 0.347);
  background-blend-mode: overlay;
  color: rgb(252, 233, 233);
  margin: 2rem 0;
  border-radius: 8px;
}

.col-reverse {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  max-width: var(--xl);
}

.sown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100vw;
  background-image: linear-gradient(45deg,
      hsla(160, 89%, 11%, .8) 0%,
      hsl(168deg 100% 10%) 2%,
      hsl(174deg 100% 9%) 5%,
      hsla(180deg, 100%, 8%, .8) 9%,
      hsl(185deg 100% 8%) 14%,
      hsl(190deg 100% 7%) 21%,
      hsl(193deg 94% 7%) 28%,
      hsla(200deg, 100%, 8%, .8) 36%,
      hsl(208deg 100% 9%) 45%,
      hsl(214deg 100% 10%) 56%,
      hsla(220deg, 100%, 10%, .8) 67%,
      hsl(251deg 66% 12%) 81%,
      hsla(283deg, 100%, 9%, .8) 100%);
  background-blend-mode: multiply;
}


.header-container {
  background-color: rgba(186, 247, 205, 0.865);
  background-image: linear-gradient(45deg,
      hsl(54deg 90% 74%) 0%,
      hsl(51deg 85% 70%) 21%,
      hsl(90, 82%, 66%) 32%,
      hsl(81, 78%, 63%) 40%,
      hsl(101, 76%, 59%)47%,
      hsl(73, 74%, 55%) 54%,
      hsl(57, 72%, 52%) 59%,
      hsl(56, 84%, 62%) 65%,
      hsl(26deg 97% 71%) 70%,
      hsl(20deg 100% 77%) 76%,
      hsl(14deg 100% 82%) 82%,
      hsl(7deg 100% 87%) 88%,
      hsl(0deg 78% 89%) 100%);
  background-blend-mode: overlay;
}

.node-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
  backdrop-filter: blur(1px);
  max-width: var(--xl);
  contain: layout style;
  will-change: transform;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.seed {
  margin: 0;
  padding: 0;
  font-size: 4rem;
  color: rgb(79, 79, 37);
  background-blend-mode: overlay;
}