nav ul {
        display: flex;
        justify-content: center;
        background: #FFFFFF00;
        text-align: center;
        margin: auto;
        padding: 0px;
    }
    
    nav ul li:hover {
        background-color: orange;
    }
    
    nav ul li a {
        text-decoration: none;
        color: orange;
    }
    
    nav {
        display: inline-flex;
        background-color: #404040;
        width: 60%;
        margin: auto;
    }
    
    nav>ul>li {
        display: inline-block;
        background-color: #505050;
        color: white;
        padding: 0.5em;
        margin: 1em;
        text-align: center;
        width: auto;
        border-radius: 5px;
        font-weight: bold;
    }
    
    nav>ul>li:hover {
        opacity: 0.7;
    }
    
    nav>ul>li:hover>a {
        color: #505050;
    }
    
    @media (max-width: 50em) {
        nav>ul {
            flex-direction: column;
        }
        nav {
            display: inline-flex;
        }
    }
    
    @media (max-width: 500px) {
        nav>ul {
            padding: 5px;
        }
        nav>ul>li {
            font-size: calc(6px + 2vw);
        }
    }
    
    @media (max-width: 300px) {
        nav>ul>li {
            text-transform: uppercase;
        }
    }