@import "https://esm.sh/@unocss/reset";

:root {
  --color1: #f9ceb2;
  --color1-bg: #f9ceb241;
  --color1-text: var(--color3);
  --color2: #bea69e;
  --color2-bg: #bea69e41;
  --color2-text: var(--color1-text);
  --color3: #383d50;
  --color3-bg: #383d5041;
  --color3-text: #f9f5eb;
}

html {
  scroll-behavior: smooth;

  &.menu-open {
    overflow: hidden;
  }
}

picture {
  display: flex;
}
body {
  font-family: text;
}

p {
  margin-bottom: 1rem;
}

.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (max-width: 768px) {
  .bg-cover {
    object-position: 60% center;
  }
}

ul.checklist {
  list-style: none;
  padding-left: 0;
  li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.25rem;
    &::before {
      /*content: "✓";*/
      content: "";
      position: absolute;
      left: 0;
      top: .5rem;
      color: var(--color3);
      width: .75rem;
      height: .75rem;
      background-color: var(--color1);      
      border-radius: 9999px;
      text-align: center;
    }
  }
}

.themeColor1 {
  background-color: var(--color1-bg);
  color: var(--color1-text);
}
.themeColor2 {
  background-color: var(--color2-bg);
  color: var(--color1-text);
}
.themeColor3 {
  background-color: var(--color3-bg);
  color: var(--color1-text);
}

.button {
  display:flex;align-items:center;gap:0.5rem;border-radius:9999px;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;
  &.primary {
    background-color:var(--color3);color:var(--color3-text);
  }&.primary:hover{--un-bg-opacity:1;background-color:rgb(31 41 55 / var(--un-bg-opacity));}
  &.secondary {
    border-width:1px;border-color:var(--color-3);color:var(--color2-text);
  }&.secondary:hover{border-color:var(--color2);--un-bg-opacity:1;background-color:rgb(31 41 55 / var(--un-bg-opacity));color:var(--color3-text);}
}

/* on small screens e menu header nav on small screen full screen and vertical */
@media screen and (max-width: 768px) {
  header {
    button.menu-toggle {
      z-index:50;margin-left:1rem;border-radius:9999px;padding:0.5rem;
    }
    nav {
      position:fixed;top:0;left:0;z-index:40;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));transition-property:top;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;
      ul {
        display:flex;flex-direction:column;gap:1rem;
        li {
          margin:0;padding:0;font-size:1.5rem;line-height:2rem;color:var(--color3-text);
        }
      }

      .menu-open & {
        top:0;
      }
      html:not(.menu-open) & {
        top:-100%;
      }
    }
  }
}
@media screen and (min-width: 769px) {
  .menu-toggle {
    display:none;
  }
}