.horizontal-nav {
    padding-top: 90px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: 900px;
    right: 10px;
    z-index: 98;
}

.horizontal-nav ul {
    padding: 0;
    list-style: none;
    background-color: #444;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
    border-radius: 10px 10px 20px 20px;
}

.horizontal-nav ul li {
    display: inline;
}

.horizontal-nav ul li a {
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 15px 20px;
    display: inline-block;
    border-radius: 10px 10px 20px 20px;
}

.horizontal-nav ul li a:hover {
    background-color: #8579b0;
    color: white;
    border-radius: 10px 10px 20px 20px;
}

.horizontal-nav ul li a.active {
    background-color: #8579b0;
    color: white;
    border-radius: 10px 10px 20px 20px;
}

@media (max-width: 1216px) {
    .horizontal-nav {
        font-size: large;
    }
}

@media (max-width: 1215px) {
    .horizontal-nav {
        font-size: medium;
    }
}

@media (max-width: 700px) {
    .horizontal-nav {
        font-size: small;
    } 
}

@media (max-width: 420px) {
    .horizontal-nav {
        font-size: x-small;
        max-width: fit-content;
    }
}