.sandwich{width: 3rem;height: 2rem;  --color:black;  cursor: pointer; }
     .sandwich > div{width:100%;height:100%;left:0;top:0; display: flex; --color:black; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all .5s;}
     .sandwich:hover >div {scale:.9}
     .sandwich.close > div{rotate:180deg; scale:.5}
     .sandwich div div{width: 100%;height: 15%; 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(-11%,123%);}