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

html {
    background:
        radial-gradient(circle at center,
        #fffdf4 0%,
        #f5efdc 60%,
        #e9dec0 100%);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Console Shell. */
.emscripten_border {
    position: relative;

    padding: 24px;
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f8e8b0 0%,
            #f2d17c 45%,
            #e6b35f 100%
        );

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

    box-shadow:
        0 0 0 3px #fff8e7,
        0 0 0 5px rgba(90,60,20,0.12),
        0 18px 40px rgba(70,50,20,0.18),
        inset 0 2px 0 rgba(255,255,255,0.75),
        inset 0 -2px 0 rgba(120,80,20,0.12);

    animation: consoleFloat 5s ease-in-out infinite alternate;
}

/* Screen Bezel. */
.emscripten_border::before {
    content: "";

    position: absolute;
    inset: 14px;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #52493f,
            #2f2924
        );

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.08),
        inset 0 0 18px rgba(0,0,0,0.35);

    pointer-events: none;
}

/* Screen. */
canvas.emscripten {
    display: block;

    border-radius: 6px;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    background: #000;

    box-shadow:
        0 0 0 2px #1b1b1b,
        0 4px 12px rgba(0,0,0,0.18),
        0 0 16px rgba(255,180,80,0.12);

    filter:
        contrast(1.08)
        saturate(1.12);

    touch-action: none;
}

/* GitHub Corner. */
.github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
}

.github-corner svg {
    display: block;

    filter:
        drop-shadow(0 3px 8px rgba(0,0,0,0.12));
}

.github-corner .corner-bg {
    fill: #d97a3a;
}

.github-corner .octo-body,
.github-corner .octo-arm {
    fill: #fffef6;
    transform-origin: 130px 106px;
}

.github-corner:hover .corner-bg {
    fill: #c96a2b;
}

.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
    0%,100% {
        transform: rotate(0);
    }

    20%,60% {
        transform: rotate(-25deg);
    }

    40%,80% {
        transform: rotate(10deg);
    }
}

@media (max-width:500px) {
    .github-corner:hover .octo-arm {
        animation: none;
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out infinite;
        animation-delay: 2s;
    }
}

/* Console Float. */
@keyframes consoleFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4px);
    }
}

.emscripten_controls {
    display: none;
}