:root {
    --type-icon-gap: 2vw; /* Define the gap between type icons inside their flexbox */
    --block-padding: 2vw; /* Define the padding for each block */
    --border-radius: 7px; /* Define the border radius for every element with rounded corners */
    
    /* Colors */
    color-scheme: light dark;
    
    --block-border: hsl(0, 0%, 72%) solid 1vw; /* Define the border for each block on the pokemon page */
    @media (prefers-color-scheme: dark) {
        --block-border: hsl(0, 0%, 35%) 1vw solid;
    }
    
    --light-grey-background: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 10%)); /* Define the background color for each block on the pokemon page */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;

    color: light-dark(hwb(0 0% 100% / 0.99), hwb(0 100% 0% / 0.90)); /* Default text color */
    
}

.body-wrapper {
    background-color: light-dark(hwb(0 98% 2% / 0.6), black);
}


img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.italic {
    /* font-style: italic; */
    color: light-dark(hwb(0 0% 100% / 0.8), hwb(0 97% 3% / 0.95));
}

/* Specific parts: */
.searchbox-wrapper {
    border-radius: 1vw;
}


#search_game_name {
    border-radius: 1vw;
    background-color: #e5e5e5; 
    /* hsla(225, 95%, 70%, 0.6); */
    @media (prefers-color-scheme: dark) {
        background-color: hwb(0 55% 45% / 0.623) !important;
    }
}

.type-icon { /* All type icons use flexbox, so they are inside a container div */
    width: 100%;
    filter: drop-shadow(0 0 0.25vw hwb(0 0% 100% / 0.2));
    @media (prefers-color-scheme: dark) {
        filter: brightness(0.97);
    }
}

.sad-pikachu {
    /* filter: drop-shadow(0 0 0.5vw hwb(0 0% 100% / 0.1)); */
    @media (prefers-color-scheme: dark) {
        filter: brightness(0.98);
    }
}


/* Pokemon info */
.pokemon-info {
    border: var(--block-border);
    background-color: var(--light-grey-background);
    border-radius: var(--border-radius);
    padding: 2vw;
    margin-top: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pokemon-info .pokemon-sprite-container {
    background-color: light-dark(hwb(0 42% 58% / 0.623), hwb(0 42% 58% / 0.623));
    border-radius: var(--border-radius);
    padding: var(--block-padding);
    display: inline-block;
    width: 44vw; /* Size hard coded in both dimension to reserve space for unloaded image. */
    height: 44vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pokemon-info .pokemon-sprite {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    @media (prefers-color-scheme: dark) {
        filter: brightness(0.98);
    }
}

.pokemon-name {
    font-size: 12vw;
    color: light-dark(black, hwb(0 96% 4% / 0.97));
}

.pokemon-subscript {
    font-size: 8vw;
    line-height: 4vw;
    height: 9vw;
}

.pokemon-types {
    margin-bottom: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--type-icon-gap);
}

.pokemon-type-icon-container { /* Container for each type icon */
    width: 20vw;
}

/* Type effectiveness info (applies to all) */
.type-effectiveness-info {
    border-radius: var(--border-radius);
    border: var(--block-border);
    margin: 4vw;
    margin-bottom: 0;
    margin-top: 4vw;
    padding: var(--block-padding);
}

.effectiveness-title {
    font-size: 7vw;
    /* font-style: regular; */
    font-weight: 700;
    /* @media (prefers-color-scheme: light) {
        
    } */
    color: light-dark(hsla(0, 0%, 100%, 0.96), hsl(0, 0%, 100%)) !important;
}

.type-effectiveness-table {
    margin: 1vw auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--type-icon-gap);
}

.effectiveness-multiplier {
    color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
    filter: drop-shadow(0 0 0.25vw hwb(0 0% 100% / 0.1));
    font-weight: 600;
}

.super-effective-cell {
    width: 20vw;
}

.effectiveness-multiplier.super-effective {
    font-size: 5vw;
    font-weight: 700;
}

/* Not effective types info */
.type-effectiveness-info.not-effective {
    background-color: light-dark(hwb(225 12% 15% / 0.6), hwb(225 12% 46%));
    margin-top: 2vw;
}

.pokemon-type-icon-container.not-effective {
    width: 15vw;
}

/* Neutral effect types info */
#toggle-neutral-effectiveness-button {
    margin-top: 2vw;
}

#toggle-neutral-effectiveness-button.button-unactive {
    background-color: light-dark(hwb(0 86% 14% / 0.6), hsla(0, 0%, 15%, 0.8));
}

#toggle-neutral-effectiveness-button.button-active {
    background-color: light-dark(hwb(0 78% 22% / 0.85), hsl(0, 0%, 20%));
}

.type-effectiveness-info.neutral {
    background-color: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 12%));
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.05s ease, visibility 0.1s ease;
}

#neutral-effectiveness-info {
    margin-bottom: 0vw;
}

.type-effectiveness-info.neutral.open {
    visibility: visible;
    opacity: 1;
}

#neutral-title {
    color: light-dark(hsla(0, 0%, 0%, 0.85), hsl(0, 0%, 96%)) !important;
    
    /* @media (prefers-color-scheme: light) {
        color: hsl(0, 0%, 0%) ;
    } */

}

.pokemon-type-icon-container.neutral {
    width: 12.5vw;
}

.effectiveness-multiplier.neutral {
    font-size: 4vw;
    color: light-dark(hwb(0 0% 100% / 0.6), hsla(0, 0%, 100%, 0.75));
    font-weight: 600;
}

.four-times-extra-bold {
    font-weight: 800 !important;
}