main {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr 500px 1fr;

    width: 100%;
    height: 100%;
    color: #ffffffcf;
}

main > h1 {
    font-size: 4em;
    color: #ffffff7f;
}

main > .bubble-container {
    grid-area: 2/1 / 2/1;
}

.bubble-container {
    position: relative;
}

.bubble-container > .bubble {
    --bubble-size: 256px;
    --background: #ffffff7f;
    --top: 0;
    --left: 0;

    --scale: 1;

    display: grid;
    place-items: center;
    position: absolute;
    width: var(--bubble-size);
    height: var(--bubble-size);

    top: calc(var(--top) * var(--bubble-size) / 2);
    left: calc(var(--left) * var(--bubble-size) / 2);
    border: 2px solid #ffffff7f;
    box-shadow: 0 0 24px -8px #ffffff7f;

    transform: translate(-50%, -50%) scale(var(--scale));

    /* background: var(--background); */
    background: var(--col-accent);
    border-radius: 50%;

    font-size: 2em;
    font-weight: 700;
    
    cursor: pointer;

    transition: transform .2s var(--near-circ-ease),
            filter .2s var(--near-circ-ease);
}

.bubble-container > .bubble > a {
    grid-area: 1/1 / 1/1;

    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
} 

.bubble-container > .bubble.small {
    --bubble-size: 120px;
    font-size: 1.5em;
}

main > .bubble-container > .bubble:hover {
    filter: brightness(1.5);
    --scale: 1.1;
}

main > .bubble-container > .bubble:active {
    filter: brightness(0.8);
    --scale: 0.95;
}
    
@media screen and ((max-width: 900px) or (max-height: 700px)) {
    body {
        font-size: 0.75em;
    }

    main {
        padding: 1em;
        max-width: 80ch;
        margin: auto;
    }

    .bubble-container {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 0.5em;
        width: 100%;

        position: unset;
    }

    .bubble-container > .bubble {
        border-radius: 12px;

        position: relative;
        width: 100%;
        height: unset;
        left: unset;
        top: unset;

        transform: unset;

        padding: 1em;
    }

    .bubble-container > .bubble.small {
        width: 50%;
    }
}