* {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
}

body {
    overflow: hidden;
}

canvas, #p5_loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.handCursor {
    cursor: default; /* Bruh you don't support cursors? */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: url("../assets/img/startScreen/handCursor.png") 18 9, url("../assets/img/startScreen/handCursorSmall.png") 6 3, grab;
}

.pointerCursor {
    cursor: default;
    cursor: url("../assets/img/startScreen/pointerCursor.png") 6 6, url("../assets/img/startScreen/pointerCursorSmall.png") 2 2, pointer;
}

@keyframes rotate {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

.hand {
    transform-origin: center;
}

.bigHand {
    animation: linear rotate 1s infinite;
}

.smallHand {
    animation: linear rotate 12s infinite;
}

video {
    display: none;
}