:root {
    --black: #0f0f0f;
    --gray: #3f3f3f;
    --white: #fff;
}

.nav-wrap {
    border: 1px solid var(--gray);
    width: fit-content;
    margin: 0 auto;
    border-radius: 500px;
    position: relative;
    box-shadow: inset 10px 0 10px black;
    background: linear-gradient(0deg, #141414, #242424);
    &:after {
        content: "";
        display: block;
        position: absolute;
        inset: -5px;
        background: linear-gradient(180deg, var(--gray), #212121);
        border-radius: 500px;
        z-index: -1;
    }
}
.nav {
    width: fit-content;
    anchor-name: --nav;
    margin: 6.7px;
    a {
        z-index: 10;
        position: relative;
        display: inline-block;
        padding: 20px 50px;
        color: white;
        text-decoration: none;
        &:before {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            opacity: 0.2;
        }
        &.active {
            anchor-name: --active;
            color: black;
        }
        &:hover:before {
            anchor-name: --nav;
        }
    }
}

.bubble {
    background: white;
    top: anchor(top);
    bottom: anchor(bottom);
    right: anchor(right);
    left: anchor(left);
    position: absolute;
    transition: all 0.2s;
    border-radius: 500px;
    &.active {
        position-anchor: --active;
        z-index: 2;
        background: linear-gradient(180deg, #f2f2f2, #b3b3b3);
        box-shadow: inset 0 2px 7px #fff;
    }
    &.hover {
        z-index: 1;
        background: linear-gradient(180deg, var(--gray), #212121);
        box-shadow: inset 0 2px 7px #ffffff29;
        position-anchor: --nav;
    }
}

.target {
    position: relative;
    z-index: -1;
}

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

* { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap: break-word; }

p { text-wrap: pretty; }
h1,
h2,
h3,
h4,
h5,
h6 { text-wrap: balance; }

#root, #__next { isolation: isolate; }

body {
  background: #0f0f0f;
  font-family: "Geist Sans", sans-serif;
  color: #fff;
  font-size: 20px;
}