html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;

    background: linear-gradient(
        50deg,
        rgba(4, 5, 2, 1) 0%,
        rgba(13, 20, 12, 1) 49%,
        rgba(7, 15, 14, 1) 97%
    );

    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;

    pointer-events: none;
}

#glorp {
    border-radius: 1.5vh;
    box-shadow: 1.5vh 1.5vh 3vh rgb(41, 41, 41, 0.25);

    width: auto;
    height: auto;
    max-width: 75vw;
    max-height: 75vh;
    position: relative;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
    transform-style: preserve-3d;
}