*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#caf880,#71ce7e 50%,#000714 50%);background-size:200% 200%;font-family:sans-serif;min-height:100vh;transition:background-position cubic-bezier(.165,.84,.44,1) .3s}body.light{background-position:0% 0%}body.dark{background-position:100% 100%}.container-alert{position:fixed;width:100%;height:100%;background:#00000080;z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;display:none}.container-alert .container{position:relative;background:var(--section-background-color);width:80%;max-width:550px;padding:30px;border-radius:15px;color:var(--section-text-color);display:flex;flex-direction:column;gap:15px}.container-alert .container button.close{position:absolute;top:20px;right:20px;display:block;-webkit-mask-image:url(../../../icons/x.svg);mask-image:url(../../../icons/x.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:var(--section-text-color);width:20px;aspect-ratio:1/1;cursor:pointer;outline:2px solid var(--section-text-color);outline-offset:2px}.container-alert .container button.close:focus-visible{background:color-mix(in srgb,var(--section-text-color) 100%,transparent 100%)}.container-alert .container h1{padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--section-text-color) 20%,transparent 100%)}.container-alert .container input[type=text]{padding:10px;width:100%;background:color-mix(in srgb,var(--section-text-color) 10%,transparent 100%);border:none;outline:none;color:var(--section-text-color);box-shadow:0 2px 0 var(--section-text-color);font-size:1em;margin-bottom:5px}.container-alert .container label.check{position:relative;cursor:pointer;display:flex;align-items:center;gap:5px;-webkit-user-select:none;user-select:none;margin-bottom:10px}.container-alert .container label.check input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container-alert .container label.check .checkmark{position:relative;height:17.5px;width:17.5px;background-color:color-mix(in srgb,var(--section-text-color) 20%,transparent 100%);border-radius:5.6px}.container-alert .container label.check input[type=checkbox]:checked~.checkmark{background-color:#adff2f}.container-alert .container label.check .checkmark:after{content:"";position:absolute;display:none}.container-alert .container label.check input[type=checkbox]:checked~.checkmark:after{display:block}.container-alert .container label.check .checkmark:after{left:6.3px;top:3.5px;width:3.5px;height:7px;border:solid black;border-width:0 2.1px 2.1px 0;transform:rotate(45deg)}.container-alert .container a{display:inline-block;color:var(--section-text-color);text-decoration:none;transition:outline-color cubic-bezier(.165,.84,.44,1) .3s;border-radius:5px;outline:2px solid transparent;outline-offset:5px}.container-alert .container a:focus-visible{outline-color:color-mix(in srgb,var(--section-text-color) 10%,transparent 100%)}.container-alert.open{display:grid;animation:appear .3s;animation-timing-function:cubic-bezier(.165,.84,.44,1)}.container-alert:not(.open).closing{animation:vanish .3s;animation-timing-function:cubic-bezier(.165,.84,.44,1)}@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes vanish{0%{opacity:1}to{opacity:0}}i.icon.github-icon{-webkit-mask-image:url(../../../icons/github.svg);mask-image:url(../../../icons/github.svg)}i.icon.twitch-icon{-webkit-mask-image:url(../../../icons/twitch.svg);mask-image:url(../../../icons/twitch.svg)}i.icon.instagram-icon{-webkit-mask-image:url(../../../icons/instagram.svg);mask-image:url(../../../icons/instagram.svg)}i.icon.youtube-icon{-webkit-mask-image:url(../../../icons/youtube.svg);mask-image:url(../../../icons/youtube.svg)}i.icon.qrcode-icon{-webkit-mask-image:url(../../../icons/qrcode.svg);mask-image:url(../../../icons/qrcode.svg)}i.icon.dark-icon{-webkit-mask-image:url(../../../icons/moon.svg);mask-image:url(../../../icons/moon.svg)}i.icon.light-icon{-webkit-mask-image:url(../../../icons/sun.svg);mask-image:url(../../../icons/sun.svg)}i.icon.paypal-icon{-webkit-mask-image:url(../../../icons/paypal.svg);mask-image:url(../../../icons/paypal.svg)}i.icon{display:block;height:1em;aspect-ratio:1/1;background:#000;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transition:background-color cubic-bezier(.165,.84,.44,1) .3s}:root{--section-background-color: white;--section-text-color: black}body.dark{--section-background-color: rgb(10, 17, 30);--section-text-color: rgb(190, 197, 220)}body.dark i.icon{background-color:#bec5dc}body.dark .button-group>button{background:transparent;color:#bec5dc;border-color:#bec5dc}body.dark .button-group>button:hover,body.dark .button-group>button:focus{background:#bec5dc;color:#0a111e}body.dark .button-group>button:focus{outline-color:#bec5dc}body.dark section:nth-child(1)>.picture .qr{border:2px solid rgb(190,197,220);background:#0a111e}body.dark section:nth-child(1)>.picture .qr:before{background-color:#bec5dc}body.dark section:nth-child(1)>.controls>button{border:2px solid rgb(190,197,220);background:transparent}body.dark section:nth-child(1)>.controls>button:hover,body.dark section:nth-child(1)>.controls>button:focus{outline-color:#bec5dc33}body.dark section:nth-child(1)>.controls>button.active{background-color:#bec5dc}body.dark section:nth-child(1)>.controls>button.active i{background-color:#0a111e}body.dark section:nth-child(1)>.controls>button i{background-color:#bec5dc}body.dark section{background:var(--section-background-color);color:var(--section-text-color)}body.dark section:nth-child(1)>ul.info{color:#bec5dc80}body.dark section:nth-child(1)>ul.social-media>li>a:focus-visible{outline-color:#bec5dc}body.dark section:nth-child(2)>div>a{color:#bec5dc80}body.dark section:nth-child(2)>div>a:focus-visible{outline-color:#bec5dc80}main{width:50%;max-width:850px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:50px 0}section{background:var(--section-background-color);padding:30px;border-radius:10px;position:relative;overflow:hidden;font-size:1em;transition:background-color cubic-bezier(.165,.84,.44,1) .3s}section:nth-child(1)>.controls{display:flex;gap:10px;position:absolute;justify-content:end;width:calc(100% - 50px);left:25px;top:25px;z-index:1}section:nth-child(1)>.controls>button{width:40px;aspect-ratio:1/1;border-radius:50%;border:2px solid #000;display:grid;place-items:center;transition:background-color cubic-bezier(.165,.84,.44,1) .3s,outline-color cubic-bezier(.165,.84,.44,1) .3s;background:#fff;outline:none;cursor:pointer;outline:2.5px solid transparent;outline-offset:1.5px}section:nth-child(1)>.controls>button i{height:24px;display:inline-block;aspect-ratio:1/1;background:#000;-webkit-mask-size:cover;mask-size:cover;transition:background-color cubic-bezier(.165,.84,.44,1) .3s}section:nth-child(1)>.controls>button:focus{outline-color:#000000e6}section:nth-child(1)>.controls>button.active{background:#000}section:nth-child(1)>.controls>button.active i{background:#fff}section:nth-child(1)>.picture{width:165px;aspect-ratio:1/1;margin-bottom:15px;background:url(../../../fox.webp);background-position:center;background-size:cover;border-radius:50%;transition:cubic-bezier(.165,.84,.44,1) 1s transform;transform-style:preserve-3d}section:nth-child(1)>.picture~h1{font-size:2em;margin-bottom:15px}section:nth-child(1)>.picture>.qr{background:#fff;height:100%;width:100%;backface-visibility:hidden;transform:rotateY(180deg);border:2px solid black;border-radius:100%;display:grid;place-items:center;transition:background-color cubic-bezier(.165,.84,.44,1) .3s,border-color cubic-bezier(.165,.84,.44,1) .3s}section:nth-child(1)>.picture>.qr:before{content:"";width:60%;aspect-ratio:1/1;background-color:#000;-webkit-mask-image:url(../../../site-qrcode.svg);mask-image:url(../../../site-qrcode.svg);-webkit-mask-size:cover;mask-size:cover;display:block;transition:background-color cubic-bezier(.165,.84,.44,1) .3s}section:nth-child(1)>.picture.flip{transform:rotateY(180deg)}section:nth-child(1)>ul.info{display:flex;list-style:none;gap:5px;color:#323232;-webkit-user-select:none;user-select:none;margin-bottom:15px;align-items:center;font-size:.9em}section:nth-child(1)>ul.social-media{display:flex;list-style:none;gap:10px;-webkit-user-select:none;user-select:none;margin-bottom:15px;font-size:1em;align-items:center}section:nth-child(1)>ul.social-media:before{content:"";height:1.2em;aspect-ratio:1/1;background:url(../../../icons/verified.svg);background-size:cover}section:nth-child(1)>ul.social-media li>a{outline:2px solid transparent;outline-offset:3px;border-radius:3px;display:inline-block}section:nth-child(1)>ul.social-media li>a:focus-visible{outline-color:#000}.button-group{display:flex;gap:15px}.button-group button{padding:13px 20px;font-size:.9em;cursor:pointer;width:100%;border:1px solid #000;background:#fff;border-radius:5px;transition:background-color cubic-bezier(.165,.84,.44,1) .3s,border-color cubic-bezier(.165,.84,.44,1) .3s,color cubic-bezier(.165,.84,.44,1) .3s,outline-color cubic-bezier(.165,.84,.44,1) .3s;outline:2px solid transparent;outline-offset:3px}.button-group button:hover,.button-group button:focus{background:#000;color:#fff}.button-group button:focus{outline-color:#000000e6}section:nth-child(2){display:flex;flex-direction:column;gap:25px}section:nth-child(2) h1{font-size:1.2em;transition:color cubic-bezier(.165,.84,.44,1) .3s}section:nth-child(2)>div>header{display:flex;align-items:center;gap:5px;font-size:1em;margin-bottom:5px;transition:color cubic-bezier(.165,.84,.44,1) .3s}section:nth-child(2)>div>header i{display:inline-block;height:1em;aspect-ratio:1/1;background-size:contain;background-position:center;background-repeat:no-repeat;width:30px}section:nth-child(2)>div>header span{font-weight:700}section:nth-child(2)>div>a{margin-left:35px;color:green;text-decoration:none;transition:color cubic-bezier(.165,.84,.44,1) .3s,outline-color cubic-bezier(.165,.84,.44,1) .3s;border-radius:5px;outline:2px solid transparent;outline-offset:5px}section:nth-child(2)>div>a:focus-visible{outline-color:green}@media (width <= 1300px){main{width:80%}}@media (width <= 600px){main{width:85%}}@media (width <= 450px){main>section>.controls{justify-content:start!important}}