@charset "UTF-8";
html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; }

body { --s-design-max: 1920; --s-design-min: 320; --content-max-width: 1400px; --text: #16161D; --fv-calc: (100vw - var(--s-design-min) * 1px) / (var(--s-design-max) - var(--s-design-min)); --s-n110-n86: clamp(-110px, calc(-110px + 24 * var(--fv-calc)), -86px); --s-n105-n118: clamp(-118px, calc(-105px + -13 * var(--fv-calc)), -105px); --s-n10-n26: clamp(-26px, calc(-10px + -16 * var(--fv-calc)), -10px); --s-n10-n13: clamp(-13px, calc(-10px + -3 * var(--fv-calc)), -10px); --s-0-22: clamp(0px, calc(0px + 22 * var(--fv-calc)), 22px); --s-0-50vw: clamp(0vw, calc(0vw + 50 * var(--fv-calc)), 50vw); --s-0-56: clamp(0px, calc(0px + 56 * var(--fv-calc)), 56px); --s-0-133: clamp(0px, calc(0px + 133 * var(--fv-calc)), 133px); --s-0-144: clamp(0px, calc(0px + 144 * var(--fv-calc)), 144px); --s-0-166: clamp(0px, calc(0px + 166 * var(--fv-calc)), 166px); --s-2-3: clamp(2px, calc(2px + 1 * var(--fv-calc)), 3px); --s-5-10: clamp(5px, calc(5px + 5 * var(--fv-calc)), 10px); --s-5-18: clamp(5px, calc(5px + 13 * var(--fv-calc)), 18px); --s-8-12: clamp(8px, calc(8px + 4 * var(--fv-calc)), 12px); --s-8-17: clamp(8px, calc(8px + 9 * var(--fv-calc)), 17px); --s-10-14: clamp(10px, calc(10px + 4 * var(--fv-calc)), 14px); --s-10-40: clamp(10px, calc(10px + 30 * var(--fv-calc)), 40px); --s-12-16: clamp(12px, calc(12px + 4 * var(--fv-calc)), 16px); --s-12-18: clamp(12px, calc(12px + 6 * var(--fv-calc)), 18px); --s-12-20: clamp(12px, calc(12px + 8 * var(--fv-calc)), 20px); --s-12-30: clamp(12px, calc(12px + 18 * var(--fv-calc)), 30px); --s-12-43: clamp(12px, calc(12px + 31 * var(--fv-calc)), 43px); --s-13-20: clamp(13px, calc(13px + 7 * var(--fv-calc)), 20px); --s-14-16: clamp(14px, calc(14px + 2 * var(--fv-calc)), 16px); --s-14-17: clamp(14px, calc(14px + 3 * var(--fv-calc)), 17px); --s-14-24: clamp(14px, calc(14px + 10 * var(--fv-calc)), 24px); --s-14-25: clamp(14px, calc(14px + 11 * var(--fv-calc)), 25px); --s-15-19: clamp(15px, calc(15px + 4 * var(--fv-calc)), 19px); --s-15-40: clamp(15px, calc(15px + 25 * var(--fv-calc)), 40px); --s-15-50: clamp(15px, calc(15px + 35 * var(--fv-calc)), 50px); --s-16-18: clamp(16px, calc(16px + 2 * var(--fv-calc)), 18px); --s-16-24: clamp(16px, calc(16px + 8 * var(--fv-calc)), 24px); --s-16-27: clamp(16px, calc(16px + 11 * var(--fv-calc)), 27px); --s-16-28: clamp(16px, calc(16px + 12 * var(--fv-calc)), 28px); --s-16-30: clamp(16px, calc(16px + 14 * var(--fv-calc)), 30px); --s-17-20: clamp(17px, calc(17px + 3 * var(--fv-calc)), 20px); --s-17-30: clamp(17px, calc(17px + 13 * var(--fv-calc)), 30px); --s-18-24: clamp(18px, calc(18px + 6 * var(--fv-calc)), 24px); --s-18-29: clamp(18px, calc(18px + 11 * var(--fv-calc)), 29px); --s-18-32: clamp(18px, calc(18px + 14 * var(--fv-calc)), 32px); --s-18-36: clamp(18px, calc(18px + 18 * var(--fv-calc)), 36px); --s-18-42: clamp(18px, calc(18px + 24 * var(--fv-calc)), 42px); --s-19-50: clamp(19px, calc(19px + 31 * var(--fv-calc)), 50px); --s-20-25: clamp(20px, calc(20px + 5 * var(--fv-calc)), 25px); --s-20-36: clamp(20px, calc(20px + 16 * var(--fv-calc)), 36px); --s-20-40: clamp(20px, calc(20px + 20 * var(--fv-calc)), 40px); --s-20-50: clamp(20px, calc(20px + 30 * var(--fv-calc)), 50px); --s-20-60: clamp(20px, calc(20px + 40 * var(--fv-calc)), 60px); --s-20-66: clamp(20px, calc(20px + 46 * var(--fv-calc)), 66px); --s-20-70: clamp(20px, calc(20px + 50 * var(--fv-calc)), 70px); --s-20-74: clamp(20px, calc(20px + 54 * var(--fv-calc)), 74px); --s-20-80: clamp(20px, calc(20px + 60 * var(--fv-calc)), 80px); --s-22-30: clamp(22px, calc(22px + 8 * var(--fv-calc)), 30px); --s-22-43: clamp(22px, calc(22px + 21 * var(--fv-calc)), 43px); --s-23-46: clamp(23px, calc(23px + 23 * var(--fv-calc)), 46px); --s-23-50: clamp(23px, calc(23px + 27 * var(--fv-calc)), 50px); --s-23-60: clamp(23px, calc(23px + 37 * var(--fv-calc)), 60px); --s-24-30: clamp(24px, calc(24px + 6 * var(--fv-calc)), 30px); --s-24-32: clamp(24px, calc(24px + 8 * var(--fv-calc)), 32px); --s-24-40: clamp(24px, calc(24px + 16 * var(--fv-calc)), 40px); --s-25-26: clamp(25px, calc(25px + 1 * var(--fv-calc)), 26px); --s-25-30: clamp(25px, calc(25px + 5 * var(--fv-calc)), 30px); --s-25-50: clamp(25px, calc(25px + 25 * var(--fv-calc)), 50px); --s-25-64: clamp(25px, calc(25px + 39 * var(--fv-calc)), 64px); --s-26-88: clamp(26px, calc(26px + 62 * var(--fv-calc)), 88px); --s-27-48: clamp(27px, calc(27px + 21 * var(--fv-calc)), 48px); --s-28-48: clamp(28px, calc(28px + 20 * var(--fv-calc)), 48px); --s-28-70: clamp(28px, calc(28px + 42 * var(--fv-calc)), 70px); --s-28-100: clamp(28px, calc(28px + 72 * var(--fv-calc)), 100px); --s-30-42: clamp(30px, calc(30px + 12 * var(--fv-calc)), 42px); --s-30-70: clamp(30px, calc(30px + 40 * var(--fv-calc)), 70px); --s-30-100: clamp(30px, calc(30px + 70 * var(--fv-calc)), 100px); --s-31-62: clamp(31px, calc(31px + 31 * var(--fv-calc)), 62px); --s-32-48: clamp(32px, calc(32px + 16 * var(--fv-calc)), 48px); --s-32-64: clamp(32px, calc(32px + 32 * var(--fv-calc)), 64px); --s-32-73: clamp(32px, calc(32px + 41 * var(--fv-calc)), 73px); --s-32-133: clamp(32px, calc(32px + 101 * var(--fv-calc)), 133px); --s-35-100: clamp(35px, calc(35px + 65 * var(--fv-calc)), 100px); --s-36-15: clamp(15px, calc(36px + -21 * var(--fv-calc)), 36px); --s-36-42: clamp(36px, calc(36px + 6 * var(--fv-calc)), 42px); --s-36-63: clamp(36px, calc(36px + 27 * var(--fv-calc)), 63px); --s-37-88: clamp(37px, calc(37px + 51 * var(--fv-calc)), 88px); --s-38-143: clamp(38px, calc(38px + 105 * var(--fv-calc)), 143px); --s-40-60: clamp(40px, calc(40px + 20 * var(--fv-calc)), 60px); --s-40-64: clamp(40px, calc(40px + 24 * var(--fv-calc)), 64px); --s-40-80: clamp(40px, calc(40px + 40 * var(--fv-calc)), 80px); --s-40-84: clamp(40px, calc(40px + 44 * var(--fv-calc)), 84px); --s-40-100: clamp(40px, calc(40px + 60 * var(--fv-calc)), 100px); --s-40-120: clamp(40px, calc(40px + 80 * var(--fv-calc)), 120px); --s-45-72: clamp(45px, calc(45px + 27 * var(--fv-calc)), 72px); --s-48-160: clamp(48px, calc(48px + 112 * var(--fv-calc)), 160px); --s-50-70: clamp(50px, calc(50px + 20 * var(--fv-calc)), 70px); --s-50-80: clamp(50px, calc(50px + 30 * var(--fv-calc)), 80px); --s-50-100: clamp(50px, calc(50px + 50 * var(--fv-calc)), 100px); --s-50-133: clamp(50px, calc(50px + 83 * var(--fv-calc)), 133px); --s-50-160: clamp(50px, calc(50px + 110 * var(--fv-calc)), 160px); --s-56-80: clamp(56px, calc(56px + 24 * var(--fv-calc)), 80px); --s-60-144: clamp(60px, calc(60px + 84 * var(--fv-calc)), 144px); --s-60-226: clamp(60px, calc(60px + 166 * var(--fv-calc)), 226px); --s-70-150: clamp(70px, calc(70px + 80 * var(--fv-calc)), 150px); --s-78-292: clamp(78px, calc(78px + 214 * var(--fv-calc)), 292px); --s-85-120: clamp(85px, calc(85px + 35 * var(--fv-calc)), 120px); --s-88-120: clamp(88px, calc(88px + 32 * var(--fv-calc)), 120px); --s-90-140: clamp(90px, calc(90px + 50 * var(--fv-calc)), 140px); --s-100-166: clamp(100px, calc(100px + 66 * var(--fv-calc)), 166px); --s-100-170: clamp(100px, calc(100px + 70 * var(--fv-calc)), 170px); --s-100-200: clamp(100px, calc(100px + 100 * var(--fv-calc)), 200px); --s-100-210: clamp(100px, calc(100px + 110 * var(--fv-calc)), 210px); --s-120-150: clamp(120px, calc(120px + 30 * var(--fv-calc)), 150px); --s-120-180: clamp(120px, calc(120px + 60 * var(--fv-calc)), 180px); --s-120-200: clamp(120px, calc(120px + 80 * var(--fv-calc)), 200px); --s-128-267: clamp(128px, calc(128px + 139 * var(--fv-calc)), 267px); --s-132-200: clamp(132px, calc(132px + 68 * var(--fv-calc)), 200px); --s-144-225: clamp(144px, calc(144px + 81 * var(--fv-calc)), 225px); --s-150-245: clamp(150px, calc(150px + 95 * var(--fv-calc)), 245px); --s-181-500: clamp(181px, calc(181px + 319 * var(--fv-calc)), 500px); --s-200-350: clamp(200px, calc(200px + 150 * var(--fv-calc)), 350px); --s-200-400: clamp(200px, calc(200px + 200 * var(--fv-calc)), 400px); --s-330-460: clamp(330px, calc(330px + 130 * var(--fv-calc)), 460px); --s-400-500: clamp(400px, calc(400px + 100 * var(--fv-calc)), 500px); --s-600-1000: clamp(600px, calc(600px + 400 * var(--fv-calc)), 1000px); --s-10-18at900: clamp(10px, calc(10px + 8 * (100vw - var(--s-design-min) * 1px) / (900 - var(--s-design-min))), 18px); --s-80at200-170at844: clamp(80px, calc(80px + 90 * (100vw - 200px) / 644), 170px); --s-46at300-80at900: clamp(46px, calc(46px + 34 * (100vw - 300px) / 600), 80px); --s-80at370-100at900: clamp(80px, calc(80px + 20 * (100vw - 370px) / 530), 100px); --s-24at375-50at1150: clamp(24px, calc(24px + 26 * (100vw - 375px) / 775), 50px); --s-50at500-100at800: clamp(50px, calc(50px + 50 * (100vw - 500px) / 300), 100px); --s-85at500-170at800: clamp(85px, calc(85px + 85 * (100vw - 500px) / 300), 170px); --s-20at900-25at1150: clamp(20px, calc(20px + 5 * (100vw - 900px) / 250), 25px); --s-50at900-63at1150: clamp(50px, calc(50px + 13 * (100vw - 900px) / 250), 63px); --s-88at900-160at1600: clamp(88px, calc(88px + 72 * (100vw - 900px) / 700), 160px); --s-132at980-60at992: clamp(60px, calc(132px + -72 * (100vw - 980px) / 12), 132px); --s-200at1100-500: clamp(200px, calc(200px + 300 * (100vw - 1100px) / (var(--s-design-max) - 1100)), 500px); }

body.qa [data-bookshop-renderer] > div > p { margin: 0 !important; background-color: #8c8c8c; color: #fff; }

body.qa [data-bookshop-renderer] > div > p + div { padding: 0 !important; }

body.qa::after { content: ""; position: fixed; top: 0; left: 50%; transform: translateX(-50%); height: 100vh; width: var(--page-max-width); max-width: var(--percent-max-width); pointer-events: none; border-left: dashed 1px red; border-right: dashed 1px red; z-index: 999999994; }

body.qa::before { content: ""; position: fixed; top: 0; left: 50%; transform: translateX(-50%); height: 100vh; width: var(--content-max-width); max-width: var(--percent-max-width); pointer-events: none; border-left: dotted 1px green; border-right: dotted 1px green; z-index: 999999994; }

.c-header { height: 150px; width: 100vw; position: relative; z-index: 100; }

.c-header--hover-underline { display: inline-block; position: relative; padding-bottom: 10px; transform: translateY(6px); }

.c-header--hover-underline::before { content: ""; position: absolute; width: 0%; height: 100%; border-bottom: 4px solid currentColor; transition: width 0.4s; }

.c-header--hover-underline:hover::before { width: 100%; }

.c-header-wrapper { max-width: var(--page-max-width); width: var(--percent-max-width); margin: 0 auto; height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: end; }

.c-header-wrapper > * { margin-bottom: 38px; }

.c-header__logo { width: var(--s-120-180); }

.c-header__aside-nav { justify-self: end; display: grid; grid-template-rows: repeat 2, 1fr; gap: 10px; }

.c-header__aside-nav__mobile-button { justify-self: end; height: 40px; width: 40px; background: transparent; border: none; }

.c-header__aside-nav__mobile-button::before, .c-header__aside-nav__mobile-button::after { content: ""; position: absolute; height: 3px; width: 24px; background: var(--twitch-white); transition: transform 0.3s; }

.c-header__aside-nav__mobile-button::before { transform: translate(-12px, 4px); }

.c-header__aside-nav__mobile-button::after { transform: translate(-12px, -5px); }

.c-header__aside-nav__mobile-button:hover { cursor: pointer; }

.c-header__aside-nav__mobile-button.is-open::before { transform: translateX(-14px) rotate(45deg); }

.c-header__aside-nav__mobile-button.is-open::after { transform: translateX(-14px) rotate(-45deg); }

.c-header__aside-nav__list { padding: 0; margin: 0; display: flex; list-style: none; font-size: var(--s-13-20); font-weight: 700; }

.c-header__aside-nav__list li:not(:first-child) { border-left: solid 2px #333; }

.c-header__aside-nav__list li a, .c-header__aside-nav__list li button { padding: 0 var(--s-14-17); color: var(--twitch-white); }

.c-header__aside-nav__list li a:hover, .c-header__aside-nav__list li button:hover { color: var(--link); }

.c-header__aside-nav__list li a:hover > svg, .c-header__aside-nav__list li button:hover > svg { color: var(--link); }

.c-header__aside-nav__list li a:first-child, .c-header__aside-nav__list li button:first-child { padding: 0 var(--s-14-25) 0 var(--s-8-17); }

.c-header__aside-nav__list svg { width: var(--s-15-19); color: var(--twitch-white); margin-bottom: -2px; }

.c-header__aside-nav__list button { background: transparent; border: none; }

.c-header__nav { display: none; }

.c-header__mobile-nav { position: fixed; padding-left: var(--s-24at375-50at1150); padding-top: 150px; background: var(--background); top: 0; opacity: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

.c-header__mobile-nav__list { overflow-y: scroll; list-style: none; transition: opacity 0.1s; padding-left: 0; }

.c-header__mobile-nav__item { font-size: var(--s-50at900-63at1150); font-weight: 600; margin: var(--s-20at900-25at1150) 0; }

.c-header__mobile-nav__item a { color: white; }

.c-header__mobile-nav.is-open { transition: opacity 0.3s; opacity: 1; pointer-events: all; }

@media screen and (min-width: 985px) { .c-header__aside-nav__mobile-button { display: none; } .c-header__nav { display: grid; align-items: end; } .c-header__nav__list { display: flex; list-style: none; align-self: flex-end; margin: 0; } .c-header__nav__item { display: grid; align-items: end; } .c-header__nav__item:not(:first-child) { border-left: 2px solid #333; } .c-header__nav__item a { color: var(--twitch-white); font-weight: 700; padding: 0 20px; } .c-header__nav__item a:hover { color: var(--link); } .c-header__mobile-nav { opacity: 0 !important; } }

.c-footer { margin: 0 auto; max-width: var(--page-max-width); display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 3fr min-content min-content; grid-gap: 20px; grid-template-areas: "logo" "sitemap" "general" "copyright"; }

.c-footer__footer-wrapper { margin-top: var(--s-78-292); background: var(--background); }

.c-footer__logo-icon { width: var(--s-27-48); grid-area: logo; margin-left: 20px; }

.c-footer__logo-icon .cls-1 { fill: var(--text); }

.c-footer__sitemap-nav { grid-area: sitemap; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--s-85-120), 1fr)); grid-gap: var(--s-10-40); margin: 0 0 0 20px; }

.c-footer__sitemap-nav-list-items { padding: 0; }

.c-footer__sitemap-nav-list-heading { font-weight: 600; font-size: var(--s-10-14); }

.c-footer__sitemap-nav-list-item { margin: 0; font-weight: 600; font-size: var(--s-14-24); list-style-type: none; line-height: var(--s-20-36); }

.c-footer__sitemap-nav-list-item a { color: var(--text); }

.c-footer__sitemap-nav-list-item a:hover { color: var(--text-alt); }

.c-footer__general { grid-area: general; align-self: center; }

.c-footer__general-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--s-80at370-100at900), 1fr)); grid-template-rows: repeat(4, 1fr); margin: 20px 100px 0 20px; padding-left: 0; }

.c-footer__general-item { font-size: 10px; list-style-type: none; font-weight: 600; line-height: var(--s-17-20); margin: 1px 0; }

.c-footer__general-item-link { color: var(--text); }

.c-footer__general-item-link:hover { color: var(--text-alt); }

.c-footer__copyright { grid-area: copyright; color: var(--text); margin: 0 40px 0 20px; }

@media screen and (min-width: 1000px) { .c-footer__copyright { justify-self: end; position: relative; transform: translateY(var(--s-n105-n118)); } }

@media screen and (min-width: 706px) { .c-footer { grid-template-columns: 50px 1fr var(--s-600-1000); grid-template-rows: repeat(3, auto); grid-gap: 30px; grid-template-areas: "logo         .           sitemap" "general      general     general" "copyright    copyright   copyright"; } }

@media all, bookshop { :where(.u-arrow-↗, .u-arrow-→, .u-arrow-↘, .u-arrow-↓, .u-arrow-ne, .u-arrow-e, .u-arrow-se, .u-arrow-s, .u-arrow-auto, .u-arrow-parent-auto), :where(.u-arrow-↙, .u-arrow-←, .u-arrow-↖, .u-arrow-↑, .u-arrow-sw, .u-arrow-w, .u-arrow-nw, .u-arrow-n)::before, :where(.u-arrow-↗, .u-arrow-→, .u-arrow-↘, .u-arrow-↓, .u-arrow-ne, .u-arrow-e, .u-arrow-se, .u-arrow-s, .u-arrow-auto, .u-arrow-parent-auto)::after { --line-height: 1.6ex; --arrow-x-shift: 0ex; --gap-from-text: .4ch; --gap-past-text: .1ch; --roobert-arrow-height: .55ex; --initial-clip-path: inset(var(--roobert-arrow-height) 0 0 0); --animation-out-speed: .1s; --animation-in-speed: .2s; --animation: arrow--out var(--animation-out-speed) ease-in 1 forwards, arrow--in var(--animation-in-speed) ease-in var(--animation-out-speed) 1 forwards; } :where(.u-arrow-↙, .u-arrow-←, .u-arrow-↖, .u-arrow-↑, .u-arrow-sw, .u-arrow-w, .u-arrow-nw, .u-arrow-n)::before, :where(.u-arrow-↗, .u-arrow-→, .u-arrow-↘, .u-arrow-↓, .u-arrow-ne, .u-arrow-e, .u-arrow-se, .u-arrow-s, .u-arrow-auto, .u-arrow-parent-auto)::after { clip-path: var(--initial-clip-path); -webkit-clip-path: var(--initial-clip-path); display: inline-block; line-height: var(--line-height); width: var(--arrow-width); font-family: Roobert; transform: translate3d(var(--arrow-x-shift), 0, 0); } :where(.u-arrow-↗, .u-arrow-→, .u-arrow-↘, .u-arrow-↓, .u-arrow-ne, .u-arrow-e, .u-arrow-se, .u-arrow-s, .u-arrow-auto, .u-arrow-parent-auto) { display: inline-block; padding-right: calc(var(--gap-from-text) + var(--arrow-width)); } :where(.u-arrow-↗, .u-arrow-→, .u-arrow-↘, .u-arrow-↓, .u-arrow-ne, .u-arrow-e, .u-arrow-se, .u-arrow-s, .u-arrow-auto, .u-arrow-parent-auto)::after { --arrow-x-shift: calc(var(--gap-from-text) + var(--arrow-width)); margin-left: calc(var(--arrow-width) * -1 - 1px); margin-right: var(--gap-past-text); } :where(.u-arrow-↗, .u-arrow-→, .u-arrow-↘, .u-arrow-↓, .u-arrow-ne, .u-arrow-e, .u-arrow-se, .u-arrow-s, .u-arrow-auto, .u-arrow-parent-auto):hover::after { animation: var(--animation); } a:hover .u-arrow-parent-auto::after { animation: var(--animation); } :where(.u-arrow-↙, .u-arrow-←, .u-arrow-↖, .u-arrow-↑, .u-arrow-sw, .u-arrow-w, .u-arrow-nw, .u-arrow-n) { display: inline-block; } :where(.u-arrow-↙, .u-arrow-←, .u-arrow-↖, .u-arrow-↑, .u-arrow-sw, .u-arrow-w, .u-arrow-nw, .u-arrow-n)::before { margin-left: var(--gap-past-text); margin-right: var(--gap-from-text); } :where(.u-arrow-↙, .u-arrow-←, .u-arrow-↖, .u-arrow-↑, .u-arrow-sw, .u-arrow-w, .u-arrow-nw, .u-arrow-n):hover::before { animation: var(--animation); } @keyframes arrow--out { from { transform: translate3d(var(--arrow-x-shift), 0, 0);
      clip-path: var(--initial-clip-path);
      -webkit-clip-path: var(--initial-clip-path); }
    to { transform: translate3d(calc(var(--arrow-x-target) + var(--arrow-x-shift)), var(--arrow-y-target), 0);
      clip-path: inset(calc(var(--arrow-y-target) * -1 + var(--roobert-arrow-height)) var(--arrow-x-target) var(--arrow-y-target) calc(var(--arrow-x-target) * -1));
      -webkit-clip-path: inset(calc(var(--arrow-y-target) * -1 + var(--roobert-arrow-height)) var(--arrow-x-target) var(--arrow-y-target) calc(var(--arrow-x-target) * -1)); } } @keyframes arrow--in { from { transform: translate3d(calc(var(--arrow-x-target) * -1 + var(--arrow-x-shift)), calc(var(--arrow-y-target) * -1), 0);
      clip-path: inset(calc(var(--arrow-y-target) + var(--roobert-arrow-height)) calc(var(--arrow-x-target) * -1) calc(var(--arrow-y-target) * -1) var(--arrow-x-target));
      -webkit-clip-path: inset(calc(var(--arrow-y-target) + var(--roobert-arrow-height)) calc(var(--arrow-x-target) * -1) calc(var(--arrow-y-target) * -1) var(--arrow-x-target)); }
    to { transform: translate3d(var(--arrow-x-shift), 0, 0);
      clip-path: var(--initial-clip-path);
      -webkit-clip-path: var(--initial-clip-path); } } .u-arrow-↗, .u-arrow-ne, .u-arrow-auto:not([href^="#"]), a:not([href^="#"]) .u-arrow-parent-auto { --arrow-width: 1.05ex; } .u-arrow-↗::after, .u-arrow-ne::after, .u-arrow-auto:not([href^="#"])::after, a:not([href^="#"]) .u-arrow-parent-auto::after { content: "↗"; --arrow-width: 1.05ex; --arrow-x-target: 1.05ex; --arrow-y-target: -1.05ex; } .u-arrow-→, .u-arrow-e { --arrow-width: 1.4ex; } .u-arrow-→::after, .u-arrow-e::after { content: "→"; --roobert-arrow-height: .49ex; --arrow-width: 1.4ex; --arrow-x-target: 1.4ex; --arrow-y-target: 0ex; } .u-arrow-↘, .u-arrow-se { --arrow-width: 1.05ex; } .u-arrow-↘::after, .u-arrow-se::after { content: "↘"; --arrow-width: 1.05ex; --arrow-x-target: 1.05ex; --arrow-y-target: 1.05ex; } .u-arrow-↓, .u-arrow-s, .u-arrow-auto[href^="#"], a[href^="#"] .u-arrow-parent-auto { --arrow-width: 1.2ex; } .u-arrow-↓::after, .u-arrow-s::after, .u-arrow-auto[href^="#"]::after, a[href^="#"] .u-arrow-parent-auto::after { content: "↓"; --roobert-arrow-height: .27ex; --arrow-width: 1.2ex; --arrow-x-target: 0ex; --arrow-y-target: 1.3ex; } .u-arrow-↙, .u-arrow-sw { --arrow-width: 1.1ex; } .u-arrow-↙::before, .u-arrow-sw::before { content: "↙"; --arrow-width: 1.1ex; --arrow-x-target: -1.1ex; --arrow-y-target: 1.1ex; } .u-arrow-←, .u-arrow-w { --arrow-width: 1.4ex; } .u-arrow-←::before, .u-arrow-w::before { content: "←"; --roobert-arrow-height: .49ex; --arrow-width: 1.4ex; --arrow-x-target: -1.4ex; --arrow-y-target: 0ex; } .u-arrow-↖, .u-arrow-nw { --arrow-width: 1.1ex; } .u-arrow-↖::before, .u-arrow-nw::before { content: "↖"; --arrow-width: 1.1ex; --arrow-x-target: -1.1ex; --arrow-y-target: -1.1ex; } .u-arrow-↑, .u-arrow-n { --arrow-width: 1.2ex; } .u-arrow-↑::before, .u-arrow-n::before { content: "↑"; --roobert-arrow-height: .27ex; --arrow-width: 1.2ex; --arrow-x-target: 0ex; --arrow-y-target: -1.3ex; } @font-face { font-family: 'roobert'; src: url("/assets/fonts/roobert/roobert-light.otf") format("opentype"); font-weight: 300; font-style: normal; font-stretch: normal; } @font-face { font-family: 'roobert'; src: url("/assets/fonts/roobert/roobert-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-stretch: normal; } @font-face { font-family: 'roobert'; src: url("/assets/fonts/roobert/roobert-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-stretch: normal; } @font-face { font-family: 'roobert'; src: url("/assets/fonts/roobert/roobert-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-stretch: normal; } @font-face { font-family: 'roobert'; src: url("/assets/fonts/roobert/roobert-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-stretch: normal; } @font-face { font-family: 'roobert'; src: url("/assets/fonts/roobert/roobert-heavy.otf") format("opentype"); font-weight: 900; font-style: normal; font-stretch: normal; } * { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; box-sizing: border-box; } html, body { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } body { font-family: var(--twitch-font); height: 100%; margin: 0; min-height: 100vh; overflow-x: hidden; font-size: var(--body-size); font-weight: var(--body-weight); } a { text-decoration: none; color: var(--link); } a:hover { color: var(--link-hover); } input { word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; -webkit-writing-mode: horizontal-tb !important; font-family: var(--twitch-font); } h2 { font-size: var(--s-45-72); font-weight: 700; line-height: 120%; } h3 { font-size: var(--s-36-42); font-weight: 600; line-height: 120%; } h4 { font-size: var(--s-18-24); font-weight: 400; line-height: 120%; } body { background-color: var(--twitch-ice); } .body-wrapper { position: relative; margin: 0 auto; width: 100%; max-width: var(--s-design-max); } .component { position: relative; margin: 0 auto; padding: var(--component-top-bottom-padding); padding-left: var(--component-left-right-padding); padding-right: var(--component-left-right-padding); max-width: 1600px; box-sizing: content-box; overflow: visible; } .component + .component { padding-top: 0; } .component:before, .component:after { position: absolute; left: -100%; content: ""; background: red; height: 100%; width: 100%; z-index: 1; display: flex; top: 0; background-color: inherit; } .component:after { left: unset; right: -100%; } [class*="theme-"], .l-theme { display: grid; background: var(--background); color: var(--text); } .inner-theme { display: block; } .theme-purple { --background: var(--twitch-purple); --text: var(--twitch-white); --text-alt: var(--twitch-black-ops); --link: var(--twitch-white); --link-hover: var(--twitch-black-ops); --button: var(--twitch-ice); --button-alt: var(--light-gray); --button-hover: var(--twitch-ice); } .theme-light { --background: var(--twitch-white); --text: var(--twitch-black-ops); --text-alt: var(--twitch-purple); --link: var(--twitch-purple); --link-hover: var(--twitch-black-ops); --button: var(--twitch-purple); --button-alt: var(--light-gray); --button-hover: var(--twitch-purple); } .theme-ice { --background: var(--twitch-ice); --text: var(--twitch-black-ops); --text-alt: var(--twitch-purple); --link: var(--twitch-purple); --link-hover: var(--twitch-black-ops); --button: var(--twitch-purple); --button-alt: var(--light-gray); --button-hover: var(--twitch-purple); } .theme-dark { --background: var(--twitch-black-ops); --text: var(--twitch-ice); --text-alt: var(--twitch-purple); --link: var(--twitch-purple); --link-hover: var(--twitch-ice); --button: var(--twitch-ice); --button-alt: var(--light-gray); --button-hover: var(--twitch-ice); } .u-noverflow { overflow: initial; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } .align-to-left { text-align: left; } .align-to-center { text-align: center; } .align-to-right { text-align: right; } .justify { text-align: justify; text-justify: inter-word; } .u-loading-text { color: transparent; pointer-events: none; background-color: var(--twitch-smoke); } .u-loading-box { color: transparent; pointer-events: none; background-color: var(--twitch-smoke); } body .u-spacing-no-gap { margin-top: 0; } body .u-spacing-tiny-gap { margin-top: var(--s-20-60); } body .u-spacing-small-gap { margin-top: var(--s-40-120); } body .u-spacing-medium-gap { margin-top: var(--s-50-160); } body .u-spacing-large-gap { margin-top: var(--s-60-226); } body .body-wrapper > [class*="theme-"]:last-of-type { padding-bottom: var(--s-40-120); } :root { --s-design-max: 1600; --s-design-min: 800; --blog-max-width: 990px; --blog-content-max-width: 600px; --background: var(--twitch-white); --text: #16161d; --text-alt: var(--twitch-purple); --link: var(--twitch-purple); --link-hover: var(--twitch-black-ops); --button: var(--twitch-purple); --button-alt: var(--light-gray); --button-hover: var(--twitch-purple); --component-top-bottom-padding: 80px 0; --component-left-right-padding: var(--s-20-80); --content-max-width: 900px; --page-max-width: 1600px; --percent-max-width: 85vw; --percent-max-side: calc((100vw - var(--percent-max-width)) / 2); --right-content-width-modifier: var(--s-0-144); --radii: 4px; --video-aspect-ratio: 56.25%; --card-box-shadow: 0px 6.6501px 9.32008px rgba(125, 22, 255, 0.080725),
    0px 2.76726px 4.21381px rgba(125, 22, 255, 0.0456802); --card-box-m-shadow: 0px 6.6501px 14.32008px rgba(125, 22, 255, 0.06025),
    0px 2.76726px 7.51381px rgba(125, 22, 255, 0.0296802); --card-box-l-shadow: 0px 6.6501px 20.32008px rgba(127, 22, 255, 0.02),
    0px 2.76726px 10.21381px rgba(125, 22, 255, 0.0106802); --bezier: cubic-bezier(0.87, 0, 0.04, 1); --fv-calc: (100vw - var(--s-design-min) * 1px) / (var(--s-design-max) - var(--s-design-min)); --s-n110-n86: clamp(-110px, calc(-110px + 24 * var(--fv-calc)), -86px); --s-n105-n118: clamp(-118px, calc(-105px + -13 * var(--fv-calc)), -105px); --s-n10-n26: clamp(-26px, calc(-10px + -16 * var(--fv-calc)), -10px); --s-n10-n13: clamp(-13px, calc(-10px + -3 * var(--fv-calc)), -10px); --s-0-22: clamp(0px, calc(0px + 22 * var(--fv-calc)), 22px); --s-0-50vw: clamp(0vw, calc(0vw + 50 * var(--fv-calc)), 50vw); --s-0-56: clamp(0px, calc(0px + 56 * var(--fv-calc)), 56px); --s-0-133: clamp(0px, calc(0px + 133 * var(--fv-calc)), 133px); --s-0-144: clamp(0px, calc(0px + 144 * var(--fv-calc)), 144px); --s-0-166: clamp(0px, calc(0px + 166 * var(--fv-calc)), 166px); --s-2-3: clamp(2px, calc(2px + 1 * var(--fv-calc)), 3px); --s-5-10: clamp(5px, calc(5px + 5 * var(--fv-calc)), 10px); --s-5-18: clamp(5px, calc(5px + 13 * var(--fv-calc)), 18px); --s-8-12: clamp(8px, calc(8px + 4 * var(--fv-calc)), 12px); --s-8-17: clamp(8px, calc(8px + 9 * var(--fv-calc)), 17px); --s-10-14: clamp(10px, calc(10px + 4 * var(--fv-calc)), 14px); --s-10-40: clamp(10px, calc(10px + 30 * var(--fv-calc)), 40px); --s-12-16: clamp(12px, calc(12px + 4 * var(--fv-calc)), 16px); --s-12-18: clamp(12px, calc(12px + 6 * var(--fv-calc)), 18px); --s-12-20: clamp(12px, calc(12px + 8 * var(--fv-calc)), 20px); --s-12-30: clamp(12px, calc(12px + 18 * var(--fv-calc)), 30px); --s-12-43: clamp(12px, calc(12px + 31 * var(--fv-calc)), 43px); --s-13-20: clamp(13px, calc(13px + 7 * var(--fv-calc)), 20px); --s-14-16: clamp(14px, calc(14px + 2 * var(--fv-calc)), 16px); --s-14-17: clamp(14px, calc(14px + 3 * var(--fv-calc)), 17px); --s-14-24: clamp(14px, calc(14px + 10 * var(--fv-calc)), 24px); --s-14-25: clamp(14px, calc(14px + 11 * var(--fv-calc)), 25px); --s-15-19: clamp(15px, calc(15px + 4 * var(--fv-calc)), 19px); --s-15-40: clamp(15px, calc(15px + 25 * var(--fv-calc)), 40px); --s-15-50: clamp(15px, calc(15px + 35 * var(--fv-calc)), 50px); --s-16-18: clamp(16px, calc(16px + 2 * var(--fv-calc)), 18px); --s-16-24: clamp(16px, calc(16px + 8 * var(--fv-calc)), 24px); --s-16-27: clamp(16px, calc(16px + 11 * var(--fv-calc)), 27px); --s-16-28: clamp(16px, calc(16px + 12 * var(--fv-calc)), 28px); --s-16-30: clamp(16px, calc(16px + 14 * var(--fv-calc)), 30px); --s-17-20: clamp(17px, calc(17px + 3 * var(--fv-calc)), 20px); --s-17-30: clamp(17px, calc(17px + 13 * var(--fv-calc)), 30px); --s-18-24: clamp(18px, calc(18px + 6 * var(--fv-calc)), 24px); --s-18-29: clamp(18px, calc(18px + 11 * var(--fv-calc)), 29px); --s-18-32: clamp(18px, calc(18px + 14 * var(--fv-calc)), 32px); --s-18-36: clamp(18px, calc(18px + 18 * var(--fv-calc)), 36px); --s-18-42: clamp(18px, calc(18px + 24 * var(--fv-calc)), 42px); --s-19-50: clamp(19px, calc(19px + 31 * var(--fv-calc)), 50px); --s-20-25: clamp(20px, calc(20px + 5 * var(--fv-calc)), 25px); --s-20-36: clamp(20px, calc(20px + 16 * var(--fv-calc)), 36px); --s-20-40: clamp(20px, calc(20px + 20 * var(--fv-calc)), 40px); --s-20-50: clamp(20px, calc(20px + 30 * var(--fv-calc)), 50px); --s-20-60: clamp(20px, calc(20px + 40 * var(--fv-calc)), 60px); --s-20-66: clamp(20px, calc(20px + 46 * var(--fv-calc)), 66px); --s-20-70: clamp(20px, calc(20px + 50 * var(--fv-calc)), 70px); --s-20-74: clamp(20px, calc(20px + 54 * var(--fv-calc)), 74px); --s-20-80: clamp(20px, calc(20px + 60 * var(--fv-calc)), 80px); --s-22-30: clamp(22px, calc(22px + 8 * var(--fv-calc)), 30px); --s-22-43: clamp(22px, calc(22px + 21 * var(--fv-calc)), 43px); --s-23-46: clamp(23px, calc(23px + 23 * var(--fv-calc)), 46px); --s-23-50: clamp(23px, calc(23px + 27 * var(--fv-calc)), 50px); --s-23-60: clamp(23px, calc(23px + 37 * var(--fv-calc)), 60px); --s-24-30: clamp(24px, calc(24px + 6 * var(--fv-calc)), 30px); --s-24-32: clamp(24px, calc(24px + 8 * var(--fv-calc)), 32px); --s-24-40: clamp(24px, calc(24px + 16 * var(--fv-calc)), 40px); --s-25-26: clamp(25px, calc(25px + 1 * var(--fv-calc)), 26px); --s-25-30: clamp(25px, calc(25px + 5 * var(--fv-calc)), 30px); --s-25-50: clamp(25px, calc(25px + 25 * var(--fv-calc)), 50px); --s-25-64: clamp(25px, calc(25px + 39 * var(--fv-calc)), 64px); --s-26-88: clamp(26px, calc(26px + 62 * var(--fv-calc)), 88px); --s-27-48: clamp(27px, calc(27px + 21 * var(--fv-calc)), 48px); --s-28-48: clamp(28px, calc(28px + 20 * var(--fv-calc)), 48px); --s-28-70: clamp(28px, calc(28px + 42 * var(--fv-calc)), 70px); --s-28-100: clamp(28px, calc(28px + 72 * var(--fv-calc)), 100px); --s-30-42: clamp(30px, calc(30px + 12 * var(--fv-calc)), 42px); --s-30-70: clamp(30px, calc(30px + 40 * var(--fv-calc)), 70px); --s-30-100: clamp(30px, calc(30px + 70 * var(--fv-calc)), 100px); --s-31-62: clamp(31px, calc(31px + 31 * var(--fv-calc)), 62px); --s-32-48: clamp(32px, calc(32px + 16 * var(--fv-calc)), 48px); --s-32-64: clamp(32px, calc(32px + 32 * var(--fv-calc)), 64px); --s-32-73: clamp(32px, calc(32px + 41 * var(--fv-calc)), 73px); --s-32-133: clamp(32px, calc(32px + 101 * var(--fv-calc)), 133px); --s-35-100: clamp(35px, calc(35px + 65 * var(--fv-calc)), 100px); --s-36-15: clamp(15px, calc(36px + -21 * var(--fv-calc)), 36px); --s-36-42: clamp(36px, calc(36px + 6 * var(--fv-calc)), 42px); --s-36-63: clamp(36px, calc(36px + 27 * var(--fv-calc)), 63px); --s-37-88: clamp(37px, calc(37px + 51 * var(--fv-calc)), 88px); --s-38-143: clamp(38px, calc(38px + 105 * var(--fv-calc)), 143px); --s-40-60: clamp(40px, calc(40px + 20 * var(--fv-calc)), 60px); --s-40-64: clamp(40px, calc(40px + 24 * var(--fv-calc)), 64px); --s-40-80: clamp(40px, calc(40px + 40 * var(--fv-calc)), 80px); --s-40-84: clamp(40px, calc(40px + 44 * var(--fv-calc)), 84px); --s-40-100: clamp(40px, calc(40px + 60 * var(--fv-calc)), 100px); --s-40-120: clamp(40px, calc(40px + 80 * var(--fv-calc)), 120px); --s-45-72: clamp(45px, calc(45px + 27 * var(--fv-calc)), 72px); --s-48-160: clamp(48px, calc(48px + 112 * var(--fv-calc)), 160px); --s-50-70: clamp(50px, calc(50px + 20 * var(--fv-calc)), 70px); --s-50-80: clamp(50px, calc(50px + 30 * var(--fv-calc)), 80px); --s-50-100: clamp(50px, calc(50px + 50 * var(--fv-calc)), 100px); --s-50-133: clamp(50px, calc(50px + 83 * var(--fv-calc)), 133px); --s-50-160: clamp(50px, calc(50px + 110 * var(--fv-calc)), 160px); --s-56-80: clamp(56px, calc(56px + 24 * var(--fv-calc)), 80px); --s-60-144: clamp(60px, calc(60px + 84 * var(--fv-calc)), 144px); --s-60-226: clamp(60px, calc(60px + 166 * var(--fv-calc)), 226px); --s-70-150: clamp(70px, calc(70px + 80 * var(--fv-calc)), 150px); --s-78-292: clamp(78px, calc(78px + 214 * var(--fv-calc)), 292px); --s-85-120: clamp(85px, calc(85px + 35 * var(--fv-calc)), 120px); --s-88-120: clamp(88px, calc(88px + 32 * var(--fv-calc)), 120px); --s-90-140: clamp(90px, calc(90px + 50 * var(--fv-calc)), 140px); --s-100-166: clamp(100px, calc(100px + 66 * var(--fv-calc)), 166px); --s-100-170: clamp(100px, calc(100px + 70 * var(--fv-calc)), 170px); --s-100-200: clamp(100px, calc(100px + 100 * var(--fv-calc)), 200px); --s-100-210: clamp(100px, calc(100px + 110 * var(--fv-calc)), 210px); --s-120-150: clamp(120px, calc(120px + 30 * var(--fv-calc)), 150px); --s-120-180: clamp(120px, calc(120px + 60 * var(--fv-calc)), 180px); --s-120-200: clamp(120px, calc(120px + 80 * var(--fv-calc)), 200px); --s-128-267: clamp(128px, calc(128px + 139 * var(--fv-calc)), 267px); --s-132-200: clamp(132px, calc(132px + 68 * var(--fv-calc)), 200px); --s-144-225: clamp(144px, calc(144px + 81 * var(--fv-calc)), 225px); --s-150-245: clamp(150px, calc(150px + 95 * var(--fv-calc)), 245px); --s-181-500: clamp(181px, calc(181px + 319 * var(--fv-calc)), 500px); --s-200-350: clamp(200px, calc(200px + 150 * var(--fv-calc)), 350px); --s-200-400: clamp(200px, calc(200px + 200 * var(--fv-calc)), 400px); --s-330-460: clamp(330px, calc(330px + 130 * var(--fv-calc)), 460px); --s-400-500: clamp(400px, calc(400px + 100 * var(--fv-calc)), 500px); --s-600-1000: clamp(600px, calc(600px + 400 * var(--fv-calc)), 1000px); --s-10-18at900: clamp(10px, calc(10px + 8 * (100vw - var(--s-design-min) * 1px) / (900 - var(--s-design-min))), 18px); --s-80at200-170at844: clamp(80px, calc(80px + 90 * (100vw - 200px) / 644), 170px); --s-46at300-80at900: clamp(46px, calc(46px + 34 * (100vw - 300px) / 600), 80px); --s-80at370-100at900: clamp(80px, calc(80px + 20 * (100vw - 370px) / 530), 100px); --s-24at375-50at1150: clamp(24px, calc(24px + 26 * (100vw - 375px) / 775), 50px); --s-50at500-100at800: clamp(50px, calc(50px + 50 * (100vw - 500px) / 300), 100px); --s-85at500-170at800: clamp(85px, calc(85px + 85 * (100vw - 500px) / 300), 170px); --s-20at900-25at1150: clamp(20px, calc(20px + 5 * (100vw - 900px) / 250), 25px); --s-50at900-63at1150: clamp(50px, calc(50px + 13 * (100vw - 900px) / 250), 63px); --s-88at900-160at1600: clamp(88px, calc(88px + 72 * (100vw - 900px) / 700), 160px); --s-132at980-60at992: clamp(60px, calc(132px + -72 * (100vw - 980px) / 12), 132px); --s-200at1100-500: clamp(200px, calc(200px + 300 * (100vw - 1100px) / (var(--s-design-max) - 1100)), 500px); } @keyframes rise { 0% { opacity: 1;
      transform: translateY(var(--s-15-40)); }
    100% { opacity: 1;
      transform: translateY(0%); } } .d-sm-750-375 { --s-design-max: 750; --s-design-min: 375; --fv-calc: (100vw - var(--s-design-min) * 1px) / (var(--s-design-max) - var(--s-design-min)); --s-n110-n86: clamp(-110px, calc(-110px + 24 * var(--fv-calc)), -86px); --s-n105-n118: clamp(-118px, calc(-105px + -13 * var(--fv-calc)), -105px); --s-n10-n26: clamp(-26px, calc(-10px + -16 * var(--fv-calc)), -10px); --s-n10-n13: clamp(-13px, calc(-10px + -3 * var(--fv-calc)), -10px); --s-0-22: clamp(0px, calc(0px + 22 * var(--fv-calc)), 22px); --s-0-50vw: clamp(0vw, calc(0vw + 50 * var(--fv-calc)), 50vw); --s-0-56: clamp(0px, calc(0px + 56 * var(--fv-calc)), 56px); --s-0-133: clamp(0px, calc(0px + 133 * var(--fv-calc)), 133px); --s-0-144: clamp(0px, calc(0px + 144 * var(--fv-calc)), 144px); --s-0-166: clamp(0px, calc(0px + 166 * var(--fv-calc)), 166px); --s-2-3: clamp(2px, calc(2px + 1 * var(--fv-calc)), 3px); --s-5-10: clamp(5px, calc(5px + 5 * var(--fv-calc)), 10px); --s-5-18: clamp(5px, calc(5px + 13 * var(--fv-calc)), 18px); --s-8-12: clamp(8px, calc(8px + 4 * var(--fv-calc)), 12px); --s-8-17: clamp(8px, calc(8px + 9 * var(--fv-calc)), 17px); --s-10-14: clamp(10px, calc(10px + 4 * var(--fv-calc)), 14px); --s-10-40: clamp(10px, calc(10px + 30 * var(--fv-calc)), 40px); --s-12-16: clamp(12px, calc(12px + 4 * var(--fv-calc)), 16px); --s-12-18: clamp(12px, calc(12px + 6 * var(--fv-calc)), 18px); --s-12-20: clamp(12px, calc(12px + 8 * var(--fv-calc)), 20px); --s-12-30: clamp(12px, calc(12px + 18 * var(--fv-calc)), 30px); --s-12-43: clamp(12px, calc(12px + 31 * var(--fv-calc)), 43px); --s-13-20: clamp(13px, calc(13px + 7 * var(--fv-calc)), 20px); --s-14-16: clamp(14px, calc(14px + 2 * var(--fv-calc)), 16px); --s-14-17: clamp(14px, calc(14px + 3 * var(--fv-calc)), 17px); --s-14-24: clamp(14px, calc(14px + 10 * var(--fv-calc)), 24px); --s-14-25: clamp(14px, calc(14px + 11 * var(--fv-calc)), 25px); --s-15-19: clamp(15px, calc(15px + 4 * var(--fv-calc)), 19px); --s-15-40: clamp(15px, calc(15px + 25 * var(--fv-calc)), 40px); --s-15-50: clamp(15px, calc(15px + 35 * var(--fv-calc)), 50px); --s-16-18: clamp(16px, calc(16px + 2 * var(--fv-calc)), 18px); --s-16-24: clamp(16px, calc(16px + 8 * var(--fv-calc)), 24px); --s-16-27: clamp(16px, calc(16px + 11 * var(--fv-calc)), 27px); --s-16-28: clamp(16px, calc(16px + 12 * var(--fv-calc)), 28px); --s-16-30: clamp(16px, calc(16px + 14 * var(--fv-calc)), 30px); --s-17-20: clamp(17px, calc(17px + 3 * var(--fv-calc)), 20px); --s-17-30: clamp(17px, calc(17px + 13 * var(--fv-calc)), 30px); --s-18-24: clamp(18px, calc(18px + 6 * var(--fv-calc)), 24px); --s-18-29: clamp(18px, calc(18px + 11 * var(--fv-calc)), 29px); --s-18-32: clamp(18px, calc(18px + 14 * var(--fv-calc)), 32px); --s-18-36: clamp(18px, calc(18px + 18 * var(--fv-calc)), 36px); --s-18-42: clamp(18px, calc(18px + 24 * var(--fv-calc)), 42px); --s-19-50: clamp(19px, calc(19px + 31 * var(--fv-calc)), 50px); --s-20-25: clamp(20px, calc(20px + 5 * var(--fv-calc)), 25px); --s-20-36: clamp(20px, calc(20px + 16 * var(--fv-calc)), 36px); --s-20-40: clamp(20px, calc(20px + 20 * var(--fv-calc)), 40px); --s-20-50: clamp(20px, calc(20px + 30 * var(--fv-calc)), 50px); --s-20-60: clamp(20px, calc(20px + 40 * var(--fv-calc)), 60px); --s-20-66: clamp(20px, calc(20px + 46 * var(--fv-calc)), 66px); --s-20-70: clamp(20px, calc(20px + 50 * var(--fv-calc)), 70px); --s-20-74: clamp(20px, calc(20px + 54 * var(--fv-calc)), 74px); --s-20-80: clamp(20px, calc(20px + 60 * var(--fv-calc)), 80px); --s-22-30: clamp(22px, calc(22px + 8 * var(--fv-calc)), 30px); --s-22-43: clamp(22px, calc(22px + 21 * var(--fv-calc)), 43px); --s-23-46: clamp(23px, calc(23px + 23 * var(--fv-calc)), 46px); --s-23-50: clamp(23px, calc(23px + 27 * var(--fv-calc)), 50px); --s-23-60: clamp(23px, calc(23px + 37 * var(--fv-calc)), 60px); --s-24-30: clamp(24px, calc(24px + 6 * var(--fv-calc)), 30px); --s-24-32: clamp(24px, calc(24px + 8 * var(--fv-calc)), 32px); --s-24-40: clamp(24px, calc(24px + 16 * var(--fv-calc)), 40px); --s-25-26: clamp(25px, calc(25px + 1 * var(--fv-calc)), 26px); --s-25-30: clamp(25px, calc(25px + 5 * var(--fv-calc)), 30px); --s-25-50: clamp(25px, calc(25px + 25 * var(--fv-calc)), 50px); --s-25-64: clamp(25px, calc(25px + 39 * var(--fv-calc)), 64px); --s-26-88: clamp(26px, calc(26px + 62 * var(--fv-calc)), 88px); --s-27-48: clamp(27px, calc(27px + 21 * var(--fv-calc)), 48px); --s-28-48: clamp(28px, calc(28px + 20 * var(--fv-calc)), 48px); --s-28-70: clamp(28px, calc(28px + 42 * var(--fv-calc)), 70px); --s-28-100: clamp(28px, calc(28px + 72 * var(--fv-calc)), 100px); --s-30-42: clamp(30px, calc(30px + 12 * var(--fv-calc)), 42px); --s-30-70: clamp(30px, calc(30px + 40 * var(--fv-calc)), 70px); --s-30-100: clamp(30px, calc(30px + 70 * var(--fv-calc)), 100px); --s-31-62: clamp(31px, calc(31px + 31 * var(--fv-calc)), 62px); --s-32-48: clamp(32px, calc(32px + 16 * var(--fv-calc)), 48px); --s-32-64: clamp(32px, calc(32px + 32 * var(--fv-calc)), 64px); --s-32-73: clamp(32px, calc(32px + 41 * var(--fv-calc)), 73px); --s-32-133: clamp(32px, calc(32px + 101 * var(--fv-calc)), 133px); --s-35-100: clamp(35px, calc(35px + 65 * var(--fv-calc)), 100px); --s-36-15: clamp(15px, calc(36px + -21 * var(--fv-calc)), 36px); --s-36-42: clamp(36px, calc(36px + 6 * var(--fv-calc)), 42px); --s-36-63: clamp(36px, calc(36px + 27 * var(--fv-calc)), 63px); --s-37-88: clamp(37px, calc(37px + 51 * var(--fv-calc)), 88px); --s-38-143: clamp(38px, calc(38px + 105 * var(--fv-calc)), 143px); --s-40-60: clamp(40px, calc(40px + 20 * var(--fv-calc)), 60px); --s-40-64: clamp(40px, calc(40px + 24 * var(--fv-calc)), 64px); --s-40-80: clamp(40px, calc(40px + 40 * var(--fv-calc)), 80px); --s-40-84: clamp(40px, calc(40px + 44 * var(--fv-calc)), 84px); --s-40-100: clamp(40px, calc(40px + 60 * var(--fv-calc)), 100px); --s-40-120: clamp(40px, calc(40px + 80 * var(--fv-calc)), 120px); --s-45-72: clamp(45px, calc(45px + 27 * var(--fv-calc)), 72px); --s-48-160: clamp(48px, calc(48px + 112 * var(--fv-calc)), 160px); --s-50-70: clamp(50px, calc(50px + 20 * var(--fv-calc)), 70px); --s-50-80: clamp(50px, calc(50px + 30 * var(--fv-calc)), 80px); --s-50-100: clamp(50px, calc(50px + 50 * var(--fv-calc)), 100px); --s-50-133: clamp(50px, calc(50px + 83 * var(--fv-calc)), 133px); --s-50-160: clamp(50px, calc(50px + 110 * var(--fv-calc)), 160px); --s-56-80: clamp(56px, calc(56px + 24 * var(--fv-calc)), 80px); --s-60-144: clamp(60px, calc(60px + 84 * var(--fv-calc)), 144px); --s-60-226: clamp(60px, calc(60px + 166 * var(--fv-calc)), 226px); --s-70-150: clamp(70px, calc(70px + 80 * var(--fv-calc)), 150px); --s-78-292: clamp(78px, calc(78px + 214 * var(--fv-calc)), 292px); --s-85-120: clamp(85px, calc(85px + 35 * var(--fv-calc)), 120px); --s-88-120: clamp(88px, calc(88px + 32 * var(--fv-calc)), 120px); --s-90-140: clamp(90px, calc(90px + 50 * var(--fv-calc)), 140px); --s-100-166: clamp(100px, calc(100px + 66 * var(--fv-calc)), 166px); --s-100-170: clamp(100px, calc(100px + 70 * var(--fv-calc)), 170px); --s-100-200: clamp(100px, calc(100px + 100 * var(--fv-calc)), 200px); --s-100-210: clamp(100px, calc(100px + 110 * var(--fv-calc)), 210px); --s-120-150: clamp(120px, calc(120px + 30 * var(--fv-calc)), 150px); --s-120-180: clamp(120px, calc(120px + 60 * var(--fv-calc)), 180px); --s-120-200: clamp(120px, calc(120px + 80 * var(--fv-calc)), 200px); --s-128-267: clamp(128px, calc(128px + 139 * var(--fv-calc)), 267px); --s-132-200: clamp(132px, calc(132px + 68 * var(--fv-calc)), 200px); --s-144-225: clamp(144px, calc(144px + 81 * var(--fv-calc)), 225px); --s-150-245: clamp(150px, calc(150px + 95 * var(--fv-calc)), 245px); --s-181-500: clamp(181px, calc(181px + 319 * var(--fv-calc)), 500px); --s-200-350: clamp(200px, calc(200px + 150 * var(--fv-calc)), 350px); --s-200-400: clamp(200px, calc(200px + 200 * var(--fv-calc)), 400px); --s-330-460: clamp(330px, calc(330px + 130 * var(--fv-calc)), 460px); --s-400-500: clamp(400px, calc(400px + 100 * var(--fv-calc)), 500px); --s-600-1000: clamp(600px, calc(600px + 400 * var(--fv-calc)), 1000px); --s-10-18at900: clamp(10px, calc(10px + 8 * (100vw - var(--s-design-min) * 1px) / (900 - var(--s-design-min))), 18px); --s-80at200-170at844: clamp(80px, calc(80px + 90 * (100vw - 200px) / 644), 170px); --s-46at300-80at900: clamp(46px, calc(46px + 34 * (100vw - 300px) / 600), 80px); --s-80at370-100at900: clamp(80px, calc(80px + 20 * (100vw - 370px) / 530), 100px); --s-24at375-50at1150: clamp(24px, calc(24px + 26 * (100vw - 375px) / 775), 50px); --s-50at500-100at800: clamp(50px, calc(50px + 50 * (100vw - 500px) / 300), 100px); --s-85at500-170at800: clamp(85px, calc(85px + 85 * (100vw - 500px) / 300), 170px); --s-20at900-25at1150: clamp(20px, calc(20px + 5 * (100vw - 900px) / 250), 25px); --s-50at900-63at1150: clamp(50px, calc(50px + 13 * (100vw - 900px) / 250), 63px); --s-88at900-160at1600: clamp(88px, calc(88px + 72 * (100vw - 900px) / 700), 160px); --s-132at980-60at992: clamp(60px, calc(132px + -72 * (100vw - 980px) / 12), 132px); --s-200at1100-500: clamp(200px, calc(200px + 300 * (100vw - 1100px) / (var(--s-design-max) - 1100)), 500px); } :root { --twitch-font: "roobert", sans-serif; --heading-weight: 500; --body-weight: 500; --heading-line-height: 1; --body-size: var(--s-17-20); --small-body-size: var(--s-14-16); --paragraph-size: var(--s-16-18); --paragraph-line-height: var(--s-25-26); --paragraph-medium-size: var(--s-18-42); --paragraph-medium-line-height: var(--s-25-50); --small-link-size: var(--s-16-24); --large-link-size: var(--s-26-88); --x-large-title-size: var(--s-60-144); --large-title-size: var(--s-37-88); --small-title-size: var(--small-link-size); --large-title-weight: 500; --small-title-weight: 600; --paragraph-weight: 400; --button-label-weight: var(--small-title-weight); --link-weight: 600; --reading-max-width: 667px; } :root { --twitch-purple: #9146ff; --twitch-black-ops: #000000; --twitch-ice: #f0f0ff; --twitch-white: #ffffff; --twitch-jiggle: #fab4ff; --twitch-worm: #facdcd; --twitch-isabelle: #feee85; --twitch-droid: #befae1; --twitch-wipe-out: #00c8af; --twitch-smoke: #d2d2e6; --twitch-widow: #beaaff; --twitch-peach: #fc6675; --twitch-pac: #ffca5f; --twitch-mudkip: #57bee6; --twitch-sonic: #0014a5; --twitch-dragon: #8205b4; --twitch-cuddle: #fa1ed2; --twitch-bandit: #ff6905; --twitch-lightning: #fafa19; --twitch-ko: #beff00; --twitch-mega: #00fafa; --twitch-nights: #41145f; --twitch-osu: #be0078; --twitch-red-alert: #fa2828; --twitch-egg: #00fa05; --twitch-legend: #69ffc3; --twitch-zero: #1e69ff; --light-gray: #e1e0e1; } :root { --animation-default: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .accordions-grouping-rivals { padding: 0; } .c-accordion-item-rivals { list-style: none; margin: 0 0 var(--s-12-30); } .c-accordion-item-rivals [aria-expanded="true"] .c-accordion-item-rivals__button__arrow { transform: rotate(0.25turn); } .c-accordion-item-rivals [aria-expanded="true"] { border-bottom-left-radius: unset; border-bottom-right-radius: unset; background: var(--text); color: var(--text-alt); } .c-accordion-item-rivals__button { z-index: 1; width: 100%; grid-template-columns: 1fr auto; border: none; border-radius: var(--radii); background: var(--text-alt); display: block; color: var(--text); font-size: var(--s-18-29); cursor: pointer; margin: 0; padding: 0.5em 1em; } .c-accordion-item-rivals__button__heading { text-align: left; } .c-accordion-item-rivals__button__arrow { transition: transform 0.2s ease-in; place-self: center; } .c-accordion-item-rivals__content { padding: 0.5em 2em; background: var(--twitch-white); border-bottom-left-radius: var(--radii); border-bottom-right-radius: var(--radii); z-index: -1; box-shadow: var(--card-box-shadow); color: var(--twitch-black-ops); } .c-announcement-rivals { margin: 0 auto; max-width: var(--page-max-width); width: var(--percent-max-width); padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content: end; gap: 30px; } .c-announcement-rivals__item { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat 2, 1fr; } .c-announcement-rivals__item__image { width: 100%; } .c-announcement-rivals__item .c-link { font-size: 30px; line-height: 40px; } .c-blog-card { display: grid; gap: 14px; } .c-blog-card__title { font-size: var(--s-22-30); font-weight: 600; margin: 0; } .c-blog-card__date { margin: 0; font-size: var(--s-16-18); font-weight: 600; } .c-blog-card__preview { margin: 0; font-size: var(--s-16-18); font-weight: 400; } .c-blog-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s 0s ease-out; } .c-blog-card__image:hover { transform: scale(1.05); } .c-blog-card .c-link { grid-area: unset; } .c-cards-blog-cards { margin: 0 auto; max-width: var(--page-max-width); width: var(--percent-max-width); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px; } }

@media all and (max-width: 800px) { .c-cards-blog-cards { grid-template-columns: 1fr; } }

@media all, bookshop { .c-card-content-block { color: var(--twitch-black-ops); text-align: left; position: relative; overflow: hidden; } .c-card-content-block:after { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 76%, white 100%); width: 100%; height: 4em; } .c-card-content-block__heading { font-size: var(--small-title-size); font-weight: var(--small-title-weight); } .c-card-content-block .c-paragraph { margin: var(--s-12-16) 0 0 0; font-size: var(--s-12-18); line-height: var(--s-16-27); } .c-card-content-block .c-paragraph a { color: var(--twitch-purple); } .c-card-content-block .c-paragraph a:hover { color: var(--twitch-black-ops); } .c-cool-list-things { position: relative; z-index: 10; box-shadow: var(--card-box-shadow); background: white; border-radius: var(--radii); color: var(--twitch-black-ops); padding: var(--s-0-56) var(--s-20-80) 30px; } .c-cool-list-things__list-heading { font-size: var(--small-title-size); font-weight: var(--link-weight); margin: 0 0 var(--s-20-40) 0; } .c-cool-list-things__list-paragraph { font-size: var(--paragraph-size); font-weight: var(--paragraph-weight); line-height: var(--s-16-27); } .c-cool-list-things__list-image { width: var(--s-120-150); padding-bottom: 27px; justify-self: center; margin-right: var(--s-20-74); } .c-cool-list-things__list-wrapper { list-style-type: none; padding: 0; } .c-cool-list-things__list-item { border-bottom: 1px solid var(--twitch-smoke); padding: var(--s-40-64) 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } .c-cool-list-things__list-item:last-of-type { border-bottom: none; padding-bottom: 0; } }

@media all and (min-width: 720px) { .c-cool-list-things__list-item { grid-template-columns: repeat(auto-fit, minmax(150px, 200px) minmax(400px, auto)); } }

@media all, bookshop { .c-cards-icon-card { background-color: white; box-shadow: var(--card-box-shadow); padding: 40px; transition: transform 0.3s var(--bezier), box-shadow 0.3s var(--bezier); } .c-cards-icon-card__link-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto) 1fr; grid-template-areas: "image" "title" "description" "link"; justify-items: center; } .c-cards-icon-card:hover { transform: scale(1.04); box-shadow: var(--card-box-m-shadow); } .c-cards-icon-card:hover > header { color: var(--twitch-purple); } .c-cards-icon-card__image { height: 30px; width: 30px; object-fit: contain; } .c-cards-icon-card__image-wrapper { display: grid; place-content: center; height: 70px; width: 70px; background-color: var(--twitch-purple); grid-area: image; border-radius: 50%; margin: 0 25px 25px 0; } .c-cards-icon-card__title { grid-area: title; font-weight: 600; font-size: 29px; line-height: 120%; text-align: center; color: var(--twitch-black-ops); } .c-cards-icon-card__description { grid-area: description; font-style: normal; font-weight: normal; font-size: 24px; line-height: 120%; text-align: center; overflow-wrap: break-word; word-wrap: break-word; width: 100%; color: #000000; } .c-cards-icon-card .c-link { align-self: end; } }

@media all and (min-width: 768px) { .c-cards-icon-card:hover { transform: scale(1.02); } .c-cards-icon-card__link-wrapper { grid-template-columns: auto 1fr; grid-template-rows: repeat(2, auto) 1fr; grid-template-areas: "image title" "image description" ". link"; justify-items: start; } .c-cards-icon-card__title { text-align: left; } .c-cards-icon-card__description { text-align: left; } }

@media all, bookshop { .c-image-card { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--s-144-225) var(--s-150-245); background: var(--twitch-white); box-shadow: var(--card-box-shadow); border-radius: 4px; } .c-image-card__image { width: 100%; height: var(--s-144-225); object-fit: cover; } .c-image-card__outer-link:hover .c-card-content-block__heading { color: var(--twitch-purple); } .c-image-card .c-card-content-block { place-self: start; padding: var(--s-24-32); height: 100%; } .c-link-card { display: grid; --padding: var(--s-24-32); padding: var(--padding); grid-template-columns: 1fr; --grid-row-height: var(--s-100-210); grid-template-rows: calc(var(--grid-row-height) - 48px) auto calc( var(--s-150-245) - 48px); justify-items: left; height: 100%; grid-template-areas: "image" "link" "paragraph"; background: var(--twitch-white); box-shadow: var(--card-box-shadow); border-radius: 4px; } .c-link-card:hover .c-link-card__heading { color: var(--twitch-black-ops); } .c-link-card__link { grid-area: link; font-weight: var(--small-title-weight); align-self: end; padding-bottom: var(--s-0-22); } .c-link-card__heading { color: var(--twitch-purple); align-self: end; } .c-link-card__image { grid-area: image; align-self: end; } .c-link-card__image-icon { align-self: end; width: 48px; height: 48px; object-fit: cover; } .c-link-card .c-paragraph { height: 100%; font-size: var(--s-12-18); line-height: var(--s-16-27); } }

@media all and (min-width: 1000px) { .c-link-card .c-paragraph { text-align: center; } }

@media all and (min-width: 1000px) { .c-link-card { --grid-row-height: var(--s-100-210); justify-items: center; } }

@media all, bookshop { .c-medium-cards { margin: 0 auto; max-width: var(--percent-max-width); width: var(--page-max-width); } .c-medium-cards .c-large-heading { padding-bottom: var(--s-38-143); } .c-medium-cards__list-wrapper { padding: 0; list-style-type: none; display: grid; gap: var(--s-23-50); grid-template-columns: repeat(auto-fit, minmax(var(--s-200at1100-500), 1fr)); } .c-medium-card { display: grid; --padding: var(--s-24-32); padding: var(--padding); height: 100%; grid-template-columns: 1fr; grid-template-rows: repeat(2, auto) 1fr; justify-items: left; grid-template-areas: "link" "image" "paragraph"; background: var(--twitch-white); box-shadow: var(--card-box-shadow); border-radius: var(--radii); } .c-medium-card__link { grid-area: link; font-weight: var(--small-title-weight); padding-bottom: var(--s-36-15); } .c-medium-card__image { grid-area: image; display: none; } }

@media all and (min-width: 982px) { .c-medium-card__image { display: initial; } }

@media all, bookshop { .c-medium-card__image-icon { width: 140px; height: 140px; object-fit: cover; } .c-medium-card .c-paragraph { font-size: var(--s-12-18); line-height: var(--s-16-27); text-align: left; } }

@media all and (min-width: 1000px) { .c-medium-card { --grid-row-height: var(--s-100-210); } }

@media all, bookshop { .sc-quote-carousel { grid-area: quote-carousel; } .c-quote-carousel { display: grid; --top-padding: var(--s-132-200); grid-template-columns: 1fr; grid-template-rows: var(--top-padding) auto auto; } .c-quote-carousel .u-rise { transform: translateY(30%); opacity: 0; } .c-quote-carousel .u-rise.risen { animation: rise 0.3s var(--bezier) 1 forwards; animation-delay: calc(var(--animation-order) * 100ms); } .c-quote-carousel__slide-bullets { background-color: unset; grid-area: bullets; display: flex; justify-self: center; grid-row: 3 / -1; grid-column: 1 / 1; margin-top: var(--s-16-28); } .c-quote-carousel__bullet { border-radius: 10px; border: 2px solid var(--link); opacity: 0.4; --bullet-width: var(--s-8-12); height: var(--bullet-width); width: var(--bullet-width); margin: var(--s-2-3); padding: 0; } .c-quote-carousel__bullet:hover { cursor: pointer; } .c-quote-carousel__bullet.is-active { border: unset; opacity: 1; background-color: var(--link); } .c-quote-carousel__content { grid-area: content; grid-row: 1 / 3; grid-column: 1 / 1; background-color: var(--twitch-white); box-shadow: var(--card-box-shadow); border-radius: var(--radii); font-size: var(--s-12-18); line-height: var(--s-16-27); letter-spacing: 0.01em; padding: var(--top-padding) var(--s-32-73) var(--s-32-73) var(--s-23-46); } .c-quote-carousel__content > *:nth-child(1) { margin-top: 0px; } .c-quote-carousel__content-message { position: relative; z-index: 1; } .c-quote-carousel__content-message::before { content: "“"; position: absolute; font-size: var(--s-120-200); font-weight: 900; color: var(--twitch-ice); top: var(--s-12-43); left: var(--s-n10-n26); z-index: -1; } .c-quote-carousel__content-signature { color: var(--twitch-purple); } .c-quote-carousel__content-signature-title { margin-top: 0; } .c-quote-carousel__content-signature-name { margin-bottom: 0; } .c-quote-carousel__image { grid-area: image; grid-row: 1 / 2; grid-column: 1 / 1; align-self: center; justify-self: center; z-index: 2; object-fit: cover; --circle-width: var(--s-88-120); width: var(--circle-width); height: var(--circle-width); border-radius: var(--circle-width); } .c-quote-carousel__image--center { object-position: 50% 50%; } .c-quote-carousel__image--top { object-position: 50% 0%; } .c-quote-carousel__image--bottom { object-position: 0% 50%; } }

@media all and (min-width: 850px) { .c-quote-carousel { grid-template-columns: 133px 133px 1fr; grid-template-rows: 40px 380px minMax(60px, auto); } .c-quote-carousel__image { grid-row: 1 / 3; grid-column: 1 / 3; height: 420px; width: 266px; border-radius: unset; } .c-quote-carousel__content { padding-left: 193px; padding-top: 60px; grid-row: 2 / -1; grid-column: 2 / -1; } .c-quote-carousel__slide-bullets { grid-row: 3 / 4; grid-column: 1 / 2; align-self: start; justify-self: start; } }

@media all, bookshop { .c-cards-resource-cards-cards-image { --card-height: 380px; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, calc(var(--card-height) / 2)); box-shadow: var(--card-box-shadow); } .c-cards-resource-cards-cards-image__image { object-fit: cover; height: calc(var(--card-height) / 2); width: 100%; } .c-cards-resource-cards-cards-image__content { display: grid; padding: calc(min(35px, 6vw)); background-color: white; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "title" "description"; } .c-cards-resource-cards-cards-image__header { font-style: normal; font-weight: 600; font-size: 19px; line-height: 120%; color: var(--twitch-black-ops); } .c-cards-resource-cards-cards-image__link { font-weight: bold; font-size: 18px; line-height: 150%; padding: 5px 0; align-self: end; } .c-resource-cards { display: grid; margin: 0 auto; max-width: var(--percent-max-width); width: var(--page-max-width); } .c-resource-cards__nav { margin-bottom: var(--s-10-40); } .c-resource-cards__nav__list { padding: 0; list-style-type: none; display: flex; gap: 1px; background-color: #e4e4e7; box-shadow: var(--card-box-shadow); } }

@media all and (max-width: 800px), bookshop and (max-width: 800px) { .c-resource-cards__nav__list { flex-direction: column; } .c-resource-cards__nav__list button[aria-expanded="false"] { position: absolute; top: -9999px; left: -9999px; } .c-resource-cards__nav__list button.visible[aria-expanded="false"] { position: unset; top: unset; left: unset; } }

@media all, bookshop { .c-resource-cards__nav__listitem { flex: 1; } .c-resource-cards__nav__listitem button { appearance: none; width: 100%; height: var(--s-50-80); border: none; font-weight: 600; font-size: var(--s-12-18); background-color: var(--background); color: var(--text); } }

@media all and (max-width: 800px), bookshop and (max-width: 800px) { .c-resource-cards__nav__listitem button { text-align: left; padding-left: 20px; } }

@media all, bookshop { .c-resource-cards__nav__listitem button:hover { color: var(--link); } .c-resource-cards__nav__listitem button span { display: inline-flex; align-items: center; position: relative; transform: translateX(var(--s-n10-n13)); transition: transform ease 0.4s; } .c-resource-cards__nav__listitem button span::before { opacity: 0; content: ""; width: 16px; height: 10px; margin-right: var(--s-5-10); background-color: var(--background); clip-path: polygon(0px 0px, 3px 0px, 3px 7px, 100% 7px, 100% 100%, 0% 100%); box-sizing: border-box; transform: rotateZ(-45deg) translateY(-40%); transition: opacity ease 0.2s; } .c-resource-cards__nav__listitem button[aria-expanded="true"] { background-color: var(--link); color: var(--background); } .c-resource-cards__nav__listitem button[aria-expanded="true"]:hover { color: var(--background); background-color: var(--link); } .c-resource-cards__nav__listitem button[aria-expanded="true"] span { transform: translateX(0); } .c-resource-cards__nav__listitem button[aria-expanded="true"] span::before { opacity: 1; transition: opacity ease 0.3s 0.2s; } .c-resource-cards__resources { display: grid; --card-gap: var(--s-20-40); --number-of-columns: 4; --min-column-value: calc(
      (
          var(--page-max-width) -
            (var(--card-gap) * (var(--number-of-columns) - 1))
        ) / var(--number-of-columns)
    ); grid-template-columns: repeat(auto-fill, minmax(calc(min(var(--min-column-value), 100%)), 1fr)); gap: var(--card-gap); } .c-resource-cards__image-wrapper img { width: 100%; height: 155px; object-fit: cover; } .c-resource-cards__title { margin: 22px 0 22px 0; font-weight: 600; font-size: 18px; line-height: 120%; } .c-resource-cards__title a { color: var(--twitch-black-ops); } .c-resource-cards__title a:hover { text-decoration: underline; } .c-resource-cards__content { font-size: var(--small-body-size); font-weight: var(--body-weight); line-height: 150%; margin-bottom: 0; } .c-resource-cards .c-dev-button { position: absolute; bottom: 17px; left: 0; margin-left: 0; color: var(--link); } .c-resource-cards .c-dev-button:hover { text-decoration: underline; } .c-status-card { width: 100%; position: relative; --circle-width: var(--s-46at300-80at900); grid-area: status; --status-true-color: #00c8af; --status-false-color: #8a839e; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat 3, auto; grid-template-areas: "label" "label" "section"; } .c-status-card__section { grid-area: section; grid-row-start: 2; grid-row-end: 4; box-shadow: var(--card-box-shadow); } .c-status-card__section .c-paragraph { color: var(--text); background-color: var(--twitch-white); padding: 36px 23px 31px 23px; } .c-status-card__label { color: var(--twitch-white); box-shadow: var(--card-box-shadow); grid-area: label; justify-self: center; display: flex; align-items: center; justify-content: center; z-index: 2; border-radius: calc(var(--circle-width) / 2); height: var(--circle-width); width: var(--circle-width); } .c-status-card__label-text { margin: 0; font-size: var(--s-10-18at900); letter-spacing: -0.02em; } .c-status-card__label--on { background-color: var(--status-true-color); } .c-status-card__label--off { background-color: var(--status-false-color); } }

@media all and (min-width: 650px) { .c-status-card { left: calc(var(--circle-width) / -2); grid-template-columns: auto auto 1fr; grid-template-rows: 20px auto auto 1fr; grid-template-areas: ".      .       section" "label  label   section" "label  label   section" ".      .       section"; } .c-status-card__section { grid-row-start: 1; grid-row-end: -1; grid-column-start: 2; grid-column-end: -1; } .c-status-card__section .c-paragraph { background-color: var(--twitch-white); padding: 36px 127px 39px 64px; } .c-status-card__section .c-paragraph:first-child { margin-top: 0; } .c-status-card__section .c-paragraph:last-child { margin-bottom: 0; } }

@media all, bookshop { .c-testimonials { max-width: var(--percent-max-width); width: var(--page-max-width); margin: 0 auto; } .c-testimonials .c-large-heading { padding-bottom: var(--s-36-63); max-width: var(--s-181-500); } .c-testimonials__list-wrapper { padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); grid-column-gap: var(--s-50-133); grid-row-gap: 24px; max-width: var(--page-max-width); } }

@media all and (min-width: 995px) { .c-testimonials__list-wrapper { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)) var(--right-content-width-modifier); } }

@media all and (min-width: 982px) { .c-testimonials { margin: 0 auto; } }

@media all, bookshop { .c-testimonial { position: relative; z-index: 10; background: #ffffff; box-shadow: var(--card-box-shadow); border-radius: var(--radii); padding: var(--s-132at980-60at992) var(--s-23-60) var(--s-40-60) var(--s-23-60); --img-dimensions: var(--s-88at900-160at1600); --attestant-photo: url("https://via.placeholder.com/150"); --attestant-signature: "test"; } .c-testimonial .c-paragraph { font-size: var(--s-12-18); line-height: var(--s-16-27); color: var(--twitch-black-ops); } .c-testimonial::before { position: absolute; top: calc(28px); right: calc(50% - (var(--img-dimensions) / 2)); background: var(--attestant-photo) no-repeat; content: ""; border-radius: 200px; background-size: cover; width: var(--img-dimensions); height: var(--img-dimensions); z-index: 999999; } }

@media all and (min-width: 980px) { .c-testimonial::before { top: calc(0px - var(--img-dimensions) / 2); right: calc(0px - var(--img-dimensions) / 2); } }

@media all, bookshop { .c-testimonial::after { color: var(--twitch-black-ops); position: absolute; content: var(--attestant-signature); font-family: cursive; font-style: normal; font-weight: 100; font-size: 40px; line-height: 109%; transform: rotate(-15.15deg); right: 30px; bottom: 5px; display: none; } .c-tiny-cards { width: var(--page-max-width); max-width: var(--percent-max-width); margin: 0 auto; } .c-tiny-cards__grid-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 64px; } .c-tiny-block-image { grid-area: tiny-block-image; --sides: var(--s-90-140); width: var(--sides); height: var(--sides); object-fit: cover; } .c-tiny-card { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--s-100-170) 10px auto; justify-items: center; grid-row-gap: var(--s-12-20); grid-template-areas: "tiny-block-image" "link" "paragraph"; } .c-tiny-card .c-paragraph { font-size: var(--paragraph-size); } .c-tiny-card__title .c-paragraph { font-size: var(--small-title-size); font-weight: 600; } .c-video-card-collage { max-width: var(--page-max-width); width: var(--percent-max-width); margin: 0 auto; } .c-video-card-collage__list-wrapper { list-style-type: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 1fr); grid-row-gap: var(--s-24-40); grid-column-gap: 50px; } }

@media all and (min-width: 706px) { .c-video-card-collage__list-wrapper { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-template-rows: 1fr 1fr; align-items: center; } }

@media all and (min-width: 1050px) { .c-video-card-collage { padding: 0; } }

@media all, bookshop { .c-video-card-collage .c-large-heading { padding-bottom: var(--s-40-84); text-align: left; } }

@media all and (min-width: 706px) { .c-video-card-collage .c-large-heading { text-align: center; } }

@media all, bookshop { .c-video-card { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--s-144-225) var(--s-150-245); background: var(--twitch-white); box-shadow: var(--card-box-shadow); border-radius: 4px; } .c-video-card__video-wrapper { position: relative; height: var(--s-144-225); } .c-video-card__video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-video-card .c-card-content-block { padding: var(--s-24-32); height: 100%; } .c-video-card-medium { display: grid; grid-template-rows: auto 144px; background: var(--twitch-white); box-shadow: var(--card-box-shadow); border-radius: var(--radii); } .c-video-card-medium__video-wrapper { position: relative; padding-top: var(--video-aspect-ratio); } .c-video-card-medium__video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-video-card-medium__video-duration { display: none; color: var(--twitch-black-ops); } .c-video-card-medium .c-card-content-block { color: var(--twitch-black-ops); padding: var(--s-24-32); } }

@media all and (min-width: 706px) { .c-video-card-medium { grid-template-rows: auto 119px; } .c-video-card-medium__video-duration { display: initial; } .c-video-card-medium__video-description + p { display: none; color: var(--twitch-black-ops); } }

@media all, bookshop { .c-champion-rivals { display: grid; position: relative; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "sidebar    header" "sidebar    content"; } .c-champion-rivals__sidebar { grid-area: sidebar; background-color: var(--twitch-purple); border: solid 1px black; } .c-champion-rivals__header { grid-area: header; color: var(--twitch-black-ops); font-size: var(--s-32-48); line-height: 100%; font-weight: semi-bold; padding: 1rem 3rem; background-color: var(--twitch-ice); color: var(--twitch-purple); margin: 0; } .c-champion-rivals__content { padding: 2rem 3rem; background-color: var(--twitch-white); } .c-champion-rivals__image { clip-path: url(#clip1); transform: rotate(-14.9488deg); position: absolute; object-fit: cover; object-position: center; width: 106px; height: 114px; top: 35px; left: -67px; } .c-champion-rivals svg { position: absolute; } }

@media all and (max-width: 700px) { .c-champion-rivals { grid-template-columns: 13px 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "sidebar      header" "sidebar   image" "sidebar   content"; } .c-champion-rivals__image { grid-area: image; clip-path: unset; position: unset; transform: unset; width: 100%; height: 300px; object-fit: cover; } .c-champion-rivals__header { padding: 1rem 1.5rem; } .c-champion-rivals__content { padding: 1.5rem; } }

@media all, bookshop { .c-main-champion-rivals__content { padding: var(--s-40-100) var(--s-20-70) var(--s-20-70); background-color: var(--twitch-white); } .c-main-champion-rivals__image { transform: rotate(-14.9488deg); position: absolute; object-fit: cover; object-position: center; width: 190px; height: 170px; top: 57px; left: var(--s-n110-n86); } .c-main-champion-rivals svg { position: absolute; } }

@media all and (max-width: 700px) { .c-main-champion-rivals { grid-template-columns: 13px 1fr; grid-template-rows: auto 45px 1fr; grid-template-areas: "sidebar-top      header" "sidebar-top      game" "sidebar-bottom   image" "sidebar-bottom   content"; } .c-main-champion-rivals__image { grid-area: image; clip-path: unset; position: unset; transform: unset; width: 100%; height: 300px; object-fit: cover; } }

@media all, bookshop { .c-champions-by-game-rivals { padding: 0; } .c-channel-list-rivals { margin: 0 auto; max-width: var(--page-max-width); width: var(--percent-max-width); padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--s-200-350), 1fr)); grid-auto-rows: 60px; align-items: center; gap: 20px; --font-item-size: var(--s-25-30); } .c-channel-list-rivals__item { background: var(--button-alt); width: 100%; height: 100%; display: grid; } .c-channel-list-rivals__item .c-link { font-size: var(--font-item-size); } .c-channel-list-rivals__item-last { font-size: var(--font-item-size); color: var(--twitch-black-ops); place-self: center; font-weight: 700; } .c-channel-list-rivals__item-last p { text-align: center; margin: auto 0; } .c-content-beside-accordion { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content; grid-column-gap: var(--s-0-166); grid-row-gap: 20px; justify-items: left; grid-template-areas: "content-area  accordians" "content-area  accordians"; } .c-content-beside-accordion--right { justify-items: left; grid-template-areas: "accordians  content-area" "accordians  content-area"; } }

@media all and (max-width: 1000px), bookshop and (max-width: 1000px) { .c-content-beside-accordion { grid-template-areas: "content-area content-area" "accordians accordians"; } }

@media all, bookshop { .c-content-beside-accordion .c-paragraph strong { font-size: var(--s-16-24); } .c-content-beside-accordion__accordion_wrapper { width: 100%; grid-area: accordians; } .c-emote-shoutout-rivals { margin: 0 auto; max-width: var(--page-max-width); width: var(--percent-max-width); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 50px 6vw; } .c-emote-shoutout-rivals__list { gap: 0 1vw; grid-row: 2 / -1; margin: 0; padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); place-items: center; } .c-emote-shoutout-rivals__list__item__image { width: 100%; } .c-emote-shoutout-rivals__shoutout { background: var(--twitch-white); position: relative; width: 100%; height: 100%; display: grid; grid-row: 1 / 2; } .c-emote-shoutout-rivals__shoutout::before { content: ""; position: absolute; --arrow-size: var(--s-19-50); bottom: calc(var(--arrow-size) * -1 + 1px); border-top: var(--arrow-size) solid var(--twitch-white); border-left: var(--arrow-size) solid transparent; left: 50%; } .c-emote-shoutout-rivals__shoutout__message { font-size: var(--s-30-70); letter-spacing: -0.015em; font-weight: 600; place-self: center; margin: 0; color: var(--twitch-black-ops); } }

@media all and (min-width: 900px) { .c-emote-shoutout-rivals { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .c-emote-shoutout-rivals__list { grid-row: 1 / -1; } .c-emote-shoutout-rivals__shoutout::before { left: calc(var(--arrow-size) * -1 + 1px); bottom: auto; top: 50%; } }

@media all, bookshop { .c-featured-champions-rivals { border: solid 1px black; display: grid; grid-template-columns: 13px 1fr; grid-template-rows: repeat(autofit, auto); grid-template-areas: "top-sidebar    content" "top-sidebar    game-poster" "bottom-sidebar players" "bottom-sidebar video"; } .c-featured-champions-rivals .sidebar > * { display: none; } .c-featured-champions-rivals__top-sidebar { grid-area: top-sidebar; background-color: var(--text-alt); } .c-featured-champions-rivals__top-sidebar svg { width: 80%; } .c-featured-champions-rivals__bottom-sidebar { grid-area: bottom-sidebar; background-color: var(--text); font-size: 30px; } .c-featured-champions-rivals__game-poster { grid-area: game-poster; width: 100%; } .c-featured-champions-rivals__content { grid-area: content; margin: 0; padding: 0 var(--s-15-50) 60px; background-color: white; color: var(--twitch-black-ops); } .c-featured-champions-rivals__content h2 { font-size: var(--s-40-60); font-weight: var(--large-title-weight); font-weight: normal; margin: 40px 0; } .c-featured-champions-rivals__content p, .c-featured-champions-rivals__content time { font-size: var(--s-18-36); font-weight: normal; margin: 0; line-height: var(--s-22-43); } .c-featured-champions-rivals__players { grid-area: players; background-color: var(--twitch-ice); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; padding: 30px; gap: 20px; } .c-featured-champions-rivals__players__captain { display: grid; justify-items: center; grid-template-rows: auto 1fr; place-self: center; } .c-featured-champions-rivals__players__captain img { width: 250px; height: 250px; object-fit: cover; border-radius: 50%; } .c-featured-champions-rivals__players__captain__content { font-weight: bold; font-size: 36px; text-align: center; } .c-featured-champions-rivals__players__captain__content-sub { font-size: 25px; font-weight: normal; text-align: center; } .c-featured-champions-rivals__players__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: repeat(2, 80px); gap: 20px 0; } .c-featured-champions-rivals__players__item { --circles-size: 70px; display: grid; grid-template-columns: var(--circles-size) 1fr; grid-template-rows: 35px auto; gap: 0px 10px; grid-template-areas: "image    gamer" "image    game"; } .c-featured-champions-rivals__players__item img { grid-area: image; width: var(--circles-size); height: var(--circles-size); border-radius: 50%; object-fit: cover; object-position: center; } .c-featured-champions-rivals__players__item__gamer { grid-area: gamer; font-size: 24px; font-weight: bold; } .c-featured-champions-rivals__players__item__game { grid-area: game; } }

@media all and (max-width: 800px) { .c-featured-champions-rivals__players { grid-template-columns: 1fr; gap: 40px; } }

@media all, bookshop { .c-featured-champions-rivals__video { background: var(--link-hover); grid-area: video; text-align: center; } .c-featured-champions-rivals__video img { width: 100%; height: 400px; object-fit: cover; } .c-featured-champions-rivals__video__header { display: block; margin: auto 0; background-color: var(--twitch-black-ops); color: var(--twitch-white); text-transform: uppercase; font-size: var(--s-24-30); } }

@media all and (min-width: 700px) { .c-featured-champions-rivals { margin: 0 auto; max-width: calc(var(--page-max-width)); width: var(--percent-max-width); grid-template-columns: 50px 267px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "top-sidebar    game-poster   content" "bottom-sidebar players       players" "bottom-sidebar video         video"; } .c-featured-champions-rivals .sidebar > * { display: unset; } .c-featured-champions-rivals__top-sidebar { display: grid; justify-items: center; } .c-featured-champions-rivals__top-sidebar svg { margin-top: 40px; } .c-featured-champions-rivals__bottom-sidebar { color: var(--twitch-white); writing-mode: vertical-rl; display: grid; place-items: center; } }

@media all and (min-width: 1400px) { .c-featured-champions-rivals { grid-template-columns: 50px 267px 1fr 400px; grid-template-rows: 300px 1fr; grid-template-areas: "top-sidebar    game-poster   content   content" "bottom-sidebar players       players   video"; } .c-featured-champions-rivals__video { width: 100%; } }

@media all, bookshop { .c-button { display: inline-flex; align-items: center; justify-content: center; font-size: var(--small-link-size); border-radius: var(--radii); padding: 0 var(--s-20-66); height: var(--s-56-80); min-width: var(--s-128-267); font-weight: var(--link-weight); } .c-button--primary { background-color: var(--link); border: none; color: var(--background); } .c-button--primary:hover { color: var(--background); background-color: var(--link-hover); } .c-button--secondary { border: 1px solid var(--link); background-color: transparent; } .c-button--secondary:hover { background-color: var(--link); color: var(--background); } .c-buttons { display: flex; gap: var(--s-16-30); grid-area: buttons; } .c-content-area { grid-area: content-area; max-width: var(--content-max-width); } .c-content-area .c-paragraph { max-width: var(--reading-max-width); } .c-content-area .c-paragraph:where(h2, h3, h4, h5, h6) { font-size: var(--s-16-24); margin-top: var(--s-32-64); } .c-content-area--center { text-align: center; } .c-content-area--center .c-paragraph { margin: 0 auto; } .c-content-area--right { text-align: right; } .c-content-area--right .c-paragraph { margin: 0 0 0 auto; } .c-content-grid-item { color: var(--text); } .c-content-grid-item__heading { font-size: var(--small-title-size); padding-bottom: var(--s-12-16); font-weight: var(--small-title-weight); line-height: 100%; } .c-content-grid-item__paragraph { font-size: var(--paragraph-size); font-weight: var(--paragraph-weight); line-height: 150%; } .c-content-grid { width: var(--page-max-width); max-width: var(--percent-max-width); margin: 0 auto; } .c-content-grid__list-wrapper { display: grid; padding: 0; list-style: none; grid-gap: var(--s-32-133); grid-template-columns: repeat(auto-fit, minmax(var(--s-200-400), 1fr)); } .c-generic-emphasis-paragraph { font-size: var(--paragraph-medium-size); line-height: var(--paragraph-medium-line-height); color: var(--text); } .c-generic-image { --image-y-offset: 0%; --image-max-width: 100%; --image-positioning: begin; width: var(--image-percentage-width); position: relative; display: grid; top: var(--image-y-offset); margin-bottom: var(--image-y-offset); max-width: var(--image-max-width); width: 100%; z-index: 10; justify-self: var(--image-positioning); } .c-large-heading { grid-area: large-heading; font-size: var(--large-title-size); padding: 0; margin: 0; font-weight: var(--large-title-weight); --animation-order: 1; } .c-large-heading > div[data-svelte-slab] { display: none; } .c-large-heading--left { text-align: left; } .c-large-heading--center { text-align: center; } .c-large-heading--right { text-align: right; } .c-large-heading--primary { color: var(--text); } .c-large-heading--secondary { color: var(--text-alt); } .c-large-heading--large { font-size: var(--large-title-size); } .c-large-heading--large .c-large-heading__emoji { width: var(--s-31-62); height: var(--s-31-62); object-fit: contain; } .c-large-heading--x-large { font-size: var(--x-large-title-size); } .c-large-heading--x-large .c-large-heading__emoji { width: var(--s-50-100); height: var(--s-50-100); object-fit: contain; } .c-large-heading span { display: inline-block; } .c-large-heading .u-rise { transform: translateY(30%); opacity: 0; } .c-large-heading .u-rise.risen { animation: rise 0.3s var(--bezier) 1 forwards; animation-delay: calc(var(--animation-order) * 50ms); } .c-link { grid-area: link; font-size: var(--small-link-size); font-weight: var(--link-weight); } .c-link:hover { color: var(--link-hover); } .c-link--large { font-size: var(--large-link-size); } .c-link--medium { font-size: var(--paragraph-medium-size); } .c-link--primary { color: var(--link); } .c-link--secondary { color: var(--link-hover); } .c-link--secondary:hover { color: var(--link); } .c-multi-column { column-gap: var(--s-40-80); column-width: 53ch; } .c-multi-column h1, .c-multi-column h2, .c-multi-column h3, .c-multi-column h4, .c-multi-column h5, .c-multi-column h6 { column-rule: all; } .c-multi-column p:first-of-type { margin-top: 0; } .c-paragraph { grid-area: paragraph; font-size: var(--paragraph-size); padding: 0; margin: 0; font-weight: var(--paragraph-weight); line-height: var(--paragraph-line-height); } .c-paragraph--left { text-align: left; } .c-paragraph--center { text-align: center; } .c-paragraph--right { text-align: right; } .c-paragraph--justify { text-align: justify; text-justify: inter-word; } .c-paragraph--primary { color: var(--text); } .c-paragraph--secondary { color: var(--text-alt); } .c-iframe-video { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .c-iframe-video__video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .c-partners-rivals { margin: 0 auto; max-width: calc(var(--page-max-width) - 300px); width: var(--percent-max-width); padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--s-100-200), 1fr)); place-items: center; column-gap: var(--s-70-150); row-gap: 50px; } .c-partners-rivals__item__image { filter: brightness(0) invert(1); width: 100%; } .c-recent-champion-rivals { background: var(--twitch-white); display: grid; position: relative; grid-template-columns: 13px 1fr; grid-template-rows: repeat(autofit, auto); grid-template-areas: "sidebar    content" "sidebar    player" "sidebar    video"; position: relative; } .c-recent-champion-rivals__sidebar { grid-area: sidebar; background-color: var(--text); } .c-recent-champion-rivals__sidebar > * { display: none; } .c-recent-champion-rivals__sidebar__text { font-size: 26px; } .c-recent-champion-rivals__content { grid-area: content; padding: 1rem 2rem; background-color: var(--twitch-white); font-weight: normal; font-size: 48px; } .c-recent-champion-rivals__content__player-name { color: var(--twitch-purple); } .c-recent-champion-rivals__content__date { font-size: 32px; } .c-recent-champion-rivals__content .c-link { display: block; font-size: 32px; } .c-recent-champion-rivals__player { grid-area: player; background: var(--link-hover); object-fit: cover; width: 100%; height: 400px; min-height: 100%; } .c-recent-champion-rivals__video { height: 300px; position: relative; } .c-recent-champion-rivals__video a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-recent-champion-rivals__video iframe { pointer-events: none; overflow: hidden; width: 100%; height: 100%; } }

@media all and (min-width: 900px) { .c-recent-champion-rivals { grid-template-columns: 60px 267px 1fr auto; grid-template-areas: "sidebar   player   content  video"; } .c-recent-champion-rivals__sidebar { color: var(--twitch-white); writing-mode: vertical-rl; display: grid; place-items: center; } .c-recent-champion-rivals__sidebar > * { display: unset; } .c-recent-champion-rivals__player { height: 200px; } .c-recent-champion-rivals__video { width: 300px; height: 100%; } }

@media all, bookshop { .c-recent-champions-rivals { display: grid; gap: 30px; } }

@media all and (min-width: 900px) { .c-recent-champions-rivals { margin: 0 auto; max-width: calc(var(--page-max-width)); width: var(--percent-max-width); } }

@media all, bookshop { .c-big-link-block { margin: 0 auto; max-width: var(--page-max-width); width: var(--percent-max-width); padding: 0; list-style-type: none; } .c-blog-content { margin: 0 auto; max-width: 600px; width: var(--percent-max-width); margin-top: 40px; line-height: 28px; } .c-blog-content__video-iframe-wrapper { margin-top: 40px; margin-bottom: var(--s-80at200-170at844); transform: translateX(-20%); position: relative; max-width: 140%; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .c-blog-content__video-iframe-wrapper iframe { border: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 140%; height: 140%; } .c-blog-content img { max-width: 140%; width: 100%; height: auto; max-height: 60vh; margin: 20px 0; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: auto; } .c-sections-blog-featured { width: var(--page-max-width); max-width: 100vw; margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; color: white; } .c-sections-blog-featured__blog-image { width: 100%; grid-column: 1 / -1; grid-row: 1 / 2; } .c-sections-blog-featured__blog-contents { grid-column: 1/-1; grid-row: -2/-1; max-width: 640px; width: 100%; background-color: var(--twitch-purple); padding: var(--s-28-70); display: grid; color: var(--twitch-white); font-weight: blue; } .c-sections-blog-featured__blog-contents time { font-weight: 600; } .c-sections-blog-featured__blog-contents time, .c-sections-blog-featured__blog-contents p { font-size: var(--s-18-24); margin: 10px 0; } .c-sections-blog-featured__blog-contents .c-link { grid-area: unset; font-size: var(--s-28-48); color: white; } .c-sections-blog-featured__blog-contents .c-link:hover { color: black; } }

@media all and (min-width: 638px) { .c-sections-blog-featured { grid-template-columns: 1fr 8fr; } .c-sections-blog-featured__blog-image { grid-column: 2 / -1; grid-row: 1 / 2; position: relative; z-index: 1; } .c-sections-blog-featured__blog-contents { grid-column: 1/-1; grid-row: -2/-1; position: relative; z-index: 2; } }

@media all, bookshop { .c-blog-header { margin: 0 auto; max-width: var(--blog-max-width); width: var(--percent-max-width); display: grid; grid-template-columns: 1fr; gap: var(--s-25-64); } .c-blog-header__sub-heading { font-size: var(--s-17-30); font-weight: 600; } .c-blog-header .c-large-heading { grid-area: unset; } .c-blog-header__image { width: 100%; } .c-card-carousel .is-hoverable { transition: box-shadow 0.2s ease-in-out; } .c-card-carousel .is-hoverable:hover { box-shadow: 0px 8px 46px -13px rgba(176, 97, 241, 0.342); } .c-card-carousel__wrapper { max-width: var(--percent-max-width); width: var(--page-max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); justify-content: end; grid-column-gap: 40px; } .c-card-carousel__wrapper .u-rise { transform: translateY(30%); opacity: 0; } .c-card-carousel__wrapper .u-rise.risen { animation: rise 0.3s var(--bezier) 1 forwards; animation-delay: calc(var(--animation-order) * 100ms); } }

@media all and (max-width: 753px) { .c-card-carousel__wrapper { grid-template-columns: repeat(auto-fill, 1fr); row-gap: 24px; } }

@media all, bookshop { .c-card-carousel__wrapper .is-hidden { display: none; } .c-card-carousel__slide-bullets { grid-area: bullets; display: flex; justify-self: center; grid-row: 3 / -1; grid-column: 1 / 1; margin: var(--s-16-28) 0 var(--s-16-28) 75vw; } }

@media all and (max-width: 753px) { .c-card-carousel__slide-bullets { display: none; } }

@media all, bookshop { .c-card-carousel__bullet { border-radius: 10px; background-color: unset; border: 2px solid var(--link); opacity: 0.4; --bullet-width: var(--s-8-12); height: var(--bullet-width); width: var(--bullet-width); margin: var(--s-2-3); padding: 0; } .c-card-carousel__bullet:hover { cursor: pointer; } .c-card-carousel__bullet.is-active { border: unset; background-color: var(--link); opacity: 1; } .c-card-carousel .c-paragraph { color: var(--twitch-black-ops); } .c-card-carousel .card-link { z-index: 11; } .c-card-carousel .c-video-card, .c-card-carousel .c-link-card, .c-card-carousel .c-image-card, .c-card-carousel__bullet { z-index: 10; } .c-card-flipping-carousel { max-width: var(--percent-max-width); width: calc(var(--page-max-width) - 300px); margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "quote-carousel"; } .c-card-flipping-carousel__aside-content { display: none; grid-area: aside-content; } }

@media all and (min-width: 1100px) { .c-card-flipping-carousel { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-gap: 30px; grid-template-areas: "quote-carousel"; } .c-card-flipping-carousel__aside-content { display: unset; align-self: center; } }

@media all, bookshop { .c-content-area-block { width: var(--page-max-width); max-width: var(--percent-max-width); margin: 0 auto; } .content-beside-image { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content; grid-column-gap: var(--s-100-166); grid-row-gap: 0; justify-items: left; grid-template-areas: "content-area  self-image" "content-area  self-image"; } .content-beside-image--right { justify-items: left; grid-template-areas: "self-image  content-area" "self-image  content-area"; } }

@media all and (max-width: 1000px), bookshop and (max-width: 1000px) { .content-beside-image { grid-template-areas: "content-area  content-area" "content-area  content-area"; } }

@media all, bookshop { .content-beside-image .c-paragraph strong { font-size: var(--s-16-24); } .content-beside-image__image { grid-area: self-image; width: 100%; } }

@media all and (max-width: 1000px), bookshop and (max-width: 1000px) { .content-beside-image__image { display: none; } }

@media all, bookshop { .c-content-beside-video { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content; grid-column-gap: 3rem; grid-row-gap: 20px; justify-items: left; grid-template-areas: "content-area  video" "content-area  video"; } .c-content-beside-video--right { justify-items: left; grid-template-areas: "video  content-area" "video  content-area"; } }

@media all and (max-width: 1000px), bookshop and (max-width: 1000px) { .c-content-beside-video { grid-template-areas: "video video" "content-area content-area"; } }

@media all, bookshop { .c-content-beside-video .c-paragraph strong { font-size: var(--s-16-24); } .c-content-beside-video__video_wrapper { width: 100%; position: relative; padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ grid-area: video; height: 0; } .c-content-beside-video__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-content-beside-video { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content; grid-column-gap: var(--s-100-166); grid-row-gap: 20px; justify-items: left; grid-template-areas: "content-area  video" "content-area  video"; } .c-content-beside-video--right { justify-items: left; grid-template-areas: "video  content-area" "video  content-area"; } }

@media all and (max-width: 1000px), bookshop and (max-width: 1000px) { .c-content-beside-video { grid-template-areas: "video video" "content-area content-area"; } }

@media all, bookshop { .c-content-beside-video .c-paragraph strong { font-size: var(--s-16-24); } .c-content-beside-video__video_wrapper { width: 100%; position: relative; padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ grid-area: video; height: 0; } .c-content-beside-video__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-sections-dual-column { --left-column: 1fr; --right-column: 1fr; position: relative; margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: var(--left-column) var(--right-column); grid-template-areas: "left-column right-column"; gap: 0 var(--s-30-100); } .c-sections-dual-column--swap { grid-template-areas: "right-column left-column"; } .c-sections-dual-column__left { grid-area: left-column; display: grid; grid-template-rows: auto; align-content: start; } .c-sections-dual-column__left * { grid-area: unset; } .c-sections-dual-column__right { grid-template-rows: auto; grid-area: right-column; align-content: start; display: grid; } .c-sections-dual-column__right * { grid-area: unset; } .c-sections-dual-column .c-generic-emphasis-paragraph { width: 16ch; } .c-sections-dual-column .c-generic-image { margin: var(--s-20-50) 0 0; } }

@media all and (max-width: 800px) { .c-sections-dual-column { grid-template-columns: 1fr; grid-template-areas: "right-column"  "left-column"; } .c-sections-dual-column.c-sections-dual-column--mobile-swap { grid-template-areas: "left-column" "right-column"; } .c-sections-dual-column .c-generic-emphasis-paragraph { width: 100%; } .c-sections-dual-column .c-generic-image { top: 0; margin-bottom: 0; } }

@media all, bookshop { .c-full-bleed-image { --Small: 20vh; --Medium: 35vh; --Large: 50vh; --X-Large: 90vh; --height: var(--Small); } .c-full-bleed-image__image { width: 100%; max-height: var(--height); height: auto; object-fit: cover; display: block; } .c-heading { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); } .c-hero-title-block { grid-area: iframe-video; margin: 0 auto; max-width: var(--page-max-width); width: var(--percent-max-width); display: grid; grid-template-columns: 1fr; grid-template-rows: max-content; grid-row-gap: 40px; justify-items: var(--align-content-block); justify-items: center; grid-template-areas: "large-heading" "paragraph" "buttons"; } .c-hero-title-block--align-left { justify-items: left; } .c-hero-title-block--align-right { justify-items: right; } .c-hero-title-block--align-center { justify-items: center; } .c-hero-title-block .c-paragraph { max-width: 680px; } }

@media all and (max-width: var(--content-max-width)) { .c-hero-title-block { padding: 50px 5vw 0 5vw; } }

@media all and (max-width: 1000px) { .c-hero-title-block { justify-items: left; grid-template-areas: "large-heading  large-heading   large-heading" "paragraph      paragraph       ." "buttons        buttons         buttons"; } .c-hero-title-block .c-paragraph, .c-hero-title-block h1, .c-hero-title-block h2, .c-hero-title-block h3, .c-hero-title-block h4, .c-hero-title-block h5 { text-align: left; } }

@media all, bookshop { .c-hero-video-block { margin: 0 auto; max-width: calc(var(--page-max-width) + 300px); padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(1, 1fr); } .c-hero-video-block > [data-svelte-slab] { display: none; } .c-hero-video-block__primary-image { grid-area: main-image; position: relative; align-self: end; bottom: -69px; width: 100%; grid-column: 1 / 6; grid-row: 1 / -1; z-index: 11; } .c-hero-video-block__secondary-image { grid-area: secondary-image; position: relative; z-index: 999; align-self: end; width: 100%; grid-column: 11 / -1; grid-row: -2 / -1; } .c-hero-video-block__content { background-color: var(--link); color: var(--link-hover); padding: var(--s-35-100); font-size: var(--s-30-42); } .c-hero-video-block__content-wrapper { z-index: 11; position: relative; pointer-events: none; grid-area: content; grid-column: 7 / -1; grid-row: 1 / -1; } .c-hero-video-block .c-iframe-video { grid-column: 2 / -2; grid-row: 1 / -1; position: relative; z-index: 1; translate: translateY(0px); } .c-hero-video-block--cont .c-hero-video-block__content, .c-hero-video-block--cont-pri .c-hero-video-block__content { top: -78px; } .c-hero-video-block--cont-sec .c-iframe-video, .c-hero-video-block--cont .c-iframe-video, .c-hero-video-block--sec .c-iframe-video { grid-column: 1 / -2; } .c-hero-video-block--none .c-iframe-video { grid-column: 1 / -1; } }

@media all and (max-width: 900px) { .c-hero-video-block__content-wrapper { grid-column: 4 / -1; } .c-hero-video-block__primary-image { display: none; } .c-hero-video-block__secondary-image { display: none; } .c-hero-video-block .c-iframe-video { grid-column: 1 / -1; } }

@media all and (max-width: 600px) { .c-hero-video-block { grid-template-rows: auto 56.25vw; } .c-hero-video-block__content { top: 0; } .c-hero-video-block__content-wrapper { grid-column: 1 / -1; grid-row: 1 / 2; } .c-hero-video-block .c-iframe-video { grid-row: 2 / -1; } }

@media all, bookshop { .c-sections-icon-cards { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--s-400-500), 1fr)); grid-gap: 30px; } .c-img-bubble-block { display: grid; grid-template-columns: auto; gap: 40px 0px; padding: 30px; place-self: center; place-content: center; width: 100vw; overflow-x: hidden; } .c-img-bubble-block__bubble { border-radius: 50%; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.2); grid-column: span 2; object-fit: cover; --bubble-size: var(--s-50at500-100at800); width: var(--bubble-size); height: var(--bubble-size); } .c-img-bubble-block__bubble-wrapper { display: grid; grid-template-columns: repeat(60, var(--s-85at500-170at800)); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; gap: 40px 0px; padding: 30px; } .c-img-bubble-block__bubble-wrapper > img:nth-child(2) { grid-row: 3 / 4; } .c-listings-block { --component-width: 1200px; } .c-listings-block .c-cool-list-things { margin: 0 auto; max-width: var(--component-width); width: var(--percent-max-width); } .c-listings-block .c-hero-title-block { max-width: var(--component-width); } .c-listings-block .c-hero-title-block .c-large-heading { width: 50vw; } .c-main-video { --video-width: 100vw; --max-width: 100vw; } .c-main-video__video { display: block; margin: 0 auto; width: var(--video-width); height: calc(0.5625 * var(--video-width)); max-height: 900px; width: var(--page-max-width); max-width: var(--max-width); } }

@media all and (min-width: 900px) { .c-main-video { --video-width: 90vw; --max-width: var(--percent-max-width); } }

@media all, bookshop { .c-main-video { --video-width: 100vw; --max-width: 100vw; } .c-main-video__video { display: block; margin: 0 auto; width: var(--video-width); height: calc(0.5625 * var(--video-width)); max-height: 900px; width: var(--page-max-width); max-width: var(--max-width); } }

@media all and (min-width: 900px) { .c-main-video { --video-width: 90vw; --max-width: var(--percent-max-width); } }

@media all, bookshop { .c-multi-column-block { width: var(--page-max-width); max-width: var(--percent-max-width); margin: 0 auto; column-gap: var(--s-40-80); column-width: 40ch; } .c-multi-column-block h1, .c-multi-column-block h2, .c-multi-column-block h3, .c-multi-column-block h4, .c-multi-column-block h5, .c-multi-column-block h6 { column-rule: all; } .c-multi-column-block p:first-of-type { margin-top: 0; } .c-paralax-hero { margin: 0 auto; max-width: calc(var(--page-max-width) + 300px); padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(1, 1fr); } .c-paralax-hero > [data-svelte-slab] { display: none; } .c-paralax-hero__primary-image { grid-area: main-image; position: relative; align-self: end; bottom: -69px; width: 100%; grid-column: 1 / 6; grid-row: 1 / -1; z-index: 11; } .c-paralax-hero__secondary-image { grid-area: secondary-image; position: relative; z-index: 999; align-self: end; width: 100%; grid-column: 11 / -1; grid-row: -2 / -1; } .c-paralax-hero__content { background-color: var(--link); color: var(--link-hover); padding: var(--s-35-100); font-size: var(--s-30-42); } .c-paralax-hero__content-wrapper { z-index: 11; position: relative; pointer-events: none; grid-area: content; grid-column: 7 / -1; grid-row: 1 / -1; } .c-paralax-hero .c-iframe-video, .c-paralax-hero .c-paralax-hero__main-image { grid-column: 2 / -2; grid-row: 1 / -1; position: relative; z-index: 1; translate: translateY(0px); } .c-paralax-hero .c-paralax-hero__main-image { width: 100%; height: 100%; max-height: 750px; object-fit: cover; } .c-paralax-hero--cont .c-paralax-hero__content, .c-paralax-hero--cont-pri .c-paralax-hero__content { top: -78px; } .c-paralax-hero--cont-sec .c-iframe-video, .c-paralax-hero--cont .c-iframe-video, .c-paralax-hero--sec .c-iframe-video { grid-column: 1 / -2; } .c-paralax-hero--none .c-iframe-video { grid-column: 1 / -1; } }

@media all and (max-width: 900px) { .c-paralax-hero__content-wrapper { grid-column: 4 / -1; } .c-paralax-hero__primary-image { display: none; } .c-paralax-hero__secondary-image { display: none; } .c-paralax-hero .c-iframe-video { grid-column: 1 / -1; } }

@media all and (max-width: 600px) { .c-paralax-hero { grid-template-rows: auto 56.25vw; } .c-paralax-hero__content { top: 0; } .c-paralax-hero__content-wrapper { grid-column: 1 / -1; grid-row: 1 / 2; } .c-paralax-hero .c-iframe-video { grid-row: 2 / -1; } }

@media all, bookshop { .c-program-content-block { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-column-gap: var(--s-0-133); grid-row-gap: 0; justify-items: left; grid-template-areas: "status" "content-area" "self-image"; } .c-program-content-block .c-status-card { margin: 0 0 var(--s-32-64) 0; } .c-program-content-block .c-paragraph :where(h2, h3, h4, h5, h6) { font-size: var(--s-16-24); } .c-program-content-block__image-wrapper { grid-area: self-image; } .c-program-content-block__image { display: none; } }

@media all and (min-width: 1200px), bookshop and (min-width: 1200px) { .c-program-content-block { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "status        self-image" "content-area  self-image"; } .c-program-content-block--right { grid-template-areas: "self-image status" "self-image content-area"; } .c-program-content-block__image { display: unset; height: 100%; width: 100%; object-fit: cover; } }

@media all, bookshop { .c-ribbon { margin: 0; padding: 0; overflow-x: hidden; } .c-ribbon__box { position: relative; display: inline-block; width: 100%; margin: 0; padding: 0; } .c-ribbon__text { color: var(--link); font-size: var(--s-28-100); font-weight: 600; white-space: nowrap; margin: 0; padding: 0; letter-spacing: -0.04em; } .c-ribbon__description { font-size: var(--s-18-32); padding-left: var(--s-5-18); line-height: 80%; } .c-ribbon__text, .c-ribbon__description { margin: 0 auto; width: var(--page-max-width); max-width: var(--percent-max-width); } .c-ribbon__text::before, .c-ribbon__text::after, .c-ribbon__description::before, .c-ribbon__description::after { color: var(--link); filter: opacity(40%) brightness(90%); } .c-ribbon__text::before, .c-ribbon__description::before { content: attr(data-ribbon-left); display: inline-block; width: 300vw; text-align: right; margin-left: -300vw; } .c-ribbon__text::after, .c-ribbon__description::after { content: attr(data-ribbon-right); } .c-student-success-stories { max-width: var(--percent-max-width); width: var(--page-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "quote-carousel"; } .c-student-success-stories__aside-content { display: none; grid-area: aside-content; } }

@media all and (min-width: 1100px) { .c-student-success-stories { grid-template-columns: 228px 1fr minmax(300px, 1067px); grid-template-rows: 1fr; grid-gap: 30px; grid-template-areas: "aside-content . quote-carousel"; } .c-student-success-stories__aside-content { display: unset; align-self: center; } }

@media all, bookshop { .c-slider-fav-game { --translate-x: 0; position: relative; } .c-slider-fav-game__slider { transition: transform 0.2s ease-in-out; transform: translateX(calc(var(--translate-x) * -1px)); padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-columns: repeat(auto-fill, 160px); gap: 40px; } .c-slider-fav-game__slider-wrapper { overflow: hidden; margin: 0 auto; max-width: var(--page-max-width); width: calc(var(--percent-max-width) - 40px); } .c-slider-fav-game__slider__item { width: 160px; } .c-slider-fav-game__slider__item__wrapper { display: grid; gap: 1rem 5rem; grid-template-columns: 1fr; } .c-slider-fav-game button { height: 100%; } .c-slider-fav-game__left { transform: scaleX(-1); background: transparent; border: none; cursor: pointer; width: var(--s-50-70); position: absolute; top: 0; left: var(--s-0-50vw); } .c-slider-fav-game__left svg { fill: var(--text-alt); } .c-slider-fav-game__right { position: absolute; top: 0; right: var(--s-0-50vw); background: transparent; border: none; cursor: pointer; width: var(--s-50-70); } .c-slider-fav-game__right svg { fill: var(--text-alt); } .resize-animation-stopper * { animation: none !important; transition: none !important; } .c-game-image-rivals__image { width: 100%; } .c-slider-content-rivals__header { font-weight: 700; font-size: var(--s-30-70); color: var(--text-alt); } .c-slider-content-rivals__subheader { color: var(--text-alt); font-weight: 700; font-size: var(--s-25-30); } .c-slider-content-rivals__user-list { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .c-slider-content-rivals__user { display: flex; align-items: center; gap: 20px; } .c-slider-content-rivals__user__avatar { width: 64px; height: 64px; border-radius: 50%; } .c-slider-content-rivals__user__link { color: var(--text); font-size: var(--s-20-25); font-weight: 500; } .c-slider-feature-video { overflow: hidden; --translate-x: 0; position: relative; } .c-slider-feature-video__slider { transition: transform 0.5s ease-in-out; transform: translateX(calc(var(--translate-x) * -1vw)); padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: 1fr; } .c-slider-feature-video__slide { width: 100vw; } .c-slider-feature-video__slide__wrapper { margin: 0 auto; max-width: var(--page-max-width); width: calc(var(--percent-max-width) - 40px); display: grid; gap: 1rem 5rem; grid-template-columns: 1fr; } }

@media all and (min-width: 800px) { .c-slider-feature-video__slide__wrapper { grid-template-columns: 1fr 1fr; } }

@media all, bookshop { .c-slider-feature-video button { height: 100%; } .c-slider-feature-video__left { transform: scaleX(-1); background: transparent; border: none; cursor: pointer; width: var(--s-50-70); position: absolute; top: 0; left: var(--s-0-50vw); } .c-slider-feature-video__left svg { fill: var(--text-alt); } .c-slider-feature-video__right { position: absolute; top: 0; right: var(--s-0-50vw); background: transparent; border: none; cursor: pointer; width: var(--s-50-70); } .c-slider-feature-video__right svg { fill: var(--text-alt); } .resize-animation-stopper * { animation: none !important; transition: none !important; } .c-slider-video-rivals { padding: 1rem 1rem 0 0; } .c-slider-video-rivals__video-wrapper { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .c-slider-video-rivals__video-wrapper:hover > .c-slider-video-rivals__comment { transform: translateY(-2rem); } .c-slider-video-rivals__video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .c-slider-video-rivals__comment { transition: transform 0.5s ease; display: grid; position: absolute; top: -1rem; right: -1rem; z-index: 1; background: white; color: var(--twitch-black-ops); padding: 0 1rem; grid-template-columns: auto auto; place-items: center; gap: 1rem; } .c-slider-video-rivals__comment__emoji { height: 2.6rem; } .u-step { position: relative; background-color: unset !important; overflow: hidden; --step-height: var(--s-330-460); } .u-step::before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: var(--step-height); background-color: var(--background); } .u-step-right-direction::before { left: unset; right: 0; } .u-step-small, .u-step-medium, .u-step-large, .u-step-x-small { height: var(--step-height); } .u-step-small.u-step-bleed, .u-step-medium.u-step-bleed, .u-step-large.u-step-bleed, .u-step-x-small.u-step-bleed { margin-top: calc(var(--step-height) * -1); } .u-step-height-large { --step-height: var(--s-330-460); } .u-step-height-small { --step-height: var(--s-24-40); } .u-step-height-default { --step-height: var(--s-48-160); } .u-step-none.u-step-bleed { height: var(--step-height); margin-top: calc(var(--step-height) * -1); } .u-step-x-small::before { width: 30%; } .u-step-small::before { width: 43%; } .u-step-medium::before { width: 67%; } .u-step-large::before { width: 73%; } .u-step-none::before { width: 100%; } }

@media all and (max-width: 750px), bookshop and (max-width: 750px) { .u-step-mobile-none::before { width: 100%; } }

.c-content-beside-video { grid-column-gap: 3rem; }