* {
    box-sizing: border box;
}

body {
    background:cadetblue;
}

.dark {
    background:darkolivegreen;
    transition: .3s;
}

.menu {
    background: gold;
    font-size: 150%;
    height: 100vh;
    width:300px;
    position:fixed;
    right:-300px;
    top:0;
    opacity:0;

    padding:20px;
    text-align:center;

    transition: right .3s,
    opacity .3s .1s, background .3s;
}

.active {
    right:0px;
    opacity:1;
}

.gear {
    background: gold;
    width:100px;
    height:100px;
    position:fixed;
    bottom:30px;
    left:30px;

    transition: rotate .3s, 
    background .3s;
}

.spin {
    rotate:180deg;
}

.glow {
    background:lightgoldenrodyellow;
    transition: .7s;
}