.sandwich{width: 3rem;height: 2rem;  --color:var(--brown);  cursor: pointer; position: fixed; right: var(--gap);top: var(--gap);  padding: .2rem; }
.sandwich > div{width:100%;height:100%;left:0;top:0; display: flex; --color:var(--brown); flex-direction: column; justify-content: space-between; cursor: pointer; transition: all .5s;}
/* .sandwich:hover >div {scale:.9} */
.sandwich.close > div{rotate:180deg; }
.sandwich div div{width: 100%;height: 3px; 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(-10%,190%);}

.sandwich.scrolled{background-color:var(--yellow);}