@import "https://unpkg.com/open-props";

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --default-font-family: 'Sofia Sans';
  --default-text: hsl(30deg 16% 15%);
  --default-background: hsl(46deg 76% 94%);
  --border-hsl: 30deg 16% 15%;
  --border-color: hsl(var(--border-hsl));
  --hover-color: hsl(30deg 16% 25%);
  --dark-background: hsl(0deg 6% 35%);

  --star-color: hsl(46deg 76% 40%);
}

body {
  color: var(--default-text);
  font-family: var(--default-font-family);
  background-color: var(--default-background);
}

::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 100vw;
}

::-webkit-scrollbar-track {
  background: hsl(30deg 16% 82%);
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hover-color);
}

.flex {
  display: flex;
  gap: var(--gap, 3rem);
}

.grid {
  display: grid;
  gap: var(--gap, 5rem);
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;

  .modal {
    padding: 1em;
    text-align: center;
    color: var(--default-background);
    background-color: var(--border-color);
    border: 0.125em solid var(--star-color);
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .modal-content {
      font-size: 1rem;
      font: inherit;
      padding: 0.5rem;
    }

    button {
      margin-top: 0.5rem;
    }
  }
}

header {
  position: sticky;
  top: 0;
  left: 0;
  padding: 1em;

  background-color: var(--default-background);
  width: 100%;

  z-index: 9998;
}

.primary-header {
  border: var(--border-color) 0.25em solid;
  padding: 1em 1em;

  background-color: var(--default-background);
}

.mobile-nav-toggle {
  display: none;
}

.logo {
  img {
    max-height: 100px;
  }
}

nav ul {
  justify-content: space-around;
  align-items: center;

  list-style: none;
  padding: 0;
  margin: 0;

  width: 100%;

  li {
    position: relative;
    text-align: center;
  }

  .header-element {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em;

    font-size: var(--font-size-2);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--default-text);
  }

  @media (hover: hover) {
    /* inspo: https://www.youtube.com/watch?v=FEmysQARWFU */
    .header-element::before {
      content: '';
      display: block;
      height: 100%;

      inset: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;

      border: 0.125em solid var(--border-color);

      position: absolute;
      vertical-align: middle;

      opacity: 0;
      width: 0%;
      transition: all 250ms ease-in-out;
    }
    .header-element:hover::before {
      opacity: 1;
      width: 100%;
    }
  }
}

.logo-mobile {
  display: none;
}

h1 {
  font-size: var(--font-size-fluid-3);
}
h2 {
  font-size: var(--font-size-4);
}

b {
  color: var(--border-color);
}

a {
  color: var(--border-color);
  text-decoration: none;
}

a:visited {
  color: var(--border-color);
}

input,
button,
select,
textarea {
  font: inherit;
}

form {
  display: grid;
  gap: 2rem;
  align-items: start;

  grid-template-columns: 1fr 1fr;
}

.form-group {
  display: grid;
  @media (max-width: 85em) {
    grid-column: span 2;
  }
}

label {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
}

input[type="text"] {
  font-size: 1rem;
  background: hsl(46deg 76% 88%);
  border: var(--border-color) 0.0625em solid;

  padding: 1ex 1ex;
  height: 5ex;
}

textarea {
  font-size: 1rem;
  background: hsl(46deg 76% 88%);
  border: var(--border-color) 0.0625em solid;

  resize: block;

  padding: 1ex 1ex;
  height: 3lh;
  box-sizing: content-box;
}

button {
  font-size: 1rem;
  background: hsl(46deg 76% 88%);
  border: var(--border-color) 0.0625em solid;
  padding: 1ex 2ex;
  height: 5ex;
}

main {
  padding: 3em 2em;
  display: grid;
}

.tagline {
  text-align: center;
  font-size: var(--font-size-5);
}

.section {
  display: block;

  margin: 0.75rem;

  border: var(--border-color) 0.0625em solid;

  --max-width: 10rem;
  --padding-block: 1.5rem;
  --padding-inline: 2rem;
  max-width: min(var(--max-width), 100% - (var(--padding) * 2));
  padding: var(--padding-block) var(--padding-inline);

  font-size: var(--font-size-3);
}

/* portrait images */
.portrait {
  max-height: 50vh;

  @media (min-width: 50em) and (max-width: 85em) {
    max-height: 40vh;
    align-self: center;
  }
  @media (max-width: 50em) {
    margin-inline: auto;
    max-height: unset;
    max-width: 60vw;
  }
}

.home-intro {
  margin-top: 3rem;

  display: flex;
  flex-direction: row;
  gap: 1rem;

  justify-content: space-between;

  @media (max-width: 50em) {
    flex-direction: column;
  }
}

.marketing-and-reviews {
  display: grid;
  grid-template-columns: 3fr 1fr;

  @media (max-width: 85em) {
    grid-template-columns: 1fr;
  }
}

.marketing {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;

  @media (max-width: 50em) {
    flex-direction: column;
  }

  img {
    margin-block: auto;
    max-height: 25vh;

    @media (max-width: 85em) {
      max-height: unset;
      max-width: 40vw;
    }
    @media (max-width: 50em) {
      margin-inline: auto;
      max-width: 60vw;
    }
  }
}

#review {
  display: flex;
  flex-direction: column;
}

.review {
  flex-grow: 1; /* grow to fill the #review flexbox (allows review-details to push toward the bottom of the #review div) */

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-block: auto;
  min-height: 15rem;
  max-height: 15rem;

  .review-description {
    overflow-y: auto;
    font-size: var(--font-size-1);
  }

  .review-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1em 0em 0.5em;
    gap: 0.75em;

    .review-author {
      font-size: var(--font-size-2);
      align-self: flex-end;
    }

    .review-stars {
      align-self: flex-start;
      white-space: nowrap;
    }
  }
}

.star {
  display: inline-block;
  width: 1.25em;
  aspect-ratio: 1;
  position: relative;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-color: var(--star-color);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (min-width: 50em) and (max-width: 85em) {
  .logo {
    img {
      max-height: 6rem;
    }
  }

  .primary-header {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .star {
    width: 1em;
  }
}

@media (max-width: 25em) {
  .star {
    width: 1em;
  }
}

@media (min-width: 25em) and (max-width: 50em) {
  .star {
    width: 1.25em;
  }
}

@media (max-width: 50em) {
  .logo {
    img {
      max-height: 5rem;
    }
  }
  .logo-mobile {
    display: block;
    padding-left: 1rem;
  }

  .primary-header {
    padding-inline: 0em;
  }

  main {
    padding-top: 2rem;
    .section {
      font-size: var(--font-size-2);
    }

    .section {
      margin-inline: 0rem;
    }
  }

  nav {
    --gap: 0em;

    background-color: hsl(var(--border-hsl) / 98%);

    position: fixed;
    inset: 0 0 0 50%;

    .logo-desktop {
      display: none;
    }

    ul {
      --gap: 1em;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      padding: min(30dvh, 4rem) 1em;
      .header-element {
        color: var(--default-background);
      }
      @media (hover: hover) {
        /* inspo: https://www.youtube.com/watch?v=FEmysQARWFU */
        .header-element::before {
          border-color: var(--default-background);
        }
      }
    }

    transform: translateX(100%);
    transition: transform 300ms ease-out;
  }
  .open {
    transform: translateX(0%);
    .mobile-nav-toggle {
      color: var(--default-background);
      left: 0.625rem;
    }
  }

  .mobile-nav-toggle {
    display: block;
    position: relative;
    color: var(--border-color);
    width: 2rem;
    aspect-ratio: 1;
    top: 2rem;
    right: 3.5rem;
    height: fit-content;
  }
}

.prime--angle-double-left {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 16.25a.74.74 0 0 1-.53-.22L7 12.53a.75.75 0 0 1 0-1.06L10.47 8a.75.75 0 0 1 1.06 1l-3 3l3 3a.75.75 0 0 1 0 1.06a.74.74 0 0 1-.53.19m5.5 0A.74.74 0 0 1 16 16l-3.5-3.5a.75.75 0 0 1 0-1.06L16 8a.75.75 0 0 1 1 1l-3 3l3 3a.75.75 0 0 1 0 1a.74.74 0 0 1-.5.25'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.prime--angle-double-right {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 16.25a.74.74 0 0 1-.53-.22a.75.75 0 0 1 0-1.06l3-3l-3-3A.75.75 0 0 1 13.53 8l3.5 3.5a.75.75 0 0 1 0 1.06L13.53 16a.74.74 0 0 1-.53.25m-5.5 0A.74.74 0 0 1 7 16a.75.75 0 0 1 0-1l3-3l-3-3a.75.75 0 0 1 1-1l3.5 3.5a.75.75 0 0 1 0 1.06L8 16a.74.74 0 0 1-.5.25'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.prime--check-square {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 20.75H6A2.75 2.75 0 0 1 3.25 18V6A2.75 2.75 0 0 1 6 3.25h8.86a.75.75 0 0 1 0 1.5H6A1.25 1.25 0 0 0 4.75 6v12A1.25 1.25 0 0 0 6 19.25h12A1.25 1.25 0 0 0 19.25 18v-7.71a.75.75 0 0 1 1.5 0V18A2.75 2.75 0 0 1 18 20.75'/%3E%3Cpath fill='%23000' d='M10.5 15.25A.74.74 0 0 1 10 15l-3-3a.75.75 0 0 1 1-1l2.47 2.47L19 5a.75.75 0 0 1 1 1l-9 9a.74.74 0 0 1-.5.25'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.knife {
/* .fluent-emoji-high-contrast--kitchen-knife { */
  position: relative;
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m14.665 10.393l1.387 1.492l.003-.002l13.454 14.404l.296.316a.7.7 0 0 1 .14.215a.73.73 0 0 1-.18.825l-.34.32a7.763 7.763 0 0 1-10.98-.38l-8.41-9.01c-.3-.32-.28-.82.04-1.11l2.362-2.204l-1.382-1.496l-3.3-3.54a5.15 5.15 0 0 0-2.94-1.57a3.358 3.358 0 0 1-1.68-5.83c1.38-1.21 3.48-1.06 4.73.28zm14.028 16.485L16.006 13.296L11.4 17.594l7.467 8a7.786 7.786 0 0 0 9.826 1.284M8.035 5.903a.91.91 0 1 0-1.82 0a.91.91 0 0 0 1.82 0m3.64 3.89a.91.91 0 1 0-1.82 0a.91.91 0 0 0 1.82 0'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.scissors {
/* .fluent-emoji-high-contrast--scissors { */
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m13.119 15.785l1.632-1.67l10.742 10.742c.91.91.933 2.467.09 3.392zm1.645-4.485a6.3 6.3 0 0 0 .256-1.77C15.02 5.92 12.1 3 8.5 3S2 5.92 2 9.52s2.9 6.52 6.5 6.52a6.3 6.3 0 0 0 1.786-.26l1.237 1.237l-.45.451l-2.079 2.076l-3.961 3.959a4.36 4.36 0 0 0 0 6.164l.394.394l.304.304l.001.002l.708.707l.707-.707l8.863-8.863l8.863 8.863l.701.702l.707-.696l.64-.63l.006-.006c1.706-1.706 1.685-4.59-.02-6.294l-6.418-6.418l.46-.46l.78-.78a6.3 6.3 0 0 0 1.771.255c3.6 0 6.5-2.92 6.5-6.52S27.1 3 23.5 3s-6.52 2.92-6.52 6.52c0 .62.092 1.22.26 1.786l-1.236 1.234zM5.48 9.52c0-1.67 1.36-3.03 3.03-3.03s3.03 1.36 3.03 3.03c0 1.68-1.36 3.03-3.03 3.03s-3.03-1.36-3.03-3.03m7.458 8.912l1.658 1.658l-8.156 8.156a2.36 2.36 0 0 1 .007-3.329l3.96-3.958l2.079-2.076zM20.46 9.52c0-1.67 1.36-3.03 3.03-3.03s3.03 1.36 3.03 3.03s-1.36 3.03-3.03 3.03s-3.03-1.35-3.03-3.03m-4.48 8.58a1.07 1.07 0 1 0 0-2.14a1.07 1.07 0 0 0 0 2.14'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.toolbox {
/* .fluent-emoji-high-contrast--toolbox { */
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23000'%3E%3Cpath d='M25.5 23.05h-19c-.28 0-.5.22-.5.5s.22.5.5.5h19c.28 0 .5-.22.5-.5c0-.27-.22-.5-.5-.5m-19 3h19c.28 0 .5.23.5.5c0 .28-.22.5-.5.5h-19c-.28 0-.5-.22-.5-.5s.22-.5.5-.5'/%3E%3Cpath d='M5.12 9.06H10v-1.6C10 6.1 11.1 5 12.47 5h7.07C20.9 5 22 6.1 22 7.46v1.6h4.87c2.284 0 4.12 1.85 4.12 4.12v15.315c.013 1.415-1.146 2.555-2.55 2.555H3.56A2.56 2.56 0 0 1 1 28.49V13.18c0-2.284 1.85-4.12 4.12-4.12m14.63-1.6c0-.11-.09-.21-.21-.21h-7.08c-.11 0-.21.09-.21.21v1.6h7.5zm-14.63 3.6c-1.17 0-2.12.944-2.12 2.12v3.87h4v-.37c0-.35.28-.62.62-.62h2.75c.35 0 .62.28.62.62v.37H21v-.37c0-.35.28-.62.62-.62h2.75c.35 0 .62.28.62.62v.37h4v-3.87c0-1.17-.944-2.12-2.12-2.12zM21 18.05H10.99A1.99 1.99 0 0 1 9 20.03a2 2 0 0 1-2-1.98H3v10.44c0 .308.252.56.56.56h24.88a.545.545 0 0 0 .55-.538V18.05h-4A1.99 1.99 0 0 1 23 20.03a2 2 0 0 1-2-1.98'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}