:root {
    --bg1: rgb(211, 255, 122);
    --bg2: rgb(183, 221, 106);
    --eyepos: 20%;
}

body {
    margin: 0;
    cursor: none;
}

#container {
    position: fixed;
    height: 100vh;
    width: 100vw;
    font-family: monospace;
    /* background: conic-gradient(transparent 0deg 270deg, black 270deg 360deg); */
}

.block {
    --bw: 400px;
    background: repeating-conic-gradient(var(--c1) 0deg 90deg, var(--c2) 90deg 180deg);
    background-size: var(--bw) var(--bw);
    width: calc(4 * var(--bw));
    height: calc(4 * var(--bw));
}

#bg {
    position: fixed;
    width: max-content;
    height: max-content;
    /* top: calc(-50%);
    left: calc(-50%); */
    background-color: aliceblue;
    /* background: repeating-conic-gradient(var(--bg1) 0deg 90deg, var(--bg2) 90deg 180deg);
    background-size: 200px 200px; */

}

#guy {
    position: fixed;
    background: paleturquoise;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    top: calc(50vh - 80px);
    left: calc(50vw - 80px);
    overflow: hidden;
    /* display: none; */
}

#shadow {
    position: fixed;
    background: teal;
    filter: opacity(40%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: calc(50vh - 60px);
    left: calc(50vw - 60px);
    overflow: hidden;
}

#arm {
    top: calc(50% - 5px);
    left: 50%;
    transform-origin: 0% 50%;
    position: fixed;
    background-color: lightcoral;
    width: 0;
    height: 0;
    border: 10px solid lightcoral;
}

#hand {
    --hand: lightcoral;
    --hand2: black;
    --line: rgb(215, 98, 114);
    position: fixed;
    transform: translate(calc(50vw - 40px), calc(50vh - 40px));
    width: 80px;
    height: 80px;
    background:
        radial-gradient(circle at 0% 50%, var(--hand) 0%, var(--hand) 55%,
            transparent 50%, transparent),
        conic-gradient(at 0% 50%,
            var(--hand) 0, var(--hand) 64deg,
            var(--line) 0, var(--line) 70deg,
            var(--hand) 0, var(--hand) 86deg,
            var(--line) 0, var(--line) 94deg,
            var(--hand) 0, var(--hand) 110deg,
            var(--line) 0, var(--line) 116deg,
            var(--hand) 0, var(--hand));
    border-radius: 50%;
}

.eye {
    position: absolute;
    background: black;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    top: 40%;
}

#nose {
    position: absolute;
    background: lightcoral;
    top: 40%;
    left: 35%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
}


#mouth {
    position: absolute;
    top: 25%;
    left: 22%;
    width: 50%;
    height: 50%;
    border: solid 5px #000;
    border-color: transparent transparent #000 transparent;
    border-radius: 50%;
}

#facepaint {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: lightgoldenrodyellow;
}