section{
    --bg02: hsla(var(--hue), 50%, 5%, 80%);
}
.clue {
    padding: 0.125rem 0.25rem;
    background-color: #000c;
    outline: 1px solid var(--bg);
}
header {
    background-color: var(--main-bg);
    background-color: #1239;
}

.bg-stars {
    position: absolute;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%; width: 100%;
    background-color: #fff;
    background-image: linear-gradient(135deg, #123, #789);
    /* background-image: 
    radial-gradient(circle at 20% 20%, #fff, #fff8 2rem, #fff0 3rem),
    linear-gradient(135deg, #123, #789); */
    background-image: 
    linear-gradient(135deg, #7890 20%, #456),
    linear-gradient(135deg, #123, #123);

    background-image: 
    radial-gradient(farthest-corner at 100% 100%, #456, #7890),
    radial-gradient(farthest-corner at 100% 100%, #123, #123);
    z-index: -1;
    background-attachment: fixed;
    overflow: hidden;
}

.star-field {
    position: absolute;
    height: 400%; width: 400%;
    top: 100%; left: 100%;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    transition: tranform 100ms ease-in-out;
    animation: orbit 36000ms linear infinite both;
    animation: orbit 120s linear infinite both;
}
@keyframes orbit {
    0% {transform: translateX(-50%) translateY(-50%) rotate(0deg);}
    100% {transform: translateX(-50%) translateY(-50%) rotate(360deg);}
}

.star {
    --o-r: 900;
    --o-a: 330;
    --clr: hsla(var(--o-a), 100%, 85%, 1);
    --sz: 4;
    --sz-hw: calc(var(--sz)*1px);
    --delay: 500;
    position: absolute;
    background-color: var(--clr);
    border-radius: 50%;
    height: var(--sz-hw); width: var(--sz-hw);
    top: 50%; left: 50%;
    box-shadow: 0 0 4px 0px #fff, 0 0 6px 2px var(--clr);

    transition: 
    transform 2400ms linear, 
    box-shadow 500ms ease-in-out;

    transform: translateY(calc(var(--o-r) * -1px)) rotate(calc(var(--o-a) * 1deg));
    transform-origin: 50% calc(var(--o-r) * 1px);

    animation: blink 12000ms ease-in-out infinite both;
    animation-delay: calc(var(--delay) * 1ms);
}
.star:hover {
    animation: none;
    box-shadow: 0 0 5px 2px #fff, 0 0 7px 3px var(--clr);
    transform: translateY(calc(var(--o-r) * -1px)) rotate(calc(var(--o-a) * 1deg));
}
@keyframes blink {
    0% {box-shadow: 0 0 4px 0px #ffff, 0 0 5px 0px var(--clr);}
    45% {box-shadow: 0 0 4px 0px #ffff, 0 0 6px 2px var(--clr);}
    50% {box-shadow: 0 0 3px -2px #fff8, 0 0 4px 0px hsla(var(--o-a), 100%, 75%, .89);}
    55% {box-shadow: 0 0 4px 0px #ffff, 0 0 6px 2px var(--clr);}
    100% {box-shadow: 0 0 4px 0px #ffff, 0 0 5px 0px var(--clr);}
}
.star::before {
    content: '';
    --sz-hw: calc(var(--sz)*5px);
    height: var(--sz-hw); width: var(--sz-hw);
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    
    --sz-t: calc((var(--sz) * .5px) - (var(--sz) * 2.5px));
    top: var(--sz-t); left: var(--sz-t);
    transform: scale(1);

    /* --clr: hsla(var(--o-a), 100%, 85%, 1); */
    /* background: hsla(var(--o-a), 100%, 85%, .2); */
    box-shadow: inset 0 0 0px 0px transparent;
    /* background-image: radial-gradient(circle at 50% 50%, transparent 35%, hsla(var(--o-a), 70%, 65%, .5), hsla(var(--o-a), 100%, 85%, 1) 70%); */
    border-radius: 50%;
    /* opacity: 0; */
    /* opacity: 1; */
    transition: 
    opacity 200ms ease-in-out,
    box-shadow 200ms ease-in-out,
    transform 500ms ease-in-out;
}
.star:hover::before {
    /* opacity: 1; */
    /* transform: translateX(-50%) translateY(-50%) scale(2); */
    box-shadow: inset 0 0 2px 2px hsla(var(--o-a), 100%, 85%, .2);
    transform: scale(2);
}

.brave {cursor: help;}
.runaway {cursor: pointer;}
.shy {cursor: grab;}

.star-tip {
    position: absolute;
    top: -25%; left: 50%;
    width: max-content;
    transform: translateX(-50%) translateY(-100%);
    margin: 0.25rem; padding: 0.25rem;
    background-color: #1239;
    color: #fff;
}