hr {
    border: none;
    border-top: 3px solid var(--text-color);
}

hr.main {
    border-top: 5px solid var(--text-color);
}

h2 {
    font-size: clamp(.8rem, 1vw, 1.2rem);
    list-style: none;
    display: flex;
    gap: 2rem;
    text-transform: lowercase;
    color: var(--ctp-sky);
}

h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--text-color);
    opacity: 0.8;
    margin-top: 0.5rem;
}

.summary {

    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;

    .starfield {
        inset: 0 0 auto 0;
        height: clamp(18rem, 32vw, 24rem);
    }

    > *:not(.starfield) {
        position: relative;
        z-index: 1;
    }

    .breadcrumbs {
        font-size: clamp(.8rem, 1vw, 1.2rem);
        list-style: none;
        display: flex;
        gap: 1rem;
        margin: 0;
        padding: 0;
        text-transform: lowercase;
        color: var(--ctp-sky);

        .path, a {
            text-decoration: none;
            color: var(--text-color);
            opacity: 0.8;
        }
    }

    .title {
        font-size: clamp(7rem, 8vw, 10rem);
        font-weight: 800;
        margin: 1rem 0;
        letter-spacing: -.04em;
        text-transform: uppercase;
        color: var(--text-color);
    }

    .status,
    .tags {
        font-size: clamp(.95rem, 1.2vw, 1.4rem);
        list-style: none;
        display: flex;
        gap: 1rem;
        margin: 0;
        padding: 0;
        text-transform: uppercase;

        li {
            border: 2px solid var(--ctp-sky);
            background-color: var(--ctp-sky);
            padding: 0.2rem 0.5rem;
            text-decoration: none;
            color: var(--bg-color);
            opacity: 0.8;
        }

        li[data-status="active"] {
            border-color: var(--ctp-green);
            background-color: var(--ctp-green);
        }

        li[data-status="paused"] {
            border-color: var(--ctp-peach);
            background-color: var(--ctp-peach);
        }

        li[data-status="archived"] {
            border-color: var(--ctp-overlay0);
            background-color: var(--ctp-overlay0);
        }

        li[data-status="complete"] {
            border-color: var(--ctp-green);
            background-color: var(--ctp-green);
        }

        li[data-status="in development"] {
            border-color: var(--ctp-yellow);
            background-color: var(--ctp-yellow);
            color: var(--bg-color);
        }

        li[data-status="pre-development"] {
            border-color: var(--ctp-mauve);
            background-color: var(--ctp-mauve);
        }

        li[data-status="deprecated"] {
            border-color: var(--ctp-red);
            background-color: var(--ctp-red);
        }
    }

    .description {
        font-size: clamp(.95rem, 1.3vw, 1.4rem);
        margin: 3rem 0;
        max-width: 60%;
    }

    .links {
        font-size: clamp(.95rem, 1.2vw, 1.4rem);
        list-style: none;
        display: flex;
        gap: 1rem;
        margin: 0;
        padding: 0;
        text-transform: uppercase;

        li a {
            border: 2px solid var(--text-color);
            padding: 0.4rem 1rem;
            text-decoration: none;
            color: var(--text-color);
            opacity: 0.8;
        }

        li[data-link="GitHub"] a::before {
            content: "\f09b\00a0\00a0";
            font-family: "Nerd Fonts";
        }
    }

}

.synopsis, .features {
    padding: 0 2rem;
    font-size: clamp(.95rem, 1.3vw, 1.4rem);
    margin: 3rem 0;
}

.features {
    .feat-list {
        font-size: clamp(.95rem, 1.2vw, 1.4rem);
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            text-decoration: none;
            margin-bottom: 1rem;
        }

        br {
            margin-bottom: .5rem;
        }
    }
}