lovespace menu 2

<div id="nav">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#works">works</a>
<a href="#contact">contact</a>
</div>

<style>
#nav {
display: flex;
gap: 5px;
flex-direction: row;
flex-wrap: wrap;
}

#nav a {
text-align: center;
text-decoration: none;
white-space: nowrap;
display: inline-block;
width: 5em;
height: 1.5em;
line-height: 1.5em !important;
font: 0.65em system-ui;
background: #BD8088;
background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(189,128,136,0.008) 100%);
color: #303030;
border: 1px solid #e0afb6;
border-radius: 10px 5px 10px 5px;
box-shadow: inset 13px 0px 6px -10px #F0D7DB, inset -13px 0px 6px -10px #F0D7DB, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #F0D7DB;
-webkit-filter: drop-shadow(0px 0px 1px #F0D7DB);
-webkit-transition: border-radius ease-in-out 0.5s;
}

#nav a:hover {
border-radius: 5px 5px 5px 5px;
-webkit-transition: border-radius ease-in-out 0.5s;
}
</style>