:root {
  --0_page_bg: #f4f4f4;
  --0_element_bg: #e2e2e2;
  --0_on_hover: white;
  --0_header_footer_bg: #333;
  --1_page_bg: #E8C2CA;
  --1_element_bg: #D1B3C4;
  --1_on_hover: #B392AC;
  --1_header_footer_bg: #735D78;
  --2_page_bg: #E8E9F3;
  --2_element_bg: #CECECE;
  --2_on_hover: #A6A6A8;
  --2_header_footer_bg: #272635;
  --3_page_bg: #9CA3DB;
  --3_element_bg: #677DB7;
  --3_on_hover: #454B66;
  --3_header_footer_bg: #191308;
  --4_page_bg: #E8E9F3;
  --4_element_bg: #CECECE;
  --4_on_hover: #A6A6A8;
  --4_header_footer_bg: #272635;
  --5_page_bg: #e9e9e9;
  --5_element_bg: #dbdbdb;
  --5_on_hover: rgb(245, 245, 245);
  --5_header_footer_bg: #333;
  --6_page_bg: #e9e9e9;
  --6_element_bg: #cfcfcf;
  --6_on_hover: rgb(245, 245, 245);
  --6_header_footer_bg: #333;
  --7_page_bg: #ffd6d8;
  --7_element_bg: #fab9b9;
  --7_on_hover: #d39c97;
  --7_primary_text: #333333;
  --7_shadows_borders: #c5888a;
  --7_nav_grad_from: #816769;
  --7_nav_grad_to: #9b787a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin-top: 5rem;
  font-family: 'Times New Roman', Times, serif;
  line-height: 1.6;
  background-image: url('./assets/peaches.png');
  background-color: rgba(255, 214, 216, 1);
  background-repeat: repeat;
  color: var(--7_primary_text);
  padding: 0 1rem;

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(to right, var(--7_nav_grad_from), var(--7_nav_grad_to));
    color: var(--7_primary_text);
    padding: 1rem 0;
  }

  section {
    max-width: 50vw;
    margin: 2rem auto;
    background: var(--7_element_bg);
  }

  #content {
    min-height: 100vh;
    justify-items: center;

    #poetry-divisory {
      display: grid;
      grid-template-columns: 2fr 1fr;
      width: 85vw;
      gap: 5rem;

      h2 {
        font-size: clamp(1.2rem, 1.5vw, 2.5rem);
      }

      h4 {
        font-size: clamp(.8rem, 1vw, 2rem);
      }

      p {
        font-size: clamp(.7rem, .8vw, 1.5rem);
      }

      #poetry,
      #poetry-showcase {
        width: 100%;
        max-width: 60vw;
        padding: 3rem;
        border-radius: 2rem;
        background: linear-gradient(to bottom,
            rgba(250, 185, 185, .8) 0%,
            rgba(250, 185, 185, .2) 60vh,
            rgba(250, 185, 185, .2) 100%);

        #poetry-title {
          margin: 1rem;
          padding: 1rem;
        }

        #poetry-search {
          margin: 0 2rem;
          padding: .5rem;
          border-radius: 1rem;
          background-color: rgba(219, 184, 184, 0.8);
        }

        #poetry-cards {
          display: flex;
          flex-wrap: wrap;
          margin: 1rem;

          .poem-card {
            background-color: var(--7_element_bg);
            border-radius: 1em;
            margin: 1rem;
            padding: 1rem;
          }

          .poem-card:hover {
            box-shadow: 0 4px 8px var(--7_shadows_borders);
            cursor: pointer;
          }
        }
      }
    }
  }
}

p {
  white-space: pre-line;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: auto;

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

a {
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.hero {
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(250, 185, 185, .8);
  border-radius: 2em;
}

h2 {
  margin-bottom: 1rem;
  color: #222;
}

footer {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(to right, var(--7_nav_grad_from), var(--7_nav_grad_to));
  color: #fff;
}

.fade-out {
  animation: fadeOut 0.5s forwards
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}