@import url("base.css");

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

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

.constellation {
    width: 50%;

    pointer-events: none;
}

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

    .constellation {
        width: 50%;
    }
}

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

    .constellation {
        width: 100%;
    }
}

.constellation {
    position: absolute;

    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
}

.star {
    position: absolute;

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

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

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

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

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

    filter: blur(1px) drop-shadow(0 0 5px lightblue);

    transition: all 0.25s ease;
}

.star-link:not(.star-link-disabled):hover .star-star-img {
    filter: blur(1px) drop-shadow(0 0 5px lightblue) drop-shadow(0 0 10px white);
}

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

    text-decoration: none;
}

.star-icon {
    background-color: var(--star-color);

    z-index: 1;

    transition: all 0.25s ease;
}

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

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

    z-index: 0;
}

.star-label {
    font-family: "Marck Script", cursive;
    font-weight: 500;
    font-style: normal;
    font-size: 1.5em;

    color: var(--star-color);
    filter: grayscale(50%) brightness(150%);
    white-space: nowrap;

    z-index: 2;
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    .star-star-img {
        filter: blur(1px) drop-shadow(0 0 3px lightblue);
    }

    .star-link:not(.star-link-disabled):hover .star-star-img {
        filter: blur(1px) drop-shadow(0 0 3px lightblue) drop-shadow(0 0 6px white);
    }

    .star-label {
        font-size: 1.33em;
    }
}

@media (width < 400px), (height < 400px) {
    .star-star-img {
        filter: blur(1px) drop-shadow(0 0 2px lightblue);
    }

    .star-link:not(.star-link-disabled):hover .star-star-img {
        filter: blur(1px) drop-shadow(0 0 2px lightblue) drop-shadow(0 0 4px white);
    }

    .star-label {
        font-size: 1.25em;
    }
}

.star-line {
    position: absolute;

    background-color: lightgray;
    filter: opacity(35%);

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