*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: rgb(30, 35, 44);
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
}

ul{
    width: 100%;
    display: flex;
    justify-content: center;    
    align-items: center;
    list-style: none;
}

ul li a{
color: rgb(210, 211, 145);    
text-decoration: none;
padding: 8px 15px;
font-size: 20px;
position: relative;
margin: 8px 15px;
}

ul li a::before{
    content: "";
    position: absolute;
    transition: all 0.3s ease-in-out;
    transform-origin: left;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-top: 2px solid rgb(210, 211, 145);
border-left: 2px solid rgb(210, 211, 145);
}

ul li a::after{
    content: "";
    position: absolute;
    transition: all 0.3s ease-in-out;
    transform-origin: left;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
border-bottom: 2px solid rgb(210, 211, 145);
border-right: 2px solid rgb(210, 211, 145);
}

ul li a:hover:after,
ul li a:hover:before{
    width: 10%;
    height: 20%;
    transform: rotate(360deg);
}