@import "./header.css";
@import "./footer.css";
@import "./animation.css";

main.landing_page {
  max-height: calc(100dvh - 15.5rem);

  section.hero_section_container {
    height: 100%;
    padding-bottom: 4rem;
    padding-top: 4rem;

    .hero_section_wrapper {
      align-items: center;
      display: flex;
      flex-direction: column-reverse;
      height: 100%;
      row-gap: 1rem;

      .hero_text_container {
        h1 {
          font-weight: 600;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          width: 85%;
        }
      }

      .hero_media_container {
        align-items: center;
        display: flex;
        flex: 1;

        .animated_logo_with_base {
          height: fit-content;
          margin-left: auto;
          margin-right: auto;
          max-width: min(32.75rem, 30vh);
          width: 80%;

          svg {
            height: auto;

            &#capcircle_animated_logo {
              position: relative;
              z-index: 1;
            }
          }

          #animated_icon_base {
            margin-top: -10%;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  main.landing_page {
    max-height: calc(100dvh - 12rem);

    section.hero_section_container {
      .hero_section_wrapper {
        row-gap: 4rem;

        .hero_text_container {
          h1 {
          }
        }

        .hero_media_container {
          .animated_logo_with_base {
            svg {
              &#capcircle_animated_logo {
              }
            }

            #animated_icon_base {
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  main.landing_page {
    section.hero_section_container {
      padding-bottom: 8.75rem;
      padding-top: 8.75rem;

      .hero_section_wrapper {
        column-gap: 2rem;
        flex-direction: row;
        justify-content: space-between;
        row-gap: 0rem;

        .hero_text_container {
          flex: 1;
          margin-bottom: 8rem;

          h1 {
            margin-left: 0rem;
            text-align: left;
            width: 80%;
          }
        }

        .hero_media_container {
          .animated_logo_with_base {
            margin-right: 0;
            max-width: min(30rem, 50vh);

            svg {
              height: fit-content;

              &#capcircle_animated_logo {
              }
            }

            #animated_icon_base {
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1280px) {
  main.landing_page {
    section.hero_section_container {
      .hero_section_wrapper {
        .hero_text_container {
          h1 {
          }
        }

        .hero_media_container {
          .animated_logo_with_base {
            svg {
              &#capcircle_animated_logo {
              }
            }

            #animated_icon_base {
            }
          }
        }
      }
    }
  }
}