Voico_Menu.css 1.75 KB
:root{
    --text-color:#fffde7;
    --background-color:#ff94c2;
    --accent-color:#ba2d65;
}

body{
    margin : 0;
    font-family: 'Source Sans Pro';
}
a{
    text-decoration:none;
    color:var(--text-color);
    
}
.menu{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:var(--background-color);
    padding: 8px 12px;
}
.menu_bar_content li:hover{
    background-color:var(--accent-color);
    border-radius: 4px;
}
.menu_bar_icons li:hover{
    background-color:var(--accent-color);
    border-radius: 4px;
}
.menu_bar_logo{
    font-size: 20px;
    
}
.menu_bar_logo i{
    color:var(--accent-color);
}
.menu_bar_content{
    display:flex;
    list-style: none;
    padding-left: 0;
}
.menu_bar_content li{
    padding: 8px 12px;
}
.menu_bar_icons{
    list-style: none;
    display: flex;
    padding-left:0;
}
.menu_bar_icons li{
    padding: 8px 12px;
}
.menu_toggle{
    display: none;
    position: absolute;
    right:32px;
    font-size: 24px;
}
@media screen and (max-width: 500px) {
    .menu{
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 24px;
    }
    .menu_bar_content{
        display:none;
        flex-direction:column;
        align-items:center;
        width: 100%;
    }
    .menu_bar_content li{
        width: 100%;
        text-align: center;
    }
    .menu_bar_icons{
        display:none;
        justify-content: center;
        width: 100%;
    }
    .menu_toggle{
        display: block;
    }
    .menu_bar_content.active,
    .menu_bar_icons.active{
        display:flex;
    }
}
button{
    background-color:var(--background-color);
    border:none;
    color:var(--text-color);
}
button:hover{
    background-color:var(--accent-color);
    border-radius: 4px;
}