@import "./route.css";

/*nofouc*/
body>* { visibility:initial }

:root
{
    --color-theme-1:#382933;
    --color-theme-2:#3B5249;
    --color-theme-3:#519872;
    --color-theme-4:#A4B494;

    --color-bg: #1c1e1f; 
    --color-banner: #151617;
    --color-text: #e8e6e3;
    --color-text-secondary: #606060;
    
    --color-link: #67b5fe;
    --color-link-visited:#3a90df;
    
    --color-border:#726a5d;
    --color-border-dark:#0f1011;
    --color-boder-blue:#007bff;

    --color-card:#242729;
    --color-card-2: #1d1f20;

    --color-violet-rose: #5d3d8b;
    --color-deep-blue:#003cc7;
    --color-gold:#ffc677;
    --color-orange:#ee864e;
    --color-orange2:#fd7e14;

    --color-fine-red:#df4655;
    --color-fine-green:#61d97c;

    --gap:0.7em;

}

/*reset*/
*
{
    box-sizing: border-box;
    margin: 0;
}
/*base*/
html,body
{
    height: 100%;
}

body
{
    display: grid;
    grid-template-rows: min-content 1fr min-content ;
}
/*colors*/
body
{
    color: var(--color-text);
    background-color: var(--color-bg);
}

header,footer
{
    background-color: var(--color-banner);
    z-index: 1;
}

nav
{
    background-color: var(--color-card);
}


/*custom site*/

header
{
    font-size: 2em;
    text-align: center;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6);
}

main
{
    display: grid;
}

footer
{
    text-align: right;
    font-size: 0.8em;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.6);
}

nav
{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: min-content;
    padding: 1em;
    gap: var(--gap);
    container-name: douze;
    container-type: inline-size;
}
@container douze (width < 245em)
{
    a
    {
        grid-column: span 1;
    }
}
@container douze (width < 124em)
{
    a
    {
        grid-column: span 2;
    }
}
@container douze (width < 83em)
{
    a
    {
        grid-column: span 3;
    }
}
@container douze (width < 62em)
{
    a
    {
        grid-column: span 4;
    }
}
@container douze (width < 41em)
{
    a
    {
        grid-column: span 6;
    }
}
@container douze (width < 20em)
{
    a
    {
        grid-column: span 12;
    }
}



/*refacto*/
a
{
    border-radius: 1px;
    outline-style:ridge;
    outline-color: var(--color-link);
    outline-width: 1px;

    /*padding: 1em;*/
    text-align: center;
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.15s ease-in-out;
    text-decoration: none;

    &:hover
    {
        box-shadow: 1px 1px 6px 6px rgba(0, 0, 0, 0.6);
    }
    &,&:visited
    {
        color: var(--color-link);
    }
    &[is=alt-a]:not([href*="#"])
    {
        &[data-location-match="exact"]
        {
            pointer-events: none;
            filter: grayscale();
        }
        &[data-location-match="part"]
        {
            text-decoration:underline;
        }
    }
}

alt-route[data-path="/"] a.feature::before
{
    content: "F : ";
}
alt-route[data-path="/"] a.race::before
{
    content: "R : ";
}

alt-route[data-path="/"] a.cantrip::before
{
    content: "C : ";
}
alt-route[data-path="/"] a.lv1::before
{
    content: "lv1 : ";
}

alt-route[data-path="/"] a.lv2::before
{
    content: "lv2 : ";
}