@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,700&display=swap);
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}body{background-color:#111213;color:#fff;font-family:"Roboto",sans-serif;scroll-behavior:smooth}.wrapper{overflow:hidden;padding:1vh 2vw;height:99vh;display:grid;align-content:center;justify-content:center;grid-template-rows:auto auto;grid-template-columns:1fr 80vw;grid-template-areas:"label-slider slider" "label-slider desc";overflow:hidden}@media all and (min-width: 1200px){.wrapper{grid-template-columns:1fr 80vw}}@media all and (max-width: 1200px){.wrapper{grid-template-columns:1fr 70vw}}@media all and (max-aspect-ratio: 1/1){.wrapper{grid-template-rows:40vh auto 1fr;grid-template-columns:auto;grid-template-areas:"slider" "desc" "label-slider"}}.desc{grid-area:desc;align-self:center;justify-self:center;text-align:center;max-width:70%;padding:1rem;background:rgba(255,255,255,.07);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(8.5px);-webkit-backdrop-filter:blur(8.5px);border:1px solid rgba(255,255,255,.07)}@media all and (max-aspect-ratio: 1/1){.desc{max-width:90vw}}.labels{grid-area:label-slider;height:100%;display:flex;flex-direction:column;padding:0 2rem;overflow-y:auto;min-height:10px;background-color:#111213}@media all and (max-aspect-ratio: 1/1){.labels{margin:1rem;max-width:90vw;min-height:10px;overflow:scroll}}.slide{grid-area:slider}input{grid-area:radio}label{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;width:100%;padding:1rem;margin:1rem 0;background:rgba(255,255,255,.07);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(8.5px);-webkit-backdrop-filter:blur(8.5px);border:1px solid rgba(255,255,255,.07);transition:all .3 ease;cursor:pointer}label:hover{cursor:pointer;transform:scale(1.2);background:rgba(255,255,255,.15);position:relative;z-index:2;transition:all .3 ease}label:hover .control{color:#29b9f0;transition:all .3 ease}label:active,label.active{cursor:pointer;transform:scale(1.2);background:rgba(255,255,255,.15);position:relative;z-index:2;transition:all .3 ease}label:active .control,label.active .control{color:#2f71e8;transition:all .3 ease}input:checked~labels.label{background-color:aqua}.labels::-webkit-scrollbar{width:.5rem}.labels::-webkit-scrollbar-track{background:rgba(41,185,240,.1);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(8.5px);-webkit-backdrop-filter:blur(8.5px);border:1px solid rgba(255,255,255,.07)}.labels::-webkit-scrollbar-thumb{background:rgba(41,185,240,.3);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(8.5px);-webkit-backdrop-filter:blur(8.5px);border:1px solid rgba(255,255,255,.1)}.labels::-webkit-scrollbar-thumb:hover{background:rgba(41,185,240,.4);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.3);backdrop-filter:blur(8.5px);-webkit-backdrop-filter:blur(8.5px);border:1px solid rgba(255,255,255,.1)}:root{--aspect-ratio: 16/9}.slide>:first-child{width:100%}.slide>img{height:auto}.slide{position:relative}.slide::before{content:"";display:block;padding-bottom:calc(100%/(var(--aspect-ratio)))}.slide>:first-child{position:absolute;top:0;left:0}.desc{position:relative}input:checked+.slide,input:checked+.slide+.desc{transition:opacity .3s;opacity:1;display:block}input:not(:checked)+.slide,input:not(:checked)+.slide+.desc{display:none;transition:all .3s;opacity:0}a{text-decoration:none;color:#29b9f0}a:hover,a:focus{text-decoration:none;cursor:pointer}.displaynone{display:none;margin-left:-100vw}
