body{
    font-family: arial;
    margin:0px;
    color:white;
    background-color:000019;
    a{
        color:tomato;
    }
    button{
        background-color:#00000033;
        color:white;
    }
    .header{
        z-index:1000;
        position:fixed;
        display:flex;
        @media(max-width: 700px) {
            flex-wrap:wrap;
        }
        width:100%;
        background-color:midnightblue;
        min-height:50px;
        margin:0px;
        margin-bottom:10px;
        align-items:center;
        padding:5px;
        .links{
            flex-shrink:0;
            text-align:center;
            justify-content:center;
            p{
                margin:0;
                margin-top:4px;
                margin-bottom:4px;
            }
        }
        .scale{
            flex-shrink:0;
            margin:0;
            margin-left:8px;
            margin-right:5px;
            padding:0;
            form{
                margin:0;
                padding:0;
            }
        }
        .buttonHolder{
            margin:0;
            padding:0;
            button{
                margin:2px;
            }
            .selected{
                background-color:#00000088;
            }
        }
    }
    .planet-holder{
        --radius:35px;              /* radius of the circle       */
        --color:white;            /* color of the circle        */
        --top:0px;                  /* space from previous circle */ 
        --bubble-color:#ffffff33; /* color of the bubble        */
        --triangle-height:40px;     /* height of the triangle     */
    
        margin:0;
        margin-left:10px;
        margin-right:10px;
        display:flex;
        flex-direction:row;
        align-items:flex-end;
        flex-shrink:0;
    
        .circHold{
            max-width:calc(100vw - 250px);
            max-height:calc(100vw - 250px);
            flex-shrink:0;
            display:flex;
            justify-content:end;
            align-items:end;
            overflow:hidden;

            margin-top:max(0px, calc(var(--top) - 15px));
            margin-bottom:15px;
            .circle {
                width:calc(var(--radius) * 2);
                height:calc(var(--radius) * 2);
                background-color:var(--color);
            
                margin:0;
                border-radius: 50%;
                position: relative;
            
                flex-shrink:0;
            }
        }
    
    
        .bubble {
            background-color:var(--bubble-color);
        
            margin:0;
            padding-left:15px;
            padding-right:15px;
            border-radius:15px 15px 15px 0px; /* leave bottom left corner filled for triangle */
            position:relative;
        
            margin-bottom:min(calc(var(--radius) + 15px - 15px), calc(calc(100vw - 250px)/2)); /* radius + planet margin - padding */
            margin-left:calc(var(--triangle-height) + 10px); /* leave space for triangle */
            flex-grow:1; /* Fill remaining horizontal space */
        }
        .bubble:after{ /* triangle */
            content:"";
            position:absolute;
            bottom:0px; /*triangle length from bottom*/
            
            border-style:solid;
            border-color:transparent var(--bubble-color);
            
            left:calc(0px - var(--triangle-height)); /* move triangle left {triangle height} px from left of bubble */
            border-width:15px var(--triangle-height) 15 0; /*triangle width(top), height, width(bottom) mirrored*/
        }
    }
}