:root
{
    --text: #eaeaea;
    --background: #171727;
    --primary: #1f0c4a;
    
    --background-side: #1a1a2e;
    --background-dark: #131320;
    --background-darker: #0f0f1a;

    --primary-accent: #9c7bea;
    --primary-bright: #361584;

    --shadow1: rgba(0, 0, 0, 0.1);
    --shadow2: rgba(0, 0, 0, 0.2);
    --shadow5: rgba(0, 0, 0, 0.5);

    --red: #2a0a0a;
    --green: #0c1f0c;

}

body
{
    background: var(--background);
    color: var(--text); font-size: 18; font-family: "Noto Sans", sans-serif;

    /* overflow-y: auto; scrollbar-width: none; */
    overflow-y: hidden;
    overflow-x: hidden;
    /* scrollbar-width: none; */
    
    margin: 0; padding: 0;
    
    h1 
    {
        color: var(--primary-accent);
        text-align: center; text-shadow: 0px 4px 8px var(--shadow5);
    }
    h2
    {
        color: var(--primary-accent);
        text-align: center;
    }
    h3, h4, h5, h6
    {
        color: var(--primary-400);
    }
    a
    {
        color: var(--primary-accent);
    }
    em
    {
        color: var(--primary-accent);
    }
}
.wrapper 
{
    display: grid; gap: 1.5rem; height: 100vh;
    grid-template-areas:
        "header"
        "leftSidebar"
        "content"
        "rightSidebar";
    /* overflow-x: hidden; */
    overflow-y: auto; scrollbar-width: none;
    overflow-x: hidden;
    position: relative;
}

@media (width >= 1800px) {
    .wrapper 
    {
        grid-template-columns: 1fr .25fr 3fr .25fr 1fr; 
        grid-template-rows: .5fr 10fr; 
        gap: 0; min-height: 100vh;
        grid-template-areas:
        "header         header  header  header  header"
        "leftSidebar    .       content .       rightSidebar";
    }
    
    .body
    {
        overflow: hidden;
    }
}

.cover
{
    display: flex; flex: 1; min-height: 0;
    justify-content: center; align-items: center;

    a
    {
        display: block; flex: 1; height: 100%; width: 100%;

        img
        {
            object-fit: contain; height: 100%; width: 100%;
            filter: drop-shadow(0 4px 8px var(--shadow5));
            opacity: 0;
            background-color: var(--shadow5);
            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        img.loaded
        {
            opacity: 1;
            background-color: transparent;
        }
    }
}