/* -------------------------------------------------------
 * CGit theme inspired by YOASOBI's "THE BOOK for," EP
 * Cover: purplish-blue night sky, black skyline silhouette,
 *        two shooting stars, minimalist typography
 * Palette extracted from the actual Spotify cover art:
 *   sky #86a0d3, darker #7d98cf, deep navy #0b0b1a
 * ------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    overscroll-behavior-y: none;
}
body {
    background-color: #0b0b1a;
    background-image:
        linear-gradient(180deg, #0b0b1a 0%, #15133a 25%, #1e1b52 50%, #1f1d5a 70%, #131422 85%, #0a0a12 100%);
    color: #FCFAF6;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 20px;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(252,250,246,0.4), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(252,250,246,0.5), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(252,250,246,0.25), transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1px 1px at 15% 85%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(252,250,246,0.35), transparent),
        radial-gradient(1px 1px at 80% 15%, rgba(252,250,246,0.25), transparent),
        radial-gradient(1px 1px at 25% 75%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1px 1px at 65% 90%, rgba(252,250,246,0.15), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1.2px 1.2px at 55% 30%, rgba(252,250,246,0.25), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1px 1px at 35% 15%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1px 1px at 75% 70%, rgba(252,250,246,0.15), transparent),
        radial-gradient(1px 1px at 20% 40%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1.5px 1.5px at 60% 5%, rgba(252,250,246,0.35), transparent),
        radial-gradient(1px 1px at 95% 35%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1px 1px at 40% 95%, rgba(252,250,246,0.15), transparent),
        radial-gradient(1px 1px at 8% 8%, rgba(252,250,246,0.25), transparent);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #000000;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,100 L0,75 L40,75 L40,45 L70,70 L70,55 L90,55 L90,40 L110,40 L110,60 L130,60 L130,35 L155,35 L155,55 L175,55 L175,25 L200,25 L200,50 L220,50 L220,15 L245,15 L245,40 L270,40 L270,55 L290,55 L290,45 L310,45 L310,65 L340,65 L340,40 L365,40 L365,55 L385,55 L385,20 L410,20 L410,50 L430,50 L430,35 L450,35 L450,60 L475,60 L475,40 L500,40 L500,55 L520,55 L520,45 L540,45 L540,65 L565,65 L565,30 L590,30 L590,50 L610,50 L610,35 L635,35 L635,55 L660,55 L660,40 L680,40 L680,60 L705,60 L705,45 L730,45 L730,20 L755,20 L755,50 L775,50 L775,35 L800,35 Extracted to protect space... L1200,100 Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,100 L0,75 L40,75 L40,45 L70,70 L70,55 L90,55 L90,40 L110,40 L110,60 L130,60 L130,35 L155,35 L155,55 L175,55 L175,25 L200,25 L200,50 L220,50 L220,15 L245,15 L245,40 L270,40 L270,55 L290,55 L290,45 L310,45 L310,65 L340,65 L340,40 L365,40 L365,55 L385,55 L385,20 L410,20 L410,50 L430,50 L430,35 L450,35 L450,60 L475,60 L475,40 L500,40 L500,55 L520,55 L520,45 L540,45 L540,65 L565,65 L565,30 L590,30 L590,50 L610,50 L610,35 L635,35 L635,55 L660,55 L660,40 L680,40 L680,60 L705,60 L705,45 L730,45 L730,20 L755,20 L755,50 L775,50 L775,35 L800,35 L800,55 L820,55 L820,40 L845,40 L845,60 L870,60 L870,45 L890,45 L890,65 L915,65 L915,30 L940,30 L940,55 L960,55 L960,40 L985,40 L985,60 L1010,60 L1010,50 L1030,50 L1030,35 L1055,35 L1055,55 L1080,55 L1080,40 L1100,40 L1100,60 L1125,60 L1125,45 L1150,45 L1150,65 L1200,65 L1200,100 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}


@keyframes shoot1 {
    0% { transform: translate(0, 0) rotate(-30deg); opacity: 1; }
    3% { opacity: 0.8; }
    6% { opacity: 0.4; }
    10% { transform: translate(600px, 350px) rotate(-30deg); opacity: 0; }
    100% { transform: translate(600px, 350px) rotate(-30deg); opacity: 0; }
}

#star1 {
    position: fixed;
    top: 60px;
    left: 40%;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(252,250,246,0), rgba(252,250,246,0.1) 20%, rgba(252,250,246,0.6) 60%, #FCFAF6 100%);
    border-radius: 1px;
    transform: rotate(-30deg);
    animation: shoot1 45s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

#star1::after {
    content: '';
    position: absolute;
    top: -2px;
    right: 0;
    width: 6px;
    height: 6px;
    background: #FCFAF6;
    border-radius: 50%;
    box-shadow: 0 0 8px #FCFAF6, 0 0 16px rgba(252,250,246,0.5);
}

@keyframes shoot2 {
    0% { transform: translate(0, 0) rotate(-25deg); opacity: 1; }
    2% { opacity: 0.9; }
    5% { opacity: 0.3; }
    8% { transform: translate(400px, 180px) rotate(-25deg); opacity: 0; }
    100% { transform: translate(400px, 180px) rotate(-25deg); opacity: 0; }
}

#star2 {
    position: fixed;
    top: 120px;
    left: 55%;
    width: 80px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(252,250,246,0), rgba(252,250,246,0.08) 20%, rgba(252,250,246,0.5) 60%, #FCFAF6 100%);
    border-radius: 1px;
    transform: rotate(-25deg);
    animation: shoot2 70s ease-in-out infinite 18s;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

#star2::after {
    content: '';
    position: absolute;
    top: -1.5px;
    right: 0;
    width: 4.5px;
    height: 4.5px;
    background: #FCFAF6;
    border-radius: 50%;
    box-shadow: 0 0 6px #FCFAF6, 0 0 12px rgba(252,250,246,0.4);
}

#book-circle {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #000000;
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

div#cgit {
    position: relative;
    z-index: 5;
    background: transparent;
    color: #FCFAF6;
    max-width: 1200px;
    margin: 0 auto;
}

a {
    color: #86a0d3;
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: #FCFAF6;
    text-decoration: underline;
}

table#header {
    width: 100%;
    background: transparent;
    border: none;
    border-collapse: collapse;
    margin-bottom: 5px;
}

table#header td {
    padding: 8px 0;
    border: none;
}

table#header td.main {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
}

table#header td.main a {
    color: #FCFAF6;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-decoration: none;
}

table#header td.main a:hover {
    color: #86a0d3;
    text-decoration: none;
}

table#header td.main a:first-child {
    color: rgba(134, 160, 211, 0.5);
    font-size: 14px;
    letter-spacing: 3px;
}

table#header td.main a:first-child:hover {
    color: #86a0d3;
}

table#header td.main a:last-child {
    color: #FCFAF6;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
}

table#header td.main a:last-child:hover {
    color: #86a0d3;
}

table#header td.sub {
    color: rgba(134, 160, 211, 0.6);
    font-size: 10px;
    text-align: left;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
}

table.tabs {
    width: 100%;
    background: transparent;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin-top: 10px;
}

table.tabs td {
    padding: 0;
    border-bottom: 1px solid rgba(134, 160, 211, 0.25);
}

table.tabs td a {
    display: inline-block;
    padding: 8px 18px;
    margin-right: 0;
    color: rgba(134, 160, 211, 0.6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    position: relative;
    transition: color 0.15s ease;
}

table.tabs td a:hover {
    color: #FCFAF6;
    background: transparent;
    text-decoration: none;
}

table.tabs td a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #86a0d3;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

table.tabs td a:hover::after {
    transform: scaleX(1);
}

table.tabs td a.active {
    color: #FCFAF6;
    background: transparent;
}

table.tabs td a.active::after {
    transform: scaleX(1);
    background: #FCFAF6;
}

div.content {
    position: relative;
}

div#summary, div.readme-container {
    padding: 20px;
    background: rgba(134, 160, 211, 0.05);
    border: 1px solid rgba(134, 160, 211, 0.15);
    border-radius: 2px;
    color: #FCFAF6;
    margin-top: 15px;
}

code, pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(134, 160, 211, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

div.footer {
    margin-top: 40px;
    padding: 20px 0;
    color: rgba(134, 160, 211, 0.25);
    font-size: 10px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid rgba(134, 160, 211, 0.08);
}

div.footer a {
    color: rgba(134, 160, 211, 0.4);
}

div.commit-subject {
    font-size: 15px;
    font-weight: 700;
    color: #FCFAF6;
    margin-bottom: 10px;
}

/* --- Table Layout Improvements --- */

table.list {
    width: 100%; /* Forces the table to expand and fill the container */
    border-collapse: collapse; /* Ensures padding and borders behave cleanly */
    margin: 15px 0; /* Adds breathing room above and below the table */
}

table.list th,
table.list td {
    padding: 12px 20px; /* Adds vertical (12px) and horizontal (20px) space inside cells */
    text-align: left; /* Ensures text stays left-aligned */
}

/* Optional: Add a subtle border between rows to improve readability */
table.list tr {
    border-bottom: 1px solid rgba(134, 160, 211, 0.08); 
}

/* Remove the border from the last row so it blends better */
table.list tr:last-child {
    border-bottom: none;
}

/* Optional: Add a subtle hover effect to rows, ignoring the header */
table.list tbody tr:not(.nohover):hover {
    background: rgba(134, 160, 211, 0.04);
}