*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --nav-width:min(80vw,30rem);
    --nav-height:3rem;

    --blue:#0935ff;
    --cyan:#00e1ff;
    --white:#fff;

    --circle:3.8rem;
    --rabbit:3.2rem;

    --ear-width:.75rem;
    --ear-height:2.2rem;

    --lift:1.15rem;
}

body{
    padding-top:4.5rem;
    font-family:sans-serif;
}

/* ========================= */

.navbar{
    margin: 0 auto ;
    width:var(--nav-width);
    height:var(--nav-height);

    display:flex;
    justify-content: space-evenly;
    position:relative;
    overflow:visible;

    background-image: linear-gradient(var(--blue), rgb(4, 0, 255));

    border:2px solid var(--cyan);
    border-radius:999px;

}

/* ========================= */

.nav-item{
    width: 20%;
    height:100%;
    display:flex;
    justify-content:space-evenly;
    align-items:center;

    text-decoration:none;
    color:white;

    font-weight:600;
    font-size:.95rem;

    transition:.35s ease;

}

/* ========================= */

.nav-item.active{

    transform:translateY(calc(var(--lift) * -1));

}
/* White outline */

.nav-item.active::before{

    content:"";

    position:absolute;

    width:var(--circle);
    height:var(--circle);

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:
        radial-gradient(1200px 500px at 50% -150px, rgba(0,225,255,.22), transparent 60%),
        linear-gradient(180deg, #050717 0%, #070a1a 100%);
    border-radius:50%;

    z-index:0;

}

/* ========================= */
/* Rabbit Head */

.rabbit{
    opacity: 0;
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:var(--rabbit);
    height:var(--rabbit);

    background:var(--blue);

    border-radius:50%;

    z-index:1;

}

/* ========================= */
/* Rabbit Ears */

.rabbit::before,
.rabbit::after{

    content:"";

    position:absolute;

    width:var(--ear-width);
    height:var(--ear-height);

    background:var(--blue);

    border-radius:100%;

    top:.45rem;

    transform-origin:bottom center;

    transition:1s ease;

    z-index:-1;

    border: 1px solid var(--cyan);

}

/* Left Ear */

.rabbit::before{

    left:.2rem;

    transform:
        translateY(.9rem)
        rotate(-30deg);

}

/* Right Ear */

.rabbit::after{

    right:.2rem;

    transform:
        translateY(.9rem)
        rotate(30deg);

}

/* Active Animation */
.nav-item.active .rabbit{
    opacity:1;
}

.nav-item.active .rabbit::before {
    animation: rabbitFloatLeft 2s ease-in-out infinite;
}

.nav-item.active .rabbit::after {
    animation: rabbitFloatRight 2s ease-in-out infinite;
}

@keyframes rabbitFloatLeft {
    0%, 100% {
        transform:
            translateY(-2.8rem)
            rotate(-30deg);
    }

    50% {
        transform:
            translateY(-3rem)
            rotate(-30deg);
    }
}

@keyframes rabbitFloatRight {
    0%, 100% {
        transform:
            translateY(-2.8rem)
            rotate(30deg);
    }

    50% {
        transform:
            translateY(-3rem)
            rotate(30deg);
    }
}



/* ========================= */

.label{

    position:relative;
    z-index:2;

}

/* ========================= */
/* Site Footer */

.site-footer{
    text-align:center;
    padding:1.5rem 1rem 2rem;
    border-top:1px solid var(--border);
    margin-top:2rem;
}

.footer-text{
    color:var(--muted2);
    font-size:.85rem;
    letter-spacing:.03em;
}