:root {
    --transparent: rgb(0, 0, 0, 0);
    --background-color: #555555;
    --green-complete: #008000;

}

/* Center alignment for headings and paragraphs */
h1,
h2,
p,
ul,
li {
    text-align: center;
}

ul {
    list-style-position: inside;
    padding-left: 0;
    text-align: center;
}

/* Styles for the main flex container */
.chart {
    display: flex;
    flex-flow: row wrap;
    column-gap: 10px;
    row-gap: 50px;
    align-items: center;
    justify-content: center;
}

/* Styles for node-group items container */
.node-group {
    display: grid;
    grid-template-rows: 40px 40px;
    grid-auto-columns: 40px;
    grid-auto-flow: column dense;
    grid-gap: 5px;
    margin: 2px;
    /* stop touch events from selecting text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.node-group>.node {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #aaaaaa;
}

.node-group>.node>img {
    width: 40px;
    height: 40px;
    object-fit: scale-down;
}


/* === SPECIAL CASE: SINGLE ITEM IN NODE-GROUP === */
.node-group:has(> .node:only-child) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure that the node takes full space */
.node-group:has(> .node:only-child)>.node {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure image inside that node behaves like it used to */
.node-group:has(> .node:only-child)>.node>img {
    width: 40px;
    height: 40px;
    object-fit: scale-down;
}

/* Styles for skill containers */
.node-group>.node>.skill {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.node-group>.node>.skill>img {
    width: 20px;
    height: 20px;
    object-fit: scale-down;
}

.node-group>.node>.skill>span {
    font-size: 0.8rem;
}

/* 
    Individual item states where:
        state-0 = incomplete
        state-1 = complete
        state-2 = skipped
*/
.state-0 {
    background-color: var(--transparent);
}

.state-1 {
    background-color: var(--green-complete);
}

.state-2 {
    background-color: var(--green-complete);
    position: relative;
    /* required for pseudo-element positioning */
}

/* Add top-right triangle using a pseudo-element for skipped state */
.state-2::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    /* triangle shape */
    border-color: transparent yellow transparent transparent;
}

.chart>.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 30px;
}


/* Dark Mode Styles */
body {
    background-color: #2c2c2c;
    /* Darker background for better contrast */
    color: #e0e0e0;
    /* Softer light text to reduce eye strain */
}

/* Adjust other elements as needed */
body .skill,
body .node-group>img,
body .chart>img {
    border-color: #aaaaaa;
    /* Light gray borders for a softer look */
}

body .arrow {
    color: #e0e0e0;
    /* Softer light arrow color */
}

/* Style for the dark mode toggle button in dark mode */
body #dark-mode-toggle {
    background-color: #555555;
    /* Subtle dark gray background for button */
    color: #ffffff;
    /* White text for contrast */
}

.changelog h1,
.changelog h2 {
    text-align: left;
}

.changelog ul {
    list-style-type: disc;
    margin-left: 40px;
}

.changelog .back-link {
    margin-top: 40px;
}

a {
    color: #66aaff;
    /* Light blue for visibility */
    text-decoration: underline;
}

a:visited {
    color: #aa88ff;
    /* Light purple */
}

/* Responsive Design for Mobile Devices */
@media only screen and (max-width: 600px) {
    .chart {
        display: grid;
        row-gap: 40px;
    }

    .node-group {
        display: grid;
        position: relative;
        grid-template-rows: 40px;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }

    .chart>.arrow {
        display: none;
    }

    .node-group:not(:last-child)::after {
        display: block;
        position: absolute;
        top: 45px;
        width: 100vw;
        text-align: center;
        font-size: 25px;
        content: "↓";
    }
}

.subtitle {
    font-size: 0.85em;
    font-style: italic;
    color: #aaa;
    text-align: center;
    display: block;
    margin-top: -10px;
    margin-bottom: 30px;
    /* Add this to push the chart downward */
}

ul ul {
    margin-left: 20px;
    /* or padding-left */
    list-style-type: circle;
    /* or disc, square, none, etc. */
}

.node.optional{
    border-color: #FF8469;
}

.node.delay{
    border-color: #F5E38C;
}

.node.long{
    border-color: #A9B6FC;
}