/* ========== COLOR DEFINITION ========== */
:root {
    /* ----- Skill ----- */
    --skill-fill-base: #9ECE6A; /* Skill fill background if none custom are used (Fallback) */
        /* Shall not be equal + differentiable to '--card' from 'style.css' */
    --skill-bar-border: #565F89; /* Border around the skill-bar -> Be cautious when changing */
    --skill-bar-bg: rgba(0,0,0,0); /* Background of non- filled parts of skill-fill *
        /* May be invisible  */
    --skill-sub-caption: #A9B1D6; /* Sub-caption for skill */
        /* May be equal to '--sub-caption' from 'style.css' */
}

/* ========== SKILLS ========== */

.skills-container {
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}


.skill {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 0.5rem;
}

.skill-name {
    width: 120px;
    font-weight: bold;
}

.skill-bar {
    flex: 1;
    display: flex;
    background: var(--skill-bar-bg);
    border-radius: 25px;
    border: 1px solid var(--skill-bar-border);
    overflow: hidden;
    height: 25px;
}

/*Usually: 6: 100, 5.5: 92, 5: 83, 4.5: 75, 4: 67, 3.5: 58, 3: 50, 2.5: 42, 2: 33, 1.5: 25, 1: 17, 0.5: 8*/
.skill-fill {
    height: 100%;
    border-radius: 25px;
    text-align: right;
    padding-right: 10px;
    line-height: 25px;
    font-weight: bold;
    transition: width 0.5s ease-in-out;
    background-color: var(--skill-fill-base);
}

.skill-subcaption {
    font-weight: bold;
    font-size: 1.1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    color: var(--skill-sub-caption);
}

/* ========== TOGGLE ========== */

/* Hidden container */
.hidden {
    display: none;
}

/* Clickable section header */
.skill-subcaption {
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Arrow */
.skill-subcaption::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.25s ease;
}

/* Arrow rotation when open */
.skill-subcaption.open::before {
    transform: rotate(90deg);
}

/* ========== CUSTOM COLORS ========== */

/* Skill colors, optional and not implemented */
/* <div class="skill-fill <tag here>" .... */

/* ========== Programming Languages ========== */
.c { background: #555555; color: white; }
.cpp { background: #f34b7d; color: white; }
.go { background: #00ADD8; color: white; }
.java { background: #b07219; color: white; }
.python { background: #3572A5; color: white; }
.shell { background: #89e051; color: black; }

/* ========== Skripting ========== */
.css { background: #563d7c; color: white; }
.html { background: #e34c26; color: white; }
.latex { background: #008080; color: white; }
.md { background: #083fa1; color: white; }

/* ========== Database ========== */
.postgres { background: #336791; color: white; }
.sqlite { background: #003b57; color: white; }

/* ========== Game Dev ========== */
.godot {background: #478CBF; color: white; }
.gdscript { background: #355C7D; color: white; }


/* ========== Other ========== */
.git { background: #f34f29; color: white; }
.github { background: #48228d; color: white; }
.linux { background: #181717; color: white; }
.notion { background: #000000; color: white; }

/* ========== Microsoft Office ========== */
.excel { background: #217346; color: white; }
.powerpoint { background: #d24726; color: white; }
.onenote { background: #7719aa; color: white; }




/* ========== Languages ========== */
.english {
    background: linear-gradient(
        90deg,
        #012169,
        #ffffff,
        #c8102e
    );
    color: #000;
}

.norwegian {
    background: linear-gradient(
        90deg,
        #ffffff,
        #ba0c2f
    );
    color: #000;
}

.french {
    background: linear-gradient(
        90deg,
        #0055a4,
        #ffffff,
        #c8102e
    );
    color: #000;
}

.german {
    background: linear-gradient(
        90deg,
        #000000,
        #b11226,
        #f2a900 
    );
}