/* General Settings */
:root {
    --bg: #0e0e0e; 
    --bg-accent: #1a1a1a; 
    --accent: #ffa0c5; /* Borders */

    --font-header: 'header';
    --font-text: 'text';

    --color-header: #ffa0c5; /* Also color for the Icons & Buttons*/
    --color-link: #ff69b4;
    --color-default: #fdfdfd; 
    --color-button: white; 

    --main-Header: 3rem;
    --base-text: 1rem;

    --settings-border: 3px solid white; 

    --border-top: 2px solid var(--accent);
    --border-bottom: 2px solid var(--accent);
    --border-left: 1px solid var(--accent);

    --border-main-all: 2px solid var(--accent);
    --border-secondary-all: 1px solid var(--accent);

    --adult-rating: red;
    --teen-rating: yellow;
}

:root.light {
    --bg: #ffffff; 
    --bg-accent: #1a1a1a; 
    --accent: #ffa0c5; /* Borders */

    --font-header: 'header';
    --font-text: 'text';

    --color-header: #ffa0c5; /* Also color for the Icons & Buttons*/
    --color-link: #ff69b4;
    --color-default: #1a1a1a; 
    --color-button: black; 

    --main-Header: 3rem;
    --base-text: 1rem;

    --settings-border: 3px solid rgb(0, 0, 0); 

    --border-top: 2px solid var(--accent);
    --border-bottom: 2px solid var(--accent);
    --border-left: 1px solid var(--accent);

    --border-main-all: 2px solid var(--accent);
    --border-secondary-all: 1px solid var(--accent);
}

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%; width: 100%;
    overflow-x: hidden;
}

    body {
        background: var(--bg);
    }

    section {
        margin: 1rem auto;
    }

    a, p {
        color: var(--color-default);
        font-family: var(--font-text);
    }

        a {
            cursor: pointer;
            text-decoration: none;
            user-select: none;
            color: var(--color-link);
        }

    h1, h2, h3, h4, h5, h6 {
        color: var(--color-header);
        font-family: var(--font-header);
    }

        h1 {font-size: 5rem;}     /* Main Title */
        h2 {font-size: 2.3rem;}   /* Header Title */
        h3 {font-size: 2rem;}     /* Titles for the Doujins (Doujin specific) + Header News */
        h4 {font-size: 1.3rem;}   /* Titles for the Doujins list */
        h5 {font-size: 1rem;}   /* Author / Rating -- Deadline*/
        h6 {font-size: .8rem;}     /* Categories / Small tips or info */

    .button {
        display: block;
        border: none;
        cursor: pointer;
        text-align: center;
        max-width: 9rem;
        padding: .7rem;
        font-family: 'header';
        color: var(--bg-accent);
        background-color: var(--accent);
        transition: .2s;
    }
        .button:hover {
            max-width: 9.5rem;
        }

    #overlay {
        display: flex;
        position: fixed;
        height: 300vh; width: 300vw;
        background-color: black;
        opacity: 0;
        pointer-events: none;
        top: 0;
        z-index: 999;
        transition: .3s;
    }
        #overlay.active {
            opacity: .6;
            pointer-events: auto;
        }

    #not-available {filter: grayscale(1);}

    .rating18 {
        font-size: .8rem;
        padding: .3rem;
        border-radius: 10px;
        color: black;
        background-color: var(--adult-rating);
    }

    .rating16 {
        font-size: .8rem;
        padding: .3rem;
        border-radius: 10px;
        color: black;
        background-color: var(--teen-rating);
    }


    @font-face {
        font-family: 'header';
        font-display: swap;
        src: url(fonts/Farabee\ Regular.ttf);
    }

    @font-face {
        font-family: 'text';
        font-display: swap;
        src: url(fonts/TikTokSans36pt-Regular.otf);
    }

/* Header */
header {
    display: flex;
    position: fixed;
    height: auto; width: 100%;
    border-bottom: var(--border-bottom);
    background-color: var(--bg-accent);
    top: 0;
    z-index: 998;
}

    header div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: auto; width: 100%;
        padding: 1rem;
    }

        header div h3 {
            padding: .5rem;
        }

        header div img {
            display: flex;
            height: auto; width: 2rem;
        }

/* Hero */
.hero {
    display: flex; flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    margin: 5rem auto 1rem auto;
}

    .hero div {
        display: flex; flex-direction: column;
        flex: 1 1 400px;
        min-width: 250px;
        height: 80%;
        gap: 1rem;
    }

        .hero img {
            pointer-events: none;
            width: 100%;
            margin: auto;
            animation: IdleWave 15s infinite ease-in-out;
        }

    .heroIntro {
        display: flex;
        margin: auto;
    }

/* Redirect */
.redirect {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    padding: 1rem;
}

    .redirect a {
        text-align: center;
        margin: 1rem auto;
        min-width: 33%;
        padding: .5rem;
        border: var(--border-main-all);
        color: var(--accent);
        background-color: var(--bg-accent);
        transition: .2s;
    }

        .redirect a:hover {
            background-color: var(--bg);
        }

/* Discord Server */
.discord {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 90%;
    gap: 1rem;
}

    .discord iframe {
        height: 20rem;
        width: 100%;
    }

/* Doujin of the Day */
.doujinDAY {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 90%;
    padding: 1rem;
    gap: 1rem;
    border: var(--border-main-all);
}

    .doujinDAY img {
        margin: auto;
        max-width: 300px;
    }

    .doujinDAY div {
        display: flex; flex-direction: column;
        flex: 1;
        min-width: 300px;
        gap: 1rem;
    }

/* List of Doujins */
.doujinLIST {
    display: flex; flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 95%;
}

    .doujinLIST div {
        display: flex; flex-direction: column;
        max-width: 300px;
        gap: 1rem;
        margin: 1rem auto;
        padding: 1rem;
        overflow: hidden;
        background-color: var(--bg-accent);
        border: var(--border-secondary-all);
    }

        .doujinLIST div img {
            margin: auto;
            max-width: 300px;
        }

        .doujinLIST h6 {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
        }

/* Events */
.event {
    display: flex; flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 90%;
    padding: 1rem;
    gap: 1rem;
    border: var(--border-main-all);
}

    .event div {
        display: flex; flex-direction: column;
        overflow: hidden;
        max-width: 900px;
        gap: 1rem;
    }

    .event div:nth-child(2) {
        border: var(--border-secondary-all);
    }

        .event div img {
            max-width: 500px;
            transition: .8s;
        }

        .event div img:hover {
            transform: scale(1.05);
        }

/* News */
.news {
    display: flex; flex-direction: column;
    margin: 5rem auto;
    gap: 2rem;
}

    .majorNews {
        display: flex; flex-direction: column;
        margin: auto;
        width: 90%;
        padding: 1rem;
        gap: .5rem;
        border: var(--border-main-all);
    }

    .minorNews {
        display: flex; flex-direction: column;
        margin: auto;
        width: 80%;
        padding: 1rem;
        gap: .5rem;
        border: var(--border-main-all);
    }

/* Contests */
.contestSec {
    display: flex; flex-direction: column;
    width: 90%;
    gap: 2rem;
}

    .contest {
        display: flex; flex-direction: column;
        height: fit-content;
        padding: 1rem;
        gap: 1rem;
        border: var(--border-main-all);
    }

        .contestDetails {
            display: flex; flex-direction: column;
            gap: .5rem;
        }

        .contestWinners {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

            .contestWinners img {
                margin: auto;
                max-width: 40vw;
                border: var(--border-secondary-all);
            }

/* Footer */
footer {
    display: flex;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
    bottom: 0;
    border-top: var(--border-top);
    background-color: var(--bg-accent);
}

    footer img {
        width: 1rem;
    }

/* Scrollbar */
    /* Works in Chrome, Edge, Safari */
    ::-webkit-scrollbar {
        width: 8px;                             /* thickness */
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-accent);           /* track color */
        border-left: var(--border-left);
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--accent);        /* scrollbar color */
        border-radius: 8px;                    /* rounded edges */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #ff8095;            /* hover effect */
    }






/* * {
    border: 1px solid lime;
} */