html {
    padding: 0;
    margin: 0;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    position: relative;

    margin: 0;
    padding: 0;

    min-height: 100vh;
    box-sizing: border-box;

    z-index: 10;
    overflow: hidden;

    background-color: rgb(7,8,9);
    color: rgb(7,8,9);
    /* color: white; */

    transition: color 1s, background-color 1s;
}

main {
    position: relative;
    z-index: 20;

    max-width: 920px;
    margin: auto;
}

#ball {
    position: absolute;
    display: flex;

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

    padding: 50px;
    box-sizing: border-box;

    z-index: 15;
    
    /* background-color: rgb(26, 107, 221); */
    background: radial-gradient(circle at center, white 0, rgb(0, 0, 0) 100%);

    width: 500px;
    height: 500px;
    
    border-radius: 100%;
}

#ball::before {
    content: "Middle click (or press .) to toggle flashlight";

    justify-self: center;
    align-items: center;

    color: yellow;

    /* transform: translate(50%, 50%); */
}

.faq > div {
    width: 0;
    overflow: hidden;
}

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