body{margin:0;overflow-x:hidden;display:flex;justify-content:center;align-items:center}.d-none{display:none}@keyframes burger-menu{0%{transform:scale(.7)}to{transform:scale(1)}}.white{background-color:#000;margin-left:8%}@media (max-width: 800px){.white{margin-left:0}}.white>div{background-color:#fffcf3}.dot-dark{border-left:.5px solid #FFFCF3;border-top:.5px solid #FFFCF3}.dot-white{border-left:.5px solid black;border-top:.5px solid black}.dark{background-color:#fffcf3}.dark>div{background-color:#000}.outside-box{width:60px;height:50px;position:relative}.outside-box:hover>.arm1{top:25%;transform:rotate(-60deg)}.outside-box:hover>.arm2{top:51%;transform:rotate(60deg);left:0%}.outside-box:hover>.arm3{top:54%;left:25%;transform:rotate(-70deg);border-top-right-radius:0;border-bottom-right-radius:0}.outside-box:hover>.arm4{top:20%;transform:rotate(-71deg);left:35%}.outside-box:hover>.line1{top:51%;left:60%;transform:rotate(-60deg)}.outside-box:hover>.line2{top:25%;left:60%;transform:rotate(60deg)}.outside-box:hover>.dot{top:39%;left:42%;border-left:none;border-top:none;z-index:2}.arm1{position:absolute;width:20px;height:5px;border-radius:4px;top:40%;transform:rotate(-70deg);transition:1s ease-in-out}.arm2{position:absolute;width:20px;height:5px;border-radius:4px;top:40%;transform:rotate(70deg);left:10%;transition:1s ease-in-out}.dot{position:absolute;width:5px;height:5px;border-radius:4px;top:45%;left:15%;transition:1s ease-in-out}.arm3{position:absolute;width:20px;height:5px;border-radius:4px;top:40%;left:25%;transform:rotate(-70deg);transition:1s ease-in-out}.arm4{position:absolute;width:20px;height:5px;border-radius:4px;top:40%;transform:rotate(70deg);left:35%;transition:1s ease-in-out}.line1{position:absolute;width:20px;height:5px;border-radius:4px;top:40%;left:45%;transform:rotate(-70deg);transition:1s ease-in-out}.line2{position:absolute;width:20px;height:5px;border-radius:4px;top:40%;left:55%;transform:rotate(70deg);transition:1s ease-in-out}