.nav {
        border: 1px solid navy;
        background-color: whitesmoke;
    }

    .nav ul {
        display: flex;
        gap: 20px;
        flex-direction: row;
        justify-content: center;
        list-style: none;

    }

    .nav ul li {
        position: relative;
        display: block;
        padding: .6rem 1rem;
        margin: 0 .2rem;
        cursor: pointer;
    }

    .nav ul li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        transform: scale(0);
        background-color: hotpink;
        transition: transform .3s;
    }

    .nav ul li:hover::after {
        transform: scale(1);
    }

    .nav ul li a {
        text-decoration: none;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: black;
        font-weight: 400;
    }