/* ---------------------
 All color mention here
 ---------------------- */

:root {
    --blck: #0f1c04;
    --chco: #2d131b;
    --blu: #2a5298;
    --lgblu: #1e3c72;
    --edi: #1e1e1e;
    --edi-h: #2d2d2d;
    --code-color: #00ffcc;
    --accent: #b03060;
    --whit: #fff;
    --r: #ff5f56;
    --y: #ffbd2e;
    --g: #27c93f;
    --code-b:#1a1919;
    --code-c:#d4d4d4;
    --key: #569cd6;
    --str:#ce9178;
    --fun:#7d210f;
    ---offwhit:#fffaf0;
    --yello:#f1c40f;
    --gray: #555;
}

body {
    background: linear-gradient(185deg, var(--lgblu), var(--blu), var(--chco), var(--blck));
    background-size: 700% 700%;
    animation: gradientBG 15s ease infinite;
    font-family: 'Fira Code', monospace;
    color: var(--whit);
    background-repeat: no-repeat;
    height: 100vh;


}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

html{
    scroll-behavior: smooth;
}
html::-webkit-scrollbar{
    width: 5px;
}
html::-webkit-scrollbar-track{
    background: transparent;
}
html::-webkit-scrollbar-thumb{
    background: rgb(71, 68, 68);
    border-radius: 10px;
}

canvas#fireworks {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

/* --------------
 Editor Style
 ---------------- */

.editor-window {
    background: var(--edi);
    border-radius: 10px;
    overflow: hidden;
}

.editor-header {
    background: var(--edi-h);
}

.dot {
    height: 11px;
    width: 11px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.red {
    background-color: var(--r);
}

.yellow {
    background-color: var(--y);
}

.green {
    background-color: var(--g);
}

.code-body {
    background: var(--code-b);
    color:var(--code-c) ;
    font-size: 14px;
    min-height: 250px;
    white-space: pre-wrap;
}

/* --------------
 Syntax highlight
 ---------------- */
.keyword {
    color:var(--key);
}

.string {
    color: var(--str);
}

.func {
    color: var(--fun);
}

/* Typewriter animation */
.blink {
    border-right: 2px solid var(--whit);
    animation: blinkCursor 0.7s steps(44) infinite normal;
}

@keyframes blinkCursor {
    from {
        border-color: transparent;
    }

    to {
        border-color: var(--whit);
    }
}


/*--------------
 Floating hearts 
 ---------------*/
.heart {
    position: fixed;
    font-size: 24px;
    animation: floatUp 6s linear forwards;
    pointer-events: none;
}

@keyframes floatUp {
    from {
        transform: translateY(100vh) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(-20vh) scale(1.5);
        opacity: 0;
    }
}


.cursor {
    border-right: 2px solid var(--whit);
    animation: blink 0.7s infinite;
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.code-output {
    color: var(--code-color);
    font-family: 'Fira Code', monospace;
    padding-left: 20px;
}



/* -------------
Family Container  
----------------*/
#familyContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/*-------------------------------
 Column style (Each Family Member) 
 ---------------------------------*/
#familyContainer .col-md-3 {
    flex: 1 1 calc(25% - 20px);
    /* 4 cards per row show here*/
    max-width: calc(25% - 20px);
    display: flex;
    justify-content: center;
}

/*-----------
 Card Styling 
 -------------*/
#familyContainer .card {
    width: 100%;
    max-width: 280px;
    min-height: 320px;
    /* every  cards have same height */
    background-color: var(---offwhit);
    border-radius: 15px;
    border: 2px solid var(--yello);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#familyContainer .card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* ------------
Circular Images 
---------------*/
.card-img-top {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid var(--yello);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 15px auto 10px;
}

/*---------
 Card Body
 ---------- */
#familyContainer .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

/*---------------------
 Name and Relation Text 
 -----------------------*/
.card-title {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.05rem;
}

.card-text {
    color:var(--gray);
    font-size: 0.95rem;
}