.sandwich{ display: none; width: 3rem;height: 2.5rem;  --color:white;  cursor: pointer;  background-color: var(--lightviolet); padding: .5rem; margin-left: 5%;}
.sandwich:before{content: ""; position: absolute;height: 100%;right: 80%; width: 30%; background-color: var(--lightviolet);top: 0; transform: skewX(10deg);}
.sandwich > div{width:100%;height:100%;left:0;top:0; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all .5s;}
.sandwich:hover >div {scale:.9}
.sandwich.close > div{rotate:180deg; scale:.8}
.sandwich div div{width: 100%;height: 2px; background-color: var(--color); transition: all 1s;}
.sandwich.close div > div:nth-child(2){ opacity: 0; transform: translateX(20%);}
.sandwich.close div > div:nth-child(1){ rotate: 45deg; ; transform-origin: left bottom;}
.sandwich.close div > div:nth-child(3){ rotate: -45deg; transform-origin: left top; transform: translate(-1%,165%);}