* {
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%
}

body {
    background-color: #f5f5f5;
    overflow: hidden;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out
}

body.nightmode {
    background-color: #0a0a0a
}

body.nightmode .moon {
    fill: #fff
}

body.nightmode .moon:hover {
    background-color: #fefefe;
    fill: #000
}

#container {
    background-color: black;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden
}

.moon {
    position: fixed;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 1rem;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out
}

.moon:hover {
    background-color: #0a0a0a;
    fill: #fff
}

@media (max-width:1024px) {
    .moon {
        width: 1rem;
        height: 1rem
    }

    .ribbon {
        -webkit-transform: scale(.75);
        -moz-transform: scale(.75);
        -o-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
        -webkit-transform-origin: 100% 0;
        -moz-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0
    }
}

@media (max-width:640px) {
    .moon {
        width: 1rem;
        height: 1rem
    }

    .ribbon {
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -o-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 100% 0;
        -moz-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0
    }
}