* {
    box-sizing:border-box;
}

body {
    background:plum;
    transition:background .5s;
}

body.dark {
    background:rgb(92, 30, 92);
}

img {
    max-width:100%;
}

.menu {
background:plum;
position:fixed;
right:-200px;
top:0;
height:100vh;
width:200px;
padding:20px;
text-align:center;
transition:right .5s,
            background .5s;

}

.menu.active {
right:0;
}

.menu.glow {
    background:lemonchiffon;
}

.gear {
    background:plum;
    width:100px;
    height:100px;
    position:fixed;
    bottom:30px;
    left:30px;
    transition:transform .5s,
                background .5s;

}

.gear.spin {
    transform:rotate(180deg);

}

.gear.glow {
    background:lemonchiffon;
}