:root {
    --color-green: rgba(27, 47, 38);
    --color-brown: rgba(193, 125, 76);
    --color-cream: rgba(215, 206, 197);
    --color-light-gray: rgba(217, 217, 217, 0.2);
    --color-white: rgba(255, 255, 255);
    --color-black: rgba(0, 0, 0);
    --font-bebas: "Bebas Neue", sans-serif;
    --font-inter: "Inter", sans-serif;
  }
  
  /* ------------------------------ CSS RESET --------------------------------- */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  
  /* Set core root defaults */
  html {
    scroll-behavior: smooth;
  }
  
  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    font-family: var(--font-inter);
  }
  
  h1 {
    font-family: var(--font-bebas);
    font-weight: 400;
  }
  
  a {
    text-decoration: none;
    color: unset;
    text-decoration-skip-ink: auto;
  }
  
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  
  /* ------------------------------ UTILITIES --------------------------------- */
  
  .container {
    width: clamp(300px, 90vw, 1400px);
    margin-inline: auto;
  }
  
  .flex-sb-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .flex {
    display: flex;
  }
  
  /* ------------------------------ HEADER ------------------------------------- */
  
  header {
    background-color: var(--color-green);
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-white);
    position: sticky;
    top: 0;
    z-index: 999;
  }
  
  .logo {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 500;
  }
  
  .logo:hover {
    opacity: 0.75;
  }
  
  .input-wrapper {
    position: relative;
    margin-left: -7.5%;
  }
  
  .input-icon {
    position: absolute;
    height: 40%;
    top: 50%;
    left: 0.75rem;
    transform: translate(0, -50%);
    pointer-events: none;
  }
  
  .search-input {
    background-color: var(--color-light-gray);
    border-radius: 2.5rem;
    padding: 0.5rem 1rem 0.5rem 0;
    border: none;
    color: var(--color-white);
    transform-origin: center;
    text-indent: 2.5rem;
    width: 2.625rem;
    will-change: width;
    transition: width 0.5s ease;
  }
  
  .search-input:focus {
    outline: 1px solid var(--color-white);
    width: 20rem;
  }
  
  .search-input::-webkit-search-cancel-button {
    display: none;
  }
  
  .mobile-search {
    display: none;
  }
  
  .mobile-search .input-wrapper {
    margin-left: 0;
    margin-block: 0.75rem 0.5rem;
  }
  
  .mobile-search .input-wrapper .search-input {
    width: 100%;
  }
  
  .hamburger-menu {
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    cursor: pointer;
    position: relative;
    z-index: 1001;
  }
  
  .line-menu {
    display: inline-block;
    height: 2px;
    width: 1.4275rem;
    will-change: transform;
    transform-origin: center left;
    transition: all 300ms ease;
    background-color: var(--color-white);
  }
  
  .line-menu:first-child {
    transform-origin: center right;
    transform: scale(0.5, 1);
  }
  
  .line-menu:last-child {
    transform: scale(0.5, 1);
  }
  
  .hamburger-menu.active .line-menu {
    background-color: var(--color-green);
  }
  
  .hamburger-menu.active .line-menu:first-child {
    transform: scale(1, 1) rotate(-45deg);
  }
  
  .hamburger-menu.active .line-menu:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger-menu.active .line-menu:last-child {
    transform-origin: center right;
    transform: scale(1, 1) rotate(45deg);
  }
  
  .hide-for-small-mobile {
    display: none;
  }
  
  footer {
    background-color: var(--color-brown);
    color: var(--color-white);
    padding-block: 1rem;
    font-weight: 300;
    font-size: 0.875rem;
  }
  
  footer .links-container {
    gap: 1.5rem;
  }
  
  .menu-box {
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(7px);
    padding-inline: 10rem;
    transition: transform 200ms ease;
    transform: translate3d(100%, 0, 0);
  }
  
  .menu-box.active {
    transform: translate3d(0, 0, 0);
  }
  
  .menu-box ul {
    position: relative;
    z-index: 1001;
    list-style: none;
    font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
    font-weight: 500;
  }
  
  .menu-box ul li:hover {
    color: var(--color-brown);
  }
  
  .menu-box ul > * + * {
    margin-block-start: 3rem;
  }
  
  @media screen and (max-width: 720px) {
    .menu-box {
      padding-inline: 7rem;
    }
  
    .hide-for-desktop {
      display: block;
    }
  
    .hide-for-mobile {
      display: none;
    }
  
    footer {
      font-size: 0.625rem;
    }
  
    footer .links-container {
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  
  @media screen and (max-width: 420px) {
    .menu-box {
      width: 100vw;
      padding-inline: 0;
    }
  }