* {
    box-sizing: border-box;
}

body {
    background:lightblue;
    transition: background 1s;
}

.flex {
    display:flex;
    margin-top:100px;
    justify-content: space-evenly;
}

.puzzle {
    position:fixed;
    top:100px;
    left:10px;
    width: 100px;
    height: 100px;
    opacity:0;
    transition: opacity .5s;
}

.hint {
    position:fixed;
    top:100px;
    right:10px;
    height: 10%;
    opacity:0;
    transition: opacity .5s;
}

.ufo {
    position:fixed;
    bottom:10px;
    right:10px;
    width:200px;
    opacity:1;
    transition: opacity .5s;
}

.drag {
    cursor: grab;
}

.show {
    opacity: 1;
}

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