@font-face {
  font-family: 'Fredoka One';
  src: url("/assets/fonts/FredokaOne-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Montserrat';
  src: url("/assets/fonts/Montserrat-Regular.ttf") format("truetype"); }
:root {
  --grid-margin: 45px;
  --hero-grids: 39;
  --animation-delay: 0.16s;
  --nav-height: 80px; }

body, html {
  height: 100%;
  width: 100%;
  overflow: auto;
  font-family: 'Fredoka One';
  margin: 0;
  padding: 0; }

ul {
  padding-left: 0px;
  list-style-type: none; }

p {
  font-family: 'Montserrat'; }

header {
  width: 100vw;
  display: grid;
  height: var(--nav-height);
  grid-template-columns: var(--grid-margin) repeat(2, 1fr) var(--grid-margin); }
  header .logo {
    grid-column-start: 2;
    display: flex; }
  header nav {
    grid-column-start: 3;
    align-self: center; }
  header ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px; }
  header li {
    cursor: pointer; }
    header li:hover {
      color: blue; }

section .content {
  margin-left: 2em;
  margin-right: 2em; }

#hero {
  height: calc(100vh - var(--nav-height));
  background: linear-gradient(to top, rgba(255, 255, 255, 0.4), white), url("/assets/images/background.svg"), #C2C094;
  background-repeat: round; }

#about {
  height: 100vh; }

.hero {
  padding-top: 5em; }
  .hero img {
    height: 100%; }

.hero-features {
  height: 60vh;
  display: grid;
  grid-template-columns: repeat(var(--hero-grids), 1fr);
  grid-template-rows: repeat(var(--hero-grids), 1fr); }
  .hero-features .hero-feature {
    animation: popout 1s ease;
    animation-fill-mode: both;
    opacity: 0;
    border-radius: 10px;
    background: #7CA982;
    align-content: center;
    padding: 10px;
    display: flex;
    align-items: center;
    color: white; }
    .hero-features .hero-feature h2 {
      font-size: 20px;
      font-weight: 200;
      line-height: 21px;
      margin-top: 0;
      margin-bottom: 5px; }
    .hero-features .hero-feature p {
      font-size: 12px;
      line-height: 16px;
      margin: 0; }
  .hero-features .hero-feature-content {
    margin-left: 20px; }
  .hero-features .charitable {
    grid-column: 26/35;
    grid-row: 1/8;
    animation-delay: 0.4s; }
    .hero-features .charitable img {
      margin-left: -50px;
      height: 110px; }
  .hero-features .passive-earning {
    grid-column: 30/40;
    grid-row: 16/22;
    animation-delay: calc(0.4s + var(--animation-delay) * 1); }
    .hero-features .passive-earning .hero-feature-content {
      margin-left: 0px; }
  .hero-features .deflationary {
    grid-column: 28/38;
    grid-row: 30/37;
    animation-delay: calc(0.4s + var(--animation-delay) * 2); }
    .hero-features .deflationary img {
      margin-left: -30px;
      height: 120px; }
  .hero-features .community {
    grid-column: 2/13;
    grid-row: 29/36;
    animation-delay: calc(0.4s + var(--animation-delay) * 3); }
    .hero-features .community .hero-feature-content {
      margin-left: 0px; }
    .hero-features .community img {
      margin-left: -70px;
      height: 130px;
      transform: translateY(-13px); }
  .hero-features .liquidity-locked {
    grid-column: 1/10;
    grid-row: 15/22;
    animation-delay: calc(0.4s + var(--animation-delay) * 4); }
    .hero-features .liquidity-locked .hero-feature-content {
      margin-left: 0px; }
    .hero-features .liquidity-locked img {
      margin-right: -60px;
      height: 110px; }
  .hero-features .liquidity-generation {
    grid-column: 3/13;
    grid-row: 2/9;
    animation-delay: calc(0.4s + var(--animation-delay) * 5); }
    .hero-features .liquidity-generation img {
      margin-left: -75px; }
  .hero-features .earth {
    animation: popout 1s ease;
    animation-fill-mode: both;
    grid-column: 13/29;
    grid-row: 9/34; }
    .hero-features .earth img {
      width: 100%; }

@keyframes popout {
  from {
    transform: scale(0);
    opacity: 0; }
  80% {
    transform: scale(1.2); }
  to {
    transform: scale(1);
    opacity: 100; } }

/*# sourceMappingURL=styles.css.map */