:root {
    --color-hue: 200;
    --_size: 1.75rem;
    --_radius: 0.2em; 

    /* Light color scheme*/
    --color-primary--light: #6badd2;
    --color-secondary--light: #b1d8e7;
    --color-accent--light: #267184;
    --color-background--light:#f9f9f9;
    --color-text-primary--light: #000000;
    --color-text-secondary--light: #737373;
    --color-disabled--light: #c0c0c0;

    /* Dark color scheme */
    --color-primary--dark: #e29c3a;
    --color-secondary--dark: #31384d;
    --color-accent--dark: #fa770b;
    --color-background--dark: #232738;
    --color-text-primary--dark: #e2e2e2;
    --color-text-secondary--dark: #bebebe;
    --color-disabled--dark: #a8a8a8;

    /* Customized color scheme*/
    --color-primary--custom: #723737;
    --color-secondary--custom: #a0b7d8;
    --color-accent--custom: #df8403;
    --color-background--custom: #d3f3ca;
    --color-text-primary--custom: #287a9d;
    --color-text-secondary--custom: #55899f;
    --color-disabled--custom: #89afd0;
}

/* Color scheme for web */
:root[data-theme="light"] {
    --primary-color: var(--color-primary--light);
    --secondary-color: var(--color-secondary--light);
    --background-color: var(--color-background--light);
    --accent-color: var(--color-accent--light);
    --text-primary-color: var(--color-text-primary--light);
    --text-secondary-color: var(--color-text-secondary--light);
    --disabled-color: var(--color-disabled--light);
    color-scheme: light; 
}

:root[data-theme="dark"] {
    --primary-color: var(--color-primary--dark);
    --secondary-color: var(--color-secondary--dark);
    --background-color: var(--color-background--dark);
    --accent-color: var(--color-accent--dark);
    --text-primary-color: var(--color-text-primary--dark);
    --text-secondary-color: var(--color-text-secondary--dark);
    --disabled-color: var(--color-disabled--dark);  
    color-scheme: dark; 
}

:root[data-theme="custom"] {
        --primary-color: var(--color-primary--custom);
        --secondary-color: var(--color-secondary--custom);
        --background-color: var(--color-background--custom);
        --accent-color: var(--color-accent--custom);
        --text-primary-color: var(--color-text-primary--custom);
        --text-secondary-color: var(--color-text-secondary--custom);
        --disabled-color: var(--color-disabled--custom);
        color-scheme: light; 
}

/* HTML elements */
body {
    max-height: 9999vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--_size);
    line-height: 1.5;
    margin: 0;
    padding: auto;
    color: var(--text-primary-color);
    background-color: var(--background-color);
    transition: max-height 0.8s ease, color 0.8s ease, background-color 0.8s ease, fill 0.8s ease;
}

div,span {
    height: 100%;
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    color: var(--text-primary-color);
}

a {
    color: var(--text-primary-color);
    text-decoration: none;
}

svg {
    path {
        stroke: var(--text-primary-color);
    };

    polyline {
        stroke: var(--text-primary-color);
    }
    
    ellipse {
        fill: var(--text-primary-color);
    }
}

/* Generic attributes */
.disabled {
    display: none;
}

.icon {
    fill: var(--primary-color);
}

/* Special items */
#construction-banner {
    max-width: 60%;
    height: auto;
}

/* Header section */
.site-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 5vw;
    margin: 0 0 10vh 0;
    min-height: 64px;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--background-color);
    border-bottom: 0px solid var(--background-color);
    transition: border 0.8s ease-out, background-color 0.8s ease;
}

.is-sticky {
    border-bottom: 1px solid var(--accent-color);
    transition: border 0.8s ease-in, background-color 0.8s ease;
}

.header-left-area {
    display: flex;
    align-items: center;
    flex: 1 0 0;
    

    & > a {
        height: 100%;
        display: flex;  
        align-items: center;

        & > span {
            display: flex;
            align-items: center;
        }
    }
}

.header-middle-area {
    display: flex;
    align-items: center;
    flex: 5 0 0;
}

.nav-search-bar {
    display: flex;
    align-items: center;
    flex: 1 0 0;
    color: var(--text-secondary-color);

    .search-bar {
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
        height: fit-content;
        color: inherit;
        background-color: rgb(from var(--secondary-color) r g b/ 0.5);
        font-size: 0.75em;
        padding: 0.14em 0.5em;
        border-radius: 30px;
        border-color: transparent;

        svg {
            transition: transform 0.2s ease-out;
        }
    }

    &:hover .search-bar {
        background-color: rgb(from var(--secondary-color) r g b/ 0.6);
        cursor: pointer;

        svg {
            transform: rotate(80deg);
        }
    }
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 0;
    
    ul {
        display: flex;
        justify-content: space-evenly;
        margin: 0 auto;
        padding: 0;
    }
    
    li {
        margin: 0 0.2em;
        font-size: 0.85em;
        
        a {
            padding: 0 0.6em;
        }
    }

    li:hover a>span{
        border-bottom: 2px solid var(--accent-color);
    }
}

.header-right-area {
    display: flex;
    flex: 1 0 0;
    justify-content: end;
    align-items: center;

    >div {
        height: 46px;
        width: 46px;
        padding: 0;
        margin: 0;
    }

    button {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        line-height: 0;
        background-color: transparent;
        path {
            fill: var(--text-primary-color);
        }
    }

    & > .site-version-text {
        display: flex;
        align-items: center;
        font-size: 0.45em;
        color: var(--text-primary-color);
    } 
}

.dark-theme-toggle, .light-theme-toggle, .setting-menu-toggle {
    cursor: pointer;
    
    &::before {
        content: "";
        position: absolute;
        width: 46px;
        height: 46px;
        border-radius: 45px;
        background-color: rgb(from var(--text-secondary-color) r g b / 0.1);
        transform: scale(0);
        transition: transform 0.35s ease-in-out;
    }

    &:hover::before {
        transform: scale(0.85);
    }
}

.setting-menu-toggle {
    svg {
        transition: transform 0.2s ease-in-out;
    }

    &:hover {
        svg {
            transform: rotate(360deg);
            cursor: pointer;
            transition: transform 0.8s ease-in-out;
        }
    }
}

/* Default main section */
.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Default pagination */
.pagination {
    display: flex;
    width: max-content;
    gap: 5px;

    span:hover {
        background-color: rgb(from var(--secondary-color) r g b / 0.5);
        cursor: pointer;

        &>a:hover {
            background-color: transparent;
        }
    }

    a {
        &.page {
            display: flex;
            width: max-content;
            align-content: center;
            align-items: center;
            padding: 0.05em 0.3em;
        }

        &.page.current {
            background-color: var(--secondary-color);
        }

        &:not(.current):hover {
            background-color: rgb(from var(--secondary-color) r g b / 0.5);
            cursor: pointer;
        }
    }
}

/* Footer section */
.site-footer {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: auto;

    >div {
        display: flex;
    }
}

.copyright {
    gap: 8px;      
}

.author-name {
    color: var(--accent-color);
}

.copyright-icon {
    path.cc-border {
        fill: none;
        fill-opacity:1;
        fill-rule:evenodd;
        stroke: var(--accent-color);
        stroke-width:5.98238325;
        stroke-linejoin:round;
        stroke-miterlimit:4;
        stroke-dasharray:none;
        stroke-opacity:1
    }

    path.cc-text {
        fill:var(--accent-color);
    }
}

.year {
    color: var(--accent-color); 
}

.social {
    gap: 8px;
}

/* Animations */

/* Media (responsive design) */
@media (prefers-color-scheme: light) {
    :root {
        --primary-color: var(--color-primary--light);
        --secondary-color: var(--color-secondary--light);
        --accent-color: var(--color-accent--light);
        --background-color: var(--color-background--light);
        --text-primary-color: var(--color-text-primary--light);
        --text-secondary-color: var(--color-text-secondary--light);
        --disabled-color: var(--color-disabled--light);
        color-scheme: light; 
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: var(--color-primary--dark);
        --secondary-color: var(--color-secondary--dark);
        --background-color: var(--color-background--dark);
        --accent-color: var(--color-accent--dark);
        --text-primary-color: var(--color-text-primary--dark);
        --text-secondary-color: var(--color-text-secondary--dark);
        --disabled-color: var(--color-disabled--dark);  
        color-scheme: dark; 
    }
}

@media (max-width: 900px) {
    :root {
        --_size: 1.25rem;
    }

    svg {
        width: 16px;
        height: 16px;

        &.logo-text {
            width: 4.8em;
            height: 2em;
        }
    }

    .site-header {
        box-sizing: border-box;
        flex-direction: column;
    }

}

@media screen and (max-width: 430px) {
    :root {
        --_size: 1rem;
    }
}