:root {

    --font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --bg0: #1e1e1e;
    --bg1: #252526;
    --bg2: #2d2d2d;
    --bg3: #333333;

    --text1: #d4d4d4;
    --text2: #d4d4d4aa;
    --text-heading: #ffffff;

    --primary: hsl(200, 100%, 50%);
    --primary-shady: hsl(200, 100%, 40%);

    --success: #52c994;
    --error: #ff8071;

    --dex-bg-top: #d3bcea;
    --dex-bg-bottom: #8b97ed;
    --dex-bg-gradient: linear-gradient(180deg, var(--dex-bg-top), var(--dex-bg-bottom));

    --color-blur: blur(8px) saturate(1.5);


    .material-symbols-rounded {
        font-variation-settings:
            'FILL'1,
            'wght'500,
            'GRAD'0,
            'opsz'24;
        user-select: none;
    }

    accent-color: var(--primary);

}

html {
    -webkit-tap-highlight-color: transparent;
}

/* scrollbar customisation */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--bg1), transparent 75%);
    border-radius: 10px;
    border: 3px solid transparent;
    min-height: 40px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklab, var(--bg1), transparent 50%);
}


/* material view transition */
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-right {
    from {
        transform: translateX(30px);
    }
}

@keyframes slide-to-left {
    to {
        transform: translateX(-30px);
    }
}


/*noinspection CssInvalidPseudoSelector*/
::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

/*noinspection CssInvalidPseudoSelector*/
::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

::view-transition-new(logo-hover) {
    animation: spin-from-hover 0.25s cubic-bezier(0.550, 0.055, 0.675, 0.190) reverse both;
}


/* button reset */
button {
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
}

/* type icons */
.icon {
    border-radius: 100%;
    transition: 200ms all;
    --type-shadow-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.icon:hover{
    filter: saturate(200%);
    transform: scale(1.1);
    cursor: pointer;
}

.icon img {
    height: 60%;
    width: 60%;
    filter: brightness(2) drop-shadow(1px 0px 1px rgba(0,0,0,0.25));
}

.bug {
    background: #92BC2C;
    box-shadow: 0 0 var(--type-shadow-size) #92BC2C;
}

.dark {
    background: #595761;
    box-shadow: 0 0 var(--type-shadow-size) #595761;
}

.dragon {
    background: #0C69C8;
    box-shadow: 0 0 var(--type-shadow-size) #0C69C8;
}

.electric {
    background: #F2D94E;
    box-shadow: 0 0 var(--type-shadow-size) #F2D94E;
}

.fire {
    background: #FBA54C;
    box-shadow: 0 0 var(--type-shadow-size) #FBA54C;
}

.fairy {
    background: #EE90E6;
    box-shadow: 0 0 var(--type-shadow-size) #EE90E6;
}

.fighting {
    background: #D3425F;
    box-shadow: 0 0 var(--type-shadow-size) #D3425F;
}

.flying {
    background: #A1BBEC;
    box-shadow: 0 0 var(--type-shadow-size) #A1BBEC;
}

.ghost {
    background: #5F6DBC;
    box-shadow: 0 0 var(--type-shadow-size) #5F6DBC;
}

.grass {
    background: #5FBD58;
    box-shadow: 0 0 var(--type-shadow-size) #5FBD58;
}

.ground {
    background: #DA7C4D;
    box-shadow: 0 0 var(--type-shadow-size) #DA7C4D;
}

.ice {
    background: #75D0C1;
    box-shadow: 0 0 var(--type-shadow-size) #75D0C1;
}

.normal {
    background: #A0A29F;
    box-shadow: 0 0 var(--type-shadow-size) #A0A29F;
}

.poison {
    background: #B763CF;
    box-shadow: 0 0 var(--type-shadow-size) #B763CF;
}

.psychic {
    background: #FA8581;
    box-shadow: 0 0 var(--type-shadow-size) #FA8581;
}

.rock {
    background: #C9BB8A;
    box-shadow: 0 0 var(--type-shadow-size) #C9BB8A;
}

.steel {
    background: #5695A3;
    box-shadow: 0 0 var(--type-shadow-size) #5695A3;
}

.water {
    background: #539DDF;
    box-shadow: 0 0 var(--type-shadow-size) #539DDF;
}


body {

    box-sizing: border-box;

    display: grid;
    height: 100vh;
    width: 100vw;
    margin: 0;

    position: relative;
    z-index: 1;

    font-family: var(--font-family), system-ui;

    background-color: var(--bg0);
    color: var(--text1);

    grid-template-areas:
        "nav main";

    grid-template-columns: auto 1fr;

    .material-symbols-rounded {
        user-select: none;
        pointer-events: none;
    }
}

* {
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

a.link {
    color: var(--primary);
    text-decoration: none;
    filter: brightness(1.25);

    &:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
}

.spin {
    -webkit-animation: rotate-center 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
            animation: rotate-center 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes spin-from-hover {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

nav {

    view-transition-name: navbar;

    grid-area: nav;
    position: relative;
    /* background-color: color-mix(in srgb, var(--bg2), transparent); */
    padding: 0.75rem;
    gap: 0.25rem;

    #logo-svg {
        view-transition-name: logo-hover;
    }

    .nav-isolated {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.25rem;
        height: 100%;
    }

    .nav-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        padding: 0.5rem 0.5rem;
        gap: 0.5rem;

        border-radius: 0.5rem;
        font-weight: 400;
        text-decoration: none;
        color: var(--text-heading);

        cursor: pointer;

        .material-symbols-rounded {
            font-size: 1.25rem;
            font-variation-settings: 'FILL'0, 'wght'500, 'GRAD'0, 'opsz'24;
        }


        &:hover {
            background-color: color-mix(in srgb, var(--bg3), transparent 85%);
            color: var(--text-heading);
        }

        & a {
            font-size: 1rem;
            color: inherit;
            text-decoration: none;
        }


        &.active {
            background-color: color-mix(in srgb, var(--bg3), transparent 75%);
            color: var(--text-heading);

            .nav-link {
                /* font-weight: 500; */
            }

            .material-symbols-rounded {
                font-variation-settings: 'FILL'1, 'wght'500, 'GRAD'0, 'opsz'24;
            }

        }


    }

    & footer {
        margin-top: auto;
        text-align: center;
        font-weight: 500;

        & a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;

            &:hover {
                text-decoration: none;

                .text {
                    text-decoration: underline;
                    text-decoration-thickness: 2px;
                }
            }

            .material-symbols-rounded {
                font-size: 20px;
                line-height: 1;
                text-decoration: none !important;
                height: 20px;
            }
        }


    }


}

nav::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,0.25);
    mix-blend-mode: multiply;
}

main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: clip;
    z-index: 0;
}

#container {
    display: grid;
    align-content: stretch;
    grid-template-columns: repeat(auto-fill, 180px);
    grid-auto-rows: 180px;
    justify-content: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}

header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.muted {
    opacity: 0.25;
}

.hidden {
    display: none !important;
}

@media (max-width: 579px) {
    body {
        grid-template-areas:
            "main";
        grid-template-columns: 1fr;
    }

    nav {
        display: none;
        position: absolute;
        width: 100vw;
        height: 100dvh;
        top: 0;
        left: 0;
        background-color: color-mix(in srgb, var(--bg2), transparent 15%);
        z-index: 1;
        padding: 1rem;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    #container {
        grid-template-columns: repeat(auto-fill, 120px);
        grid-auto-rows: 120px;
        gap: 0.5rem;
        padding-block-end: 6rem;
    }

    /* this is bad for accessibility but its overflowing the viewport?? */
    *::-webkit-scrollbar {
        width: 0;
    }

}