@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap";.top-nav{display:flex;justify-content:space-between;width:100%;align-items:stretch;position:fixed}.top-nav__logo{display:flex}.top-nav__title{font-size:var(--fs-700);text-transform:uppercase;margin:0 0 0 1rem}.top-nav__menu{display:flex;align-items:center;height:100%}.top-nav__menu ul{display:flex;list-style:none;gap:3rem;font-weight:var(--fw-semi-bold);text-transform:uppercase}.top-nav__menu ul li{position:relative;cursor:pointer;height:100%;overflow:hidden}.top-nav__menu ul li:hover:before{height:100%;width:100%}.top-nav__menu ul li:before{content:"";position:absolute;top:50%;left:0;width:100%;height:0;opacity:0;background-color:var(--clr-secondary);transform:translate3d(0,-50%,0);transition:height .3s ease}:root{--ff-base: "Poppins", sans-serif;--fw-regular: 400;--fw-semi-bold: 500;--fw-bold: 700;--fs-200: .875rem;--fs-300: 1rem;--fs-400: 1.125rem;--fs-500: 1.75rem;--fs-600: 2rem;--fs-700: 3.5rem;--clr-neutral: hsl(0, 0%, 8%, 1);--clr-accent: hsl(41, 94%, 48%, 1);--clr-primary: hsl(113, 33%, 31%, 1);--clr-secondary: hsl(40, 18%, 93%, 1);--clr-white: hsl(0, 0%, 100%, 1);--gap: 1rem}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}img,svg,picture,video{display:block;max-width:100%}body{line-height:1.5;min-height:100vh;background-color:var(--clr-white);font-family:var(--ff-base);font-size:var(--fs-400);font-weight:var(--fw-regular);color:var(--clr-neutral)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.flex{display:flex;gap:var(--gap, 1rem)}.grid{display:grid;gap:var(--gap, 1rem)}.container{padding-inline:2rem;max-width:60rem;margin-inline:auto}.bg-dark{background-color:var(--clr-neutral)}.bg-primary{background-color:var(--clr-primary)}.bg-accent{background-color:var(--clr-accent)}.bg-light{background-color:var(--clr-secondary)}.text-dark{color:var(--clr-neutral)}.text-primary{color:var(--clr-primary)}.text-accent{color:var(--clr-accent)}.text-light{color:var(--clr-secondary)}.text-200{font-size:var(--fs-200)}.text-300{font-size:var(--fs-300)}.text-400{font-size:var(--fs-400)}.text-500{font-size:var(--fs-500)}.text-600{font-size:var(--fs-600)}.text-700{font-size:var(--fs-700)}.text-regular{font-weight:var(--fw-regular)}.text-semi-bold{font-weight:var(--fw-semi-bold)}.text-bold{font-weight:var(--fw-bold)}.uppercase{text-transform:uppercase}