@layer reset, base, theme, layout, components, utilities;
@layer reset {
  /* 1. Use a more-intuitive box-sizing model */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  /* 3. Enable keyword animations */
  /* Can animate height: auto & content-fit */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  body {
    /* 4. Add accessible line-height */
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  /* 6. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /* 7. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  /* 8. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    line-height: calc(1em + 0.5rem);
    overflow-wrap: break-word;
  }
  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  /*
    10. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }
  /* Baseline for default links */
  a:not([class]) {
    /* Relatively sized thickness and offset */
    text-decoration-thickness: max(0.08em, 1px);
    text-underline-offset: 0.2em;
  }
  /* Base style for focus-visiblity */
  :is(a, button, input, textarea, summary) {
    --outline-size: max(2px, 0.08em);
    --outline-style: solid;
    --outline-color: currentColor;
  }
  :is(a, button, input, textarea, summary):focus {
    outline: var(--outline-size) var(--outline-style, dashed) var(--outline-color);
    outline-offset: var(--outline-offset, var(--outline-size));
  }
  :focus-visible {
    outline: var(--outline-width, var(--outline-size)) var(--outline-style, dashed) var(--outline-color, currentColor);
    outline-offset: var(--outline-offset, var(--outline-size));
  }
  :is(a, button, input, textarea, summary):focus:not(:focus-visible) {
    outline: none;
  }
  /* Scroll margin allowance above anchor links */
  :target {
    scroll-padding-block-start: 2rem;
  }
  /* Scroll margin allowance below focused elements 
    to ensure they are clearly in view */
  :focus {
    scroll-padding-block-end: 8vh;
  }
}
@layer base {
  :root {
    font-size: 10px;
    --resolution: 767;
  }
  @media (min-width: 768px) {
    :root {
      --resolution: 1920;
    }
  }
  header {
    padding: 32px; /* Some padding */
    text-align: center; /* Centered text */
    font-size: 24px; /* Larger font size */
    height: -moz-fit-content;
    height: fit-content;
  }
  footer {
    position: fixed;
    bottom: 1rem;
    width: 100%;
    margin: 0 auto;
    text-align: center; /* Centered text */
    font-size: 24px; /* Larger font size */
  }
  h1, h2, h3 {
    font-family: "Arial", sans-serif; /* Consistent font family */
    margin: 0; /* Remove default margin */
    /* padding: 10px 0; Add padding for spacing */
    font-size: 48px;
  }
  h1 + p, h2 + p, h3 + p {
    margin-top: 0.7em;
  }
  h1 {
    font-size: clamp(2rem, 4.69vw, 4.8rem);
  }
  @media (min-width: 1024px) {
    h1 {
      font-size: clamp(2rem, 2.5vw, 4.8rem);
    }
  }
  p {
    font-family: "Arial", sans-serif;
    font-size: clamp(1.2rem, 0.8333333333vw, 1.6rem);
  }
}
@layer theme {
  :root {
    /* Color styles */
    --primary: hsl(265, 38%, 13%);
    --secondary: hsl(283, 6%, 45%);
    --tertiary: hsl(257, 15%, 91%);
    --light: hsl(270, 100%, 99%);
    --accent: hsl(278, 100%, 92%);
    --accent--alt: hsl(279, 100%, 97%);
    --accent--ui: hsl(284, 55%, 66%);
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
  }
  @layer dark, light;
  @layer dark {
    body {
      background-color: var(--primary);
      color: var(--light);
      accent-color: var(--accent);
      scrollbar-color: var(--accent) var(--accent--ui);
    }
  }
  @media (prefers-color-scheme: light) {
    @layer theme.light {
      body {
        background-color: var(--light);
        color: var(--primary);
      }
    }
  }
}
@layer layout {
  main {
    --layout-grid-gap: min(((20vw * 100) / var(--resolution)), 20px);
  }
  main :is(.layout-grid, .flex-layout-grid) > * {
    container: var(--grid-item-container, grid-item)/inline-size;
  }
  main video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0.1;
    z-index: -1; /* Ensure the video is behind other content */
    mix-blend-mode: luminosity;
  }
  main .layout-grid {
    --layout-grid-min: 50ch;
    display: grid;
    padding: 2rem 5%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
    gap: var(--layout-grid-gap);
  }
  main .layout-grid > div {
    border: 2px solid var(--accent);
    border-radius: 2%;
    width: 100%;
    min-height: 200px;
  }
  main .layout-flex {
    --layout-grid-min: 20rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--layout-grid-gap);
    padding: 2rem 5%;
  }
  main .layout-flex > div {
    border: 2px solid var(--accent);
    border-radius: 2%;
    flex: 1 1 var(--layout-grid-min);
    min-height: 200px;
  }
  main .msg-block {
    background-color: var(--accent--ui);
    text-align: center;
    padding: 1rem;
    width: min(90%, 750px);
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: inline-size;
  }
  main .msg-block p {
    color: white;
    font-size: min(15cqw, 2.4rem);
  }
}
@layer components {
  @layer component, states;
  @layer component {
    .button {
      background-color: var(--primary); /* Green background */
      color: var(--light); /* White text */
      padding: 0.5em 1em; /* Some padding */
      text-align: center; /* Centered text */
      text-decoration: none; /* Remove underline */
      display: inline-block; /* Make it an inline-block element */
      font-size: 16px; /* Larger font size */
      margin: 1em; /* Some margin */
      min-width: 10em;
    }
    .button2 {
      color: var(--button-color, var(--primary));
      background-color: var(--button-bg, var(--accent));
      padding: 0.5em 1em; /* Some padding */
      text-align: center; /* Centered text */
      text-decoration: none; /* Remove underline */
      display: inline-block; /* Make it an inline-block element */
      font-size: 16px; /* Larger font size */
      margin: 1em; /* Some margin */
    }
    .button2:where(:has(.icon)) {
      display: inline-flex;
      gap: 0.5em;
      align-items: center;
    }
    .button2:where(:has(.inclusively-hidden)) {
      border-radius: 50%;
      padding: 0.5em;
    }
    .button2:where(:not(:has(.icon))) {
      text-align: center;
      min-inline-size: 10ch;
    }
    .button2:where(:not(:has(.inclusively-hidden))) {
      padding: var(--button-padding, 0.35em 1em);
      border-radius: 0;
    }
    .icon {
      width: 1em;
      height: 1em;
    }
  }
  @layer states {
    .button:hover {
      background-color: var(--accent--ui); /* Darker green on hover */
      color: var(--accent); /* Keep text color white */
    }
  }
}
@layer utilities {}/*# sourceMappingURL=main.css.map */