.index-content {
    position: relative;

    width: 100vw;
    height: 85vh;
}

.content-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 90%;
    aspect-ratio: 20 / 17;
}

@keyframes constellation-bob {
    0% { translate: -50% -51%; }
    5% { translate: -50% -51%; }
    50% { translate: -50% -49%; }
    55% { translate: -50% -49%; }
    100% { translate: -50% -51%; }
}

.constellation {
    width: 50%;

    position: absolute;
    aspect-ratio: 1 / 1;
    translate: -50% -50%;
    transition: all 0.001s linear;

    pointer-events: none;

    animation-name: constellation-bob;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@media (3 / 4 <= aspect-ratio < 1 / 1) {
    .content-container {
        height: auto;
        width: 90%;
    }

    .constellation {
        width: 50%;
    }
}

@media (aspect-ratio < 3 / 4) {
    .content-container {
        height: auto;
        width: 66%;

        top: 25%;
        transform: translate(-50%, -25%);

        aspect-ratio: 4 / 7;
    }

    .constellation {
        width: 100%;
    }
}

.star {
    position: absolute;

    translate: -50% -50%;
    opacity: 100%;

    pointer-events: auto;
    z-index: 2;

    transition-property: all;
    transition-timing-function: ease-out;
}

.star.star-fade-in {
    opacity: 0%;

    transition: none;
    transition-delay: 0ms;
}

@keyframes star-sparkle {
    0% { filter: brightness(100%); }
    7% { filter: brightness(200%) saturate(200%); }
    15% { filter: brightness(100%); }
    100% { filter: brightness(100%); }
}

@keyframes star-glow-sparkle {
    0% { scale: 1; }
    7% { scale: 1.75; }
    15% { scale: 1; }
    100% { scale: 1; }
}

.star-star {
    position: absolute;
    top: 50%;
    left: 50%;

    height: 100%;
    width: 100%;
    transform-origin: 0 0;
    transform: translate(-50%, -50%);
    z-index: 3;

    animation-name: star-sparkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.star-star-img {
    width: 100%;
    aspect-ratio: 1 / 1;

    filter: none;

    transition: all 0.25s ease;
}

.star-link {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;
}

.star-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    z-index: 0;
    box-shadow: none;

    animation-name: star-glow-sparkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

    transition: all 0.25s ease;
}

.star-icon {
    opacity: 40%;

    filter: none;
    z-index: 1;

    transition: all 0.25s ease;
}

.star-link:not(.star-link-disabled):hover .star-icon {
    filter: brightness(110%);
}

.star-label {
    border-radius: 0.5em;
    padding: 0.125em 0.25em 0.25em;
    margin: 0.125em 0em;

    background-color: rgba(10, 10, 20, 35%);

    z-index: 2;
}

.star-label-text {
    font-family: "Bubblegum Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.5em;

    white-space: nowrap;
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    .star-label-text {
        font-size: 1.33em;
    }
}

@media (width < 400px), (height < 400px) {
    .star-label-text {
        font-size: 1.25em;
    }
}

.star-line {
    position: absolute;

    background-color: white;
    opacity: 50%;

    pointer-events: auto;
    z-index: 1;

    transition-property: opacity, width;
    transition-timing-function: ease-out, ease-in-out;
}

.star-line.star-line-fade-in {
    opacity: 0%;

    transition: none;
    transition-delay: 0ms;
}

.flair {
    width: 100%;
    height: 100%;

    position: absolute;

    pointer-events: none;
    z-index: 0;

    translate: 0% 0%;
    rotate: 0deg;
    opacity: 100%;

    transition-property: all;
    transition-timing-function: cubic-bezier(0,.6,.4,1);
}

.flair#flair-shu.flair-fade-in {
    translate: 0% -15%;
    rotate: 1deg;
    opacity: 0%;

    transition-delay: 0ms;
}

.flair#flair-rishin.flair-fade-in {
    translate: 0% 15%;
    rotate: 1deg;
    opacity: 0%;

    transition-delay: 0ms;
}

@keyframes flair-bob {
    0% { translate: 0 -1.25%; }
    5% { translate: 0 -1.25%; }
    50% { translate: 0 1.25%; }
    55% { translate: 0 1.25%; }
    100% { translate: 0 -1.25%; }
}

@keyframes flair-rotate {
    0% { rotate: -0.6deg; }
    5% { rotate: -0.6deg; }
    50% { rotate: 0.6deg; }
    55% { rotate: 0.6deg; }
    100% { rotate: -0.6deg; }
}

.flair-animation {
    position: absolute;
    width: 100%;
    height: 100%;

    animation-name: flair-bob, flair-rotate;
    animation-duration: 6s, 9s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}