/* Assuming you have already defined CSS Custom Properties in variables.css */
/* Include the variables.css file before this CSS file in your HTML. */

/* Menu */
.class-menu {
    display: flex;
    justify-content: center;
    text-align: center;
    position: fixed;
    width: 100%;
    height: var(--size-height-banner-items);
    top: 0;
    z-index: 100;
    background-color: transparent;
    overflow: hidden;
    background: var(--color-palette-color2);
    opacity: 80%;
}

.class-menu-items {
    position: fixed;
    height: var(--size-height-banner-items);
    top: 0;
    z-index: 100;
    background-color: transparent;
    overflow: hidden;
    text-align: right;
}

@media screen and (max-width: 600px) {
    .class-menu-items {
        display: flex;
        width: 100%;
        text-align: center;
        justify-content: space-around;
        align-items: center;
    }
}

.class-menu-items > a {
    display: inline-block;
    text-align: center;
    align-items: center;
    text-decoration: none;
    padding: 18px;
}

@media screen and (max-width: 600px) {
    .class-menu-items > a {
        display: inline-block;
        padding: 0px;
        margin-top: 30px;
        margin-left: 10px;
        margin-right: 10px;
        width: 50px;
        height: 100%;
    }
}

.class-menu-items > a > p {
    padding-left: 5px;
}

@media screen and (max-width: 600px) {
    .class-menu-items > a > p {
        visibility: hidden;
    }
}

.class-menu-items > a:hover {
    background-color: rgba(70, 189, 248, 0.1); /* Hard-coded RGB values */
    color: var(--color-palette-color3);
}

i.fa, i.fa-brands {
    font-size: 20px;
}

@media screen and (max-width: 600px) {
    i.fa, i.fa-brands {
        font-size: 40px;
    }
}