:root{--color-primary: #1c5087;--color-on-primary: #A7C3DF;--color-secondary: #fed234;--color-on-secondary: #745A00;--color-accent: #4da5d9;--color-on-accent: #093854;--color-highlight: #ea7317;--color-on-highlight: #551B00;--color-light: #fef7ec;--color-on-light: #7C715F;--color-dark: #071422;--color-on-dark: #6B7F95;--color-primary-1: rgb(136.5644171779, 182.1840490798, 230.4355828221);--color-primary-2: rgb(94.3251533742, 156.2147239264, 221.6748466258);--color-primary-3: rgb(52.0858895706, 130.245398773, 212.9141104294);--color-primary-4: rgb(36.7607361963, 105.0306748466, 177.2392638037);--color-primary-5: #1c5087;--color-primary-6: rgb(19.2392638037, 54.9693251534, 92.7607361963);--color-primary-7: rgb(10.4785276074, 29.9386503067, 50.5214723926);--color-primary-8: rgb(1.717791411, 4.9079754601, 8.282208589);--color-primary-9: hsl(210.8411214953, 65.6441717791%, -8.0392156863%);--color-on-primary-1: hsl(210, 46.6666666667%, 116.4705882353%);--color-on-primary-2: hsl(210, 46.6666666667%, 106.4705882353%);--color-on-primary-3: rgb(241.8, 246, 250.2);--color-on-primary-4: rgb(204.4, 220.5, 236.6);--color-on-primary-5: #A7C3DF;--color-on-primary-6: rgb(129.6, 169.5, 209.4);--color-on-primary-7: rgb(92.2, 144, 195.8);--color-on-primary-8: rgb(63.2, 118.5, 173.8);--color-on-primary-9: rgb(49.6, 93, 136.4);--color-secondary-1: white;--color-secondary-2: rgb(254.75, 243.75, 204.25);--color-secondary-3: rgb(254.5, 232.5, 153.5);--color-secondary-4: rgb(254.25, 221.25, 102.75);--color-secondary-5: #fed234;--color-secondary-6: rgb(253.75, 198.75, 1.25);--color-secondary-7: #cb9f01;--color-secondary-8: rgb(152.25, 119.25, 0.75);--color-secondary-9: rgb(101.5, 79.5, 0.5);--color-on-secondary-1: rgb(255, 212.4137931034, 65);--color-on-secondary-2: rgb(255, 200.9827586207, 14);--color-on-secondary-3: rgb(218, 169.1379310345, 0);--color-on-secondary-4: rgb(167, 129.5689655172, 0);--color-on-secondary-5: #745A00;--color-on-secondary-6: rgb(65, 50.4310344828, 0);--color-on-secondary-7: rgb(14, 10.8620689655, 0);--color-on-secondary-8: hsl(46.5517241379, 100%, -7.2549019608%);--color-on-secondary-9: hsl(46.5517241379, 100%, -17.2549019608%);--color-accent-1: rgb(245.1111111111, 250, 252.8888888889);--color-accent-2: rgb(203.0833333333, 228.75, 243.9166666667);--color-accent-3: rgb(161.0555555556, 207.5, 234.9444444444);--color-accent-4: rgb(119.0277777778, 186.25, 225.9722222222);--color-accent-5: #4da5d9;--color-accent-6: rgb(42.75, 141.75, 200.25);--color-accent-7: rgb(33.7777777778, 112, 158.2222222222);--color-accent-8: rgb(24.8055555556, 82.25, 116.1944444444);--color-accent-9: rgb(15.8333333333, 52.5, 74.1666666667);--color-on-accent-1: rgb(62.6129032258, 170.2580645161, 234.3870967742);--color-on-accent-2: rgb(23.8064516129, 148.1290322581, 222.1935483871);--color-on-accent-3: rgb(18.8709677419, 117.4193548387, 176.1290322581);--color-on-accent-4: rgb(13.935483871, 86.7096774194, 130.064516129);--color-on-accent-5: #093854;--color-on-accent-6: rgb(4.064516129, 25.2903225806, 37.935483871);--color-on-accent-7: hsl(202.4, 80.6451612903%, -1.7647058824%);--color-on-accent-8: hsl(202.4, 80.6451612903%, -11.7647058824%);--color-on-accent-9: hsl(202.4, 80.6451612903%, -21.7647058824%);--color-highlight-1: rgb(250.9328063241, 227.8853754941, 210.0671936759);--color-highlight-2: rgb(246.6996047431, 199.6640316206, 163.3003952569);--color-highlight-3: rgb(242.4664031621, 171.442687747, 116.5335968379);--color-highlight-4: rgb(238.233201581, 143.2213438735, 69.766798419);--color-highlight-5: #ea7317;--color-highlight-6: rgb(188.9011857708, 92.0079051383, 17.0988142292);--color-highlight-7: rgb(142.1343873518, 69.2292490119, 12.8656126482);--color-highlight-8: rgb(95.3675889328, 46.4505928854, 8.6324110672);--color-highlight-9: rgb(48.6007905138, 23.6719367589, 4.3992094862);--color-on-highlight-1: rgb(255, 104.2, 34);--color-on-highlight-2: rgb(238, 75.6, 0);--color-on-highlight-3: rgb(187, 59.4, 0);--color-on-highlight-4: rgb(136, 43.2, 0);--color-on-highlight-5: #551B00;--color-on-highlight-6: rgb(34, 10.8, 0);--color-on-highlight-7: hsl(19.0588235294, 100%, -3.3333333333%);--color-on-highlight-8: hsl(19.0588235294, 100%, -13.3333333333%);--color-on-highlight-9: hsl(19.0588235294, 100%, -23.3333333333%);--color-light-1: hsl(36.6666666667, 90%, 136.0784313725%);--color-light-2: hsl(36.6666666667, 90%, 126.0784313725%);--color-light-3: hsl(36.6666666667, 90%, 116.0784313725%);--color-light-4: hsl(36.6666666667, 90%, 106.0784313725%);--color-light-5: #fef7ec;--color-light-6: rgb(251.45, 226.6, 187.55);--color-light-7: rgb(248.9, 206.2, 139.1);--color-light-8: rgb(246.35, 185.8, 90.65);--color-light-9: rgb(243.8, 165.4, 42.2);--color-on-light-1: rgb(217.2602739726, 212.8904109589, 205.7397260274);--color-on-light-2: rgb(195.1369863014, 188.2054794521, 176.8630136986);--color-on-light-3: rgb(173.0136986301, 163.5205479452, 147.9863013699);--color-on-light-4: rgb(150.8904109589, 138.8356164384, 119.1095890411);--color-on-light-5: #7C715F;--color-on-light-6: rgb(95.1232876712, 86.6849315068, 72.8767123288);--color-on-light-7: rgb(66.2465753425, 60.3698630137, 50.7534246575);--color-on-light-8: rgb(37.3698630137, 34.0547945205, 28.6301369863);--color-on-light-9: rgb(8.4931506849, 7.7397260274, 6.5068493151);--color-dark-1: rgb(41.8292682927, 119.512195122, 203.1707317073);--color-dark-2: rgb(33.1219512195, 94.6341463415, 160.8780487805);--color-dark-3: rgb(24.4146341463, 69.756097561, 118.5853658537);--color-dark-4: rgb(15.7073170732, 44.8780487805, 76.2926829268);--color-dark-5: #071422;--color-dark-6: hsl(211.1111111111, 65.8536585366%, -1.9607843137%);--color-dark-7: hsl(211.1111111111, 65.8536585366%, -11.9607843137%);--color-dark-8: hsl(211.1111111111, 65.8536585366%, -21.9607843137%);--color-dark-9: hsl(211.1111111111, 65.8536585366%, -31.9607843137%);--color-on-dark-1: rgb(225.8661417323, 229.8031496063, 234.1338582677);--color-on-dark-2: rgb(196.1496062992, 204.1023622047, 212.8503937008);--color-on-dark-3: rgb(166.4330708661, 178.4015748031, 191.5669291339);--color-on-dark-4: rgb(136.7165354331, 152.7007874016, 170.2834645669);--color-on-dark-5: #6B7F95;--color-on-dark-6: rgb(85.5511811024, 101.6929133858, 119.4488188976);--color-on-dark-7: rgb(64.2677165354, 76.3937007874, 89.7322834646);--color-on-dark-8: rgb(42.9842519685, 51.094488189, 60.0157480315);--color-on-dark-9: rgb(21.7007874016, 25.7952755906, 30.2992125984)}*,*::before,*::after{box-sizing:border-box}html{text-size-adjust:none}body{min-block-size:100vh;inline-size:min(100%,100vw);margin:0;padding:0}:target{scroll-margin-block:5ex}:focus,:focus-visible{scroll-margin-bottom:10vh}:is(h1,h2,h3,h4,h5,h6){margin-block-start:0;margin-block-end:.65em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}:is(p,figure,blockquote,ul,dl,table){margin-block:0}:is(p,figure,blockquote,ul,dl,table):not(:last-child){margin-block-end:1rem}a{text-decoration-skip-ink:auto}:is(input,button,textarea,select){font-family:inherit;font-size:inherit;line-height:1}textarea:not([rows]){min-block-size:10em}ul[role=list],ol[role=list]{list-style:none;margin:0;padding:0}img,picture,svg{display:block;block-size:auto;max-inline-size:100%}svg{pointer-events:none;fill:currentColor}:root{--fontSize: 1rem;--lineHeight: 1.4;--fontFamily: SUSE, sans-serif;--heading-color: var(--color-primary);--heading-fontWeight: 800;--heading-lineHeight: 1.15;--heading-h6-fontSize: 1.25rem;--heading-h5-fontSize: 1.5625rem;--heading-h4-fontSize: 1.953125rem;--heading-h3-fontSize: 2.44140625rem;--heading-h2-fontSize: 3.0517578125rem;--heading-h1-fontSize: 3.8146972656rem}body{font-size:var(--fontSize);font-weight:var(--fontWeight);line-height:var(--lineHeight);font-family:var(--fontFamily)}:is(h1,h2,h3,h4,h5,h6){font-weight:var(--heading-fontWeight);line-height:var(--heading-lineHeight)}h6{font-size:var(--heading-h6-fontSize)}h5{font-size:var(--heading-h5-fontSize)}h4{font-size:var(--heading-h4-fontSize)}h3{font-size:var(--heading-h3-fontSize)}h2{font-size:var(--heading-h2-fontSize)}h1{font-size:var(--heading-h1-fontSize)}.visually-hidden{clip-path:inset(50%);overflow:hidden;position:absolute;block-size:1px;inline-size:1px;border:0;margin:0;white-space:nowrap}:root{--body-backgrouncColor: var(--color-light);--body-color: var(--color-dark)}body{display:grid;grid-template-rows:auto 1fr auto;background-color:var(--body-backgrouncColor);color:var(--body-color)}.wrapper{display:grid;align-content:start;justify-items:start;grid-template-columns:[full-start] minmax(2rem, 1fr) [wide-start] minmax(0, 1fr) [content-start] minmax(0, 960px) [content-end] minmax(0, 1fr) [wide-end] minmax(2rem, 1fr) [full-end];padding-block:var(--wrapper-paddingBlock, 2rem)}.container{grid-column:var(--container-gridColumn, content);inline-size:100%;padding-block:var(--container-paddingBlock, 1rem)}.pokemon-container{--container-gridColumn: wide}.pokemon-loading{display:grid;justify-items:center}.pokemon-loading svg{animation-name:spin;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.pokemon-loading p{font-size:var(--heading-h3-fontSize)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon{aspect-ratio:1;inline-size:2rem}.icon-star{color:var(--icon-star-color, var(--color-highlight))}.header{background-color:var(--header-backgroundColor, var(--color-primary));color:var(--header-Color, var(--color-secondary))}.main{--container-paddingBlock: 2rem}.main .intro{font-size:var(--heading-h3-fontSize)}.footer{background-color:var(--footer-backgroundColor, var(--color-dark));color:var(--footer-Color, var(--color-light))}.footer a{--link-color: var(--footer-linkColor, var(--color-accent));--link-weight: var(--footer-linkWeight, 400);--link-color-hover: var(--color-highlight)}:is(img,svg){aspect-ratio:var(--image-aspectRatio, 16/9);object-fit:var(--image-objectFit, cover)}dl div{display:flex;gap:.5em}dl dt{font-weight:600}dl dt,dl dd{margin:0}a{transition:all .3s ease;color:var(--link-color, var(--color-on-accent));font-weight:var(--link-weight, 700);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:var(--link-line, 0.125em)}a:hover{color:var(--link-color-hover, var(--color-on-highlight))}a:focus{outline:.125em solid currentColor;outline-offset:.125em;border-radius:.125em;text-decoration:none}.cta{display:flex;flex-wrap:nowrap;gap:.5em;align-items:center}.button-list{margin-block-end:1rem}.button{--button-backgroundColor: var(--color-primary);--button-color: var(--color-on-primary);--button-backgroundColor-focus: var(--button-color);--button-color-focus: var(--button-backgroundColor);--button-backgroundColor-hover: var(--button-color);--button-color-hover: var(--button-backgroundColor);transition:all .3s ease;display:inline-block;padding-block:.25em;padding-inline:.5em;outline:0;border-radius:.25em;border:0;background-color:var(--button-backgroundColor);color:var(--button-color);font-weight:var(--button-fontWeight, 500);text-decoration:none;text-transform:uppercase}.button:active{box-shadow:0 0 0 .125em var(--button-color-focus),0 0 0 .25em var(--button-backgroundColor-focus)}.button:focus-visible{box-shadow:0 0 0 .125em var(--button-color-focus),0 0 0 .25em var(--button-backgroundColor-focus);background-color:var(--button-backgroundColor-focus);color:var(--button-color-focus)}.button:hover{background-color:var(--button-color);color:var(--button-backgroundColor)}.button-secondary{--button-backgroundColor: var(--color-secondary);--button-color: var(--color-on-secondary)}.button-accent{--button-backgroundColor: var(--color-accent);--button-color: var(--color-on-accent)}.button-highlight{--button-backgroundColor: var(--color-highlight);--button-color: var(--color-on-highlight)}.button-favorite{--button-backgroundColor: var(--color-on-dark-1);--button-color: var(--color-primary);display:flex;flex-wrap:nowrap;align-items:center;gap:.5em}.button-favorite:active{--button-backgroundColor: var(--color-on-dark-3)}.button-favorite.favorited{--button-backgroundColor: var(--color-highlight-1);--button-color: var(--color-on-highlight);box-shadow:0 0 0 .125em var(--color-highlight),0 0 0 .25em var(--color-highlight-1)}.button-favorite svg{aspect-ratio:1;inline-size:2em}.card{--card-padding: 1.25rem;display:flex;flex-direction:var(--card-flexDirection, row);flex-wrap:wrap;gap:1rem;align-items:var(--card-flexAlignItems, start);justify-items:var(--card-flexJustifyItems, start);padding:var(--card-padding);border:.175rem solid var(--card-borderColor, var(--color-primary));border-radius:.5rem;background-color:var(--card-backgroundColor, var(--color-on-primary))}.card.card-end{--card-flexDirection: row-reverse}.card .card-image{flex-grow:1}.card .card-content{flex-basis:0;flex-grow:999;min-inline-size:50%}:not(.card-grid)>.card{max-inline-size:400px}.card-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit, minmax(min(var(--cardGrid-cardSize, 280px), 100%), 1fr));padding-block:var(--cardGrid-paddingBlock);padding-inline:var(--cardGrid-paddingInline);background-color:var(--cardGrid-backgroundColor)}.pokemon-card{--card-flexAlignItems: end;--card-borderColor: var(--color-accent);--card-backgroundColor: var(--color-accent-1);position:relative}.pokemon-card .button-favorite{position:absolute;inset:var(--card-padding) var(--card-padding) auto auto}.pokemon-card .card-image{--image-aspectRatio: 1}.pokemon-card .card-content h3{font-size:var(--card-heading-h3-fontSize, var(--heading-h5-fontSize));text-transform:capitalize}.pokemon-card .card-content h4{font-size:var(--card-heading-h4-fontSize, var(--heading-h6-fontSize))}.pokemon-favorite{--card-borderColor: var(--color-secondary-7);--card-backgroundColor: var(--color-secondary-2)}.pokemon-card-grid{--cardGrid-cardSize: 400px}.site-title{font-size:var(--header-title-fontSize, var(--heading-h3-fontSize))}