*{
    box-sizing: border-box;
}

img{
    max-width: 100%;
}

body {
     background-image: url("Box.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative;
    background-color:#DEB4E7;
    margin:0;
}


.container {
    height:100vh;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    z-index:-1;
}

.box {
    height: 100px;
    width:100px;
    background-color: #FCDAC5;
}

.box.dark {
    background-color:#BFDEEF;
    
}

.box.spin{
    animation: spin 5s linear infinite;

}

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

.shell {
    width:200px;
    position:fixed;
    bottom:10px;
    right:10px;
    display:none;
}

.shell.reveal{
    display:block;
}

.draggable{
    cursor:grab;
}