* {
    box-sizing: border-box;
}

body {
    background-color: rgb(159, 164, 163);
}

body.dark {
    background-color: rgb(87, 105, 100);
    transition: background-color .3s;
}

.flex {
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;

    z-index: -1;

    /* align vertically */
    align-items: center;
    
    /* align horizontally */
    justify-content: space-evenly;
}

.box {
    background-color: rgb(92, 115, 116);
    width: 100px;
    height: 100px;
    transition: background-color .3s, box-shadow .3s;

    animation: spin 5s linear infinite;
    /* dictates how animation runs */
    animation-play-state: paused;
}

.box.dark {
    background-color: rgb(41, 61, 59);
}

.box.glow {
    background-color: rgb(255, 254, 247);
    box-shadow: 0 0 10px 5px rgb(255, 254, 248);
}

.box.dark.glow {
    background-color: rgb(255, 213, 213);
    box-shadow: 0 0 15px 5px rgb(255, 228, 228);
}

.box.spin {
    animation-play-state: running;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.character {
    width: 150px;
    position: fixed;
    bottom: 10px;
    left: 10px;

    /* display: none; */
    opacity: 0;
    transition: opacity .3s;
}

/* .character.show { */
    /* display: block; */
    /* opacity: 1; */
/* } */

.draggable {
    cursor: grab;
}