:root {
    --color-dark: rgb(0, 6, 1);
    --color-light: rgb(212, 237, 119);
    --color-font: rgba(255, 255, 255, 1);
    --shadow: 0px 0px 8px var(--color-light);
    --shadow-big: 0px 0px 12px var(--color-light);
    --border-radius-small: 4px 24px;
    --border-radius-small-reverse: 24px 4px;
    --border-radius-big: 8px 48px;

    /* pokemon types_: */
    --normal: rgb(183, 183, 168);
    --fire: rgb(255, 96, 67);
    --water: rgb(81, 168, 255);
    --electric: rgb(255, 212, 81);
    --grass: rgb(139, 212, 110);
    --ice: rgb(102, 204, 255);
    --fighting: rgb(197, 110, 96);
    --poison: rgb(183, 110, 168);
    --ground: rgb(226, 197, 110);
    --flying: rgb(154, 168, 255);
    --psychic: rgb(255, 110, 168);
    --bug: rgb(183, 197, 67);
    --rock: rgb(197, 183, 125);
    --ghost: rgb(125, 125, 197);
    --dragon: rgb(139, 125, 241);
    --dark: rgb(139, 110, 96);
    --steel: rgb(183, 183, 197);
    --fairy: rgb(241, 168, 241);
}

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

ol,
ul {
    list-style-type: none;
}

.wrapper {
    padding: 0 max(5%, calc((100% - 1440px) / 2));
}

.d-none {
    display: none;
}

.d-flex {
    display: flex;
}

dialog {
    background-color: transparent;
    justify-self: center;
    align-self: center;
    border: none;
    width: min(100%, 900px);
}

html:has(dialog[open]) {
  overflow: hidden;
}