:root {
    --container-width: 75rem;
    --container-half: 37.5rem;

    --font-reg: 'Rubik', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Noto Sans', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-sz-base: clamp(1rem, 1.5vw, 1.125rem);
    --font-sz-mercury: 0.7em;
    --font-sz-mars: 0.75em;
    --font-sz-venus: 0.875em;
    --font-sz-earth: 1em;
    --font-sz-neptune: 1.25em;
    --font-sz-uranus: 1.5em;
    --font-sz-saturn: 2.25em;
    --font-sz-jupiter: 3em;

    --elev-stratus: 0 0.15em 0.15em -0.1em rgba(0, 0, 0, 0.5);
    --elev-cumulus: 0 0.20em 0.25em rgba(0, 0, 0, 0.15);
    --elev-cirrus: 0 0.25em 0.75em rgba(0, 0, 0, 0.15);
	--elev-stratus-filter: drop-shadow(0 0.1em 0.1em oklch(0% 0 0 / 0.25));

    --skew-angle: -25deg;
    --skew-undo: 25deg;

    --skin-bg: hsl(0, 0%, 20%);
    --skin-bg-text: hsl(0, 0%, 100%);
    --skin-bg-dark: hsl(251, 13%, 17%);
    --skin-bg-softtext: hsla(0, 0%, 100%, 0.667);
	--skin-bg-light: hsl(0, 0%, 30%);

    --skin-shade: hsla(0, 0%, 0%, 0.667);

    --skin-content: hsl(0, 0%, 100%);
    --skin-content-text: hsl(0, 0%, 20%);

    --skin-input-bg: hsl(0, 0%, 90%);
	--skin-focus: hsl(205 90% 50%);

    --skin-footer: hsl(0, 0%, 0%);
    --skin-footer-text: hsl(0, 0%, 100%);

    --skin-danger-bg: hsl(355, 66%, 45%);
    --skin-danger-text: hsl(355, 66%, 45%);
    --skin-danger-light: hsl(355, 85%, 98%);

	--skin-success-bg: hsl(77 50% 36%);
	--skin-success-text: hsl(85 58% 30%);
	--skin-success-light: hsl(77 85% 97%);

    --skin-normal-bg: hsl(60, 26%, 46%);
    --skin-fighting-bg: hsl(3, 66%, 45%);
    --skin-flying-bg: hsl(255, 76%, 70%);
    --skin-poison-bg: hsl(300, 43%, 44%);
    --skin-ground-bg: hsl(44, 58%, 43%);
    --skin-rock-bg: hsl(49, 58%, 41%);
    --skin-bug-bg: hsl(66, 72%, 35%);
    --skin-ghost-bg: hsl(263, 27%, 47%);
    --skin-steel-bg: hsl(240, 15%, 61%);
    --skin-fire-bg: hsl(25, 84%, 50%);
    --skin-water-bg: hsl(222, 82%, 65%);
    --skin-grass-bg: hsl(100, 50%, 41%);
    --skin-electric-bg: hsl(48, 100%, 35%);
    --skin-psychic-bg: hsl(342, 70%, 60%);
    --skin-ice-bg: hsl(180, 50%, 42%);
    --skin-dragon-bg: hsl(258, 85%, 60%);
    --skin-dark-bg: hsl(24, 22%, 36%);
    --skin-fairy-bg: hsl(347, 50%, 63%);
    --skin-typeless-bg: hsl(0, 0%, 40%);
    --skin-varies-bg: hsl(0, 0%, 40%);
    --skin-stellar-bg: conic-gradient(
        var(--skin-electric-bg) 20deg,
        var(--skin-fire-bg) 20deg 40deg,
        var(--skin-fighting-bg) 40deg 60deg,
        var(--skin-fairy-bg) 60deg 80deg,
        var(--skin-psychic-bg) 80deg 100deg,
        var(--skin-poison-bg) 100deg 120deg,
        var(--skin-ghost-bg) 120deg 140deg,
        var(--skin-steel-bg) 140deg 160deg,
        var(--skin-normal-bg) 160deg 180deg,
        var(--skin-dark-bg) 180deg 200deg,
        var(--skin-dragon-bg) 200deg 220deg,
        var(--skin-flying-bg) 220deg 240deg,
        var(--skin-ice-bg) 240deg 260deg,
        var(--skin-water-bg) 260deg 280deg,
        var(--skin-grass-bg) 280deg 300deg,
        var(--skin-bug-bg) 300deg 320deg,
        var(--skin-rock-bg) 320deg 340deg,
        var(--skin-ground-bg) 340deg 360deg
    );

    --skin-male-bg: hsl(227, 86%, 48%);
    --skin-female-bg: hsl(354, 99%, 41%);
    --skin-agender-bg: hsl(0, 0%, 33%);
    --skin-none-bg: hsl(0, 0%, 33%);
    --skin-other-bg: hsl(0, 0%, 33%);
    --skin-gender-text: hsl(0, 0%, 100%);

	/* Dark variants needed, filter brightness does not work on svg elements in Safari */
	--skin-bond-disloyal-bg: oklch(0.7076 0.1847 28.38);
	--skin-bond-disloyal-bg-dark: oklch(0.4421 0.1092 28.2);
	--skin-bond-indifferent-bg: oklch(0.8019 0.1677 72.5);
	--skin-bond-indifferent-bg-dark: oklch(0.5 0.1157 74);
	--skin-bond-upset-bg: oklch(0.9501 0.1771 105.86);
	--skin-bond-upset-bg-dark: oklch(0.5599 0.1218 105.4);
	--skin-bond-neutral-bg: oklch(0.874 0.0402 315.57);
	--skin-bond-neutral-bg-dark: oklch(0.5021 0.0251 312);
	--skin-bond-content-bg: oklch(0.8903 0.2255 143.17);
	--skin-bond-content-bg-dark: oklch(0.5067 0.1427 143.5);
	--skin-bond-pleased-bg: oklch(0.9051 0.1467 182.58);
	--skin-bond-pleased-bg-dark: oklch(0.507 0.0921 182.5);
	--skin-bond-loyal-bg: oklch(0.7609 0.2122 334.9);
	--skin-bond-loyal-bg-dark: oklch(0.4613 0.1217 335);

	--skin-pokeball-bg: hsl(355 66% 45%);
	--skin-medicine-bg: hsl(249, 50%, 57%);
	--skin-berry-bg: hsl(205 50% 35%);
	--skin-held-item-bg: hsl(176, 60%, 32%);
	--skin-evolution-bg: hsl(77, 50%, 36%);
	--skin-trainer-gear-bg: hsl(28 50% 32%);

    --skin-bar-bg: hsl(330, 1%, 38%);
    --skin-bar-healthy: hsl(119, 100%, 52%);
    --skin-bar-secondary: hsl(197, 91%, 64%);
	--skin-bar-tertiary: hsl(330, 1%, 65%);
    --skin-bar-warning: hsl(45, 83%, 49%);
    --skin-bar-danger: hsl(355, 72%, 53%);

    --skin-contest-cool: oklch(0.5723 0.125 37.4);
    --skin-contest-beauty: oklch(0.5629 0.1044 263.22);
    --skin-contest-cute: oklch(0.577 0.1134 0.83);
    --skin-contest-clever: oklch(0.55 0.1645 136.43);
    --skin-contest-tough: oklch(0.5552 0.0895 81.99);

	--skin-status-poisoned: oklch(70.5% 0.223 314);
	--skin-status-badlypoisoned: linear-gradient(to bottom, oklch(60% 0.277 293), oklch(68% 0.251 305));
	--skin-status-frozen: oklch(89% 0.166 177);
	--skin-status-burned: oklch(74% 0.177 51);
	--skin-status-paralysis: oklch(87% 0.179 92);
	--skin-status-asleep: oklch(80% 0.105 247);
	--skin-status-text: oklch(0% 0 0);

	--skin-forest-bg: oklch(0.4206 0.1039 147.99);
	--skin-jungle-bg: oklch(0.4645 0.1337 143.04);
	--skin-woodland-bg: oklch(0.4803 0.0682 138.46);
	--skin-field-bg: oklch(0.5323 0.1273 134.96);
	--skin-grassland-bg: oklch(0.5363 0.1224 127.17);
	--skin-city-bg: oklch(0.4153 0.0265 285.19);
	--skin-industrial-bg: oklch(0.4209 0.0333 66.71);
	--skin-volcano-bg: oklch(0.4139 0.151388 33.3365);
	--skin-cave-bg: oklch(0.2688 0.0329 305.78);
	--skin-mountain-bg: oklch(0.4735 0.0256 285.38);
	--skin-desert-bg: oklch(0.5184 0.0994 72.5);
	--skin-badland-bg: oklch(0.4263 0.0996 45.01);
	--skin-pond-bg: oklch(0.4712 0.0935 161.36);
	--skin-lake-bg: oklch(0.4025 0.0959 251.5);
	--skin-river-bg: oklch(0.4531 0.1019 246.28);
	--skin-riverside-bg: oklch(0.4791 0.0758 167.89);
	--skin-beach-bg: oklch(0.5409 0.1041 84.45);
	--skin-ocean-bg: oklch(0.3791 0.1105 251.08);
	--skin-reef-bg: oklch(0.4779 0.081571 194.769);
	--skin-polar-sea-bg: oklch(0.449 0.074 240.39);
	--skin-abyss-bg: oklch(0.1866 0.0535 279.88);
	--skin-swamp-bg: oklch(0.3835 0.0742 125.25);
	--skin-glacier-bg: oklch(0.4617 0.0712 233.45);
	--skin-tundra-bg: oklch(0.4494 0.0457 230.78);
	--skin-ruin-bg: oklch(0.4175 0.0522 83.68);

	--red-hsl: 355 72% 53%;
	--red-main: hsl(355 72% 53%);
    --red-dark: hsl(355 66% 45%);
    --red-text: hsl(355 66% 45%);
    --red-light: hsl(355 90% 67%);

	interpolate-size: allow-keywords;
}

body {
    font-family: var(--font-reg);
    font-size: var(--font-sz-base);
    background-image:
        radial-gradient(circle at 5vw 70vh, hsla(321, 86%, 91%, 0.5), hsla(321, 86%, 91%, 0) 67%),
        radial-gradient(circle at 50vw 5vh, hsla(120, 50%, 75%, 0.25), hsla(120, 50%, 75%, 0) 67%),
        radial-gradient(circle at 80vw 95vh, hsla(45, 80%, 65%, 0.25), hsla(45, 50%, 65%, 0) 67%);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    overflow: hidden;
}

a {
    color: var(--theme-text);
}

a:hover {
    text-decoration: none;
}

ul, ol {
	padding-inline-start: clamp(0.75em, 3vw, 2em);
}

input, textarea, select {
    border: none;
    background-color: var(--skin-input-bg);
    padding: 0.5em 0.75em;
}

input:focus, textarea:focus {
    background-color: var(--skin-content);
	outline: 0.125em solid var(--skin-focus);
}

input:disabled + label {
    opacity: 0.5;
}

figure {
    margin: 0;
}

figure img {
    width: 100%;
    box-shadow: var(--elev-stratus);
    border: 0.125em solid var(--skin-bg);
    border-radius: 0.5em;
}

figure figcaption {
    padding-block: 0.25em;
    display: block;
    text-align: center;
    font-size: var(--font-sz-venus);
    opacity: 0.9;
}

hr {
    width: 33%;
    border: none;
    border-bottom: 0.0625em solid var(--skin-bg);
    opacity: 0.5;
}

.nolist {
    list-style: none;
    padding: 0;
}

.cap {
    text-transform: capitalize;
}

.upper {
    text-transform: uppercase;
}

dfn {
    font-weight: bold;
    font-style: normal;
}

/* https://webaim.org/techniques/css/invisiblecontent/ */
.visually-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}