body {
    min-height: 100dvh;
    margin: 0;
    background-color: #b7f1c2;
}

#face {
    position: fixed;
    top: calc(50% - 272px / 2 - 50px);
    left: calc(50% - 220px / 2 - 30px);
    filter: drop-shadow(0 3px 3px #7f4d3d);
    animation:
        circularMove 20s infinite linear reverse,
        tilt 20s infinite linear reverse;
}

#thumb {
    position: fixed;
    top: calc(50% - 152px / 2 + 50px);
    left: calc(50% - 120px / 2 + 75px);
    filter: drop-shadow(-1px -1px 2px #7f4d3d);
    animation:
        circularMove 10s infinite linear,
        tilt 10s infinite linear;
}

@keyframes circularMove {
    0% {
        transform: rotate(0deg) translateY(5px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateY(5px) rotate(-360deg);
    }
}

@keyframes tilt {
    0% {
        rotate: 0deg;
    }
    25% {
        rotate: 2deg;
    }
    75% {
        rotate: -2deg;
    }
    100% {
        rotate: 0deg;
    }
}