@import url("https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@v5.3.1/dist/nanogrid_styles.css");

* {
  font-family: "Quicksand", sans-serif;
}

html,
body {
  padding: 0;
  margin: 0;

  background-color: #392925;

  --background-color: #202028;
  --foreground-color: #fcfcfc;
  --accent-color: #f6e794;
}

/* .container {
  max-width: 1200px;
  margin: auto;
  display: flex;
} */

nav {
  background-color: var(--background-color);
  align-items: center;
  display: flex;
  padding: 2rem 1rem;

  ul {
    list-style: none;
    flex-grow: 1;
    justify-items: flex-end;
    padding: 0;
    margin: 0;

    a {
      color: var(--accent-color);
      text-decoration: none;
      text-transform: uppercase;
      font-weight: bold;
    }
  }
}

main {
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 4rem 1rem;
    min-height: calc(100vh - 176px);
    margin: 0;
    gap: 2rem;
    text-align: center;
  }

  li {
    position: relative;
    align-items: center;
    display: flex;
    height: 656px;
    width: 490px;
    gap: 0.5rem;
    flex-direction: column;
    z-index: 1;

    &:hover {
      &:before,
      &:after {
        rotate: 0deg;
      }
    }

    img {
      position: relative;
      z-index: 1;
    }

    h2 {
      text-transform: uppercase;
      color: #66b069;
    }

    p {
      color: #66b069;
    }

    h2,
    p {
      line-height: 1;
      margin: 0;
    }

    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 249px;
      height: 273px;
      top: 380px;
      background: url(./img/rama.png);
      transition: rotate 200ms ease-in-out;
      z-index: -1;
    }

    &:before {
      left: 0;
      rotate: 6deg;
    }

    &:after {
      scale: -1 1;
      right: 0;
      rotate: -6deg;
    }
  }
}

footer.page-footer {
  display: flex;
  color: #fcfcfc;
  align-items: center;
  flex-direction: column;
  padding: 2rem;
  gap: 0.5rem;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  background-color: var(--background-color);

  ul {
    margin: 0;
    list-style: none;
    gap: 1rem;
    padding: 0;
    display: flex;
  }

  p {
    margin: 0;
  }

  a {
    color: var(--accent-color);
  }

  .heart {
    position: relative;
    display: inline-block;
    rotate: 45deg;
    margin-inline: 0.25rem;
    animation: beating-heart 0.5s linear infinite alternate;

    &,
    &:before,
    &:after {
      display: inline-block;
      background-color: #d73333;
      width: 0.5rem;
      height: 0.5rem;
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }

    &:before {
      inset: -50% auto auto 0;
    }

    &:after {
      inset: 0 auto auto -50%;
    }
  }
}

@keyframes beating-heart {
  0% {
    scale: 1;
  }

  100% {
    scale: 1.15;
  }
}