* {
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%
}

body {
    background-color: #181818;
    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;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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: #f8f8f8;
    fill: #f8f8f8;
}

@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
    }
}