footer,header,main{container-type:inline-size}header{container-name:header}main{container-name:main}footer{container-name:footer}@container header (min-width: 770px){.menu-btn{display:none}body .nav{align-items:flex-end;display:flex;justify-content:flex-start;min-height:79px;width:min(1000px,100% - 2rem)}body .nav .navbar{align-self:flex-start;padding:1rem 2.5rem .5rem 0}body a.menu__link:is(:focus-visible,:hover),body button.menu__link:is(:focus-visible,:hover){background-color:transparent}.nav div.menu{animation:none;border-radius:0;box-shadow:none;min-height:69px;overflow:visible;padding:1rem 0 var(--padding-outline) var(--padding-outline);position:static;transform:none;width:100%}.nav div.menu .menu-list{align-items:flex-end;display:flex;flex:2;flex-wrap:wrap;gap:30px;justify-content:flex-start;width:-moz-fit-content;width:fit-content}.nav div.menu .menu__item{display:flex;justify-content:center}.nav div.menu .menu__link{line-height:inherit;padding:.5rem .5rem 0;position:relative;text-wrap:nowrap}.nav div.menu .menu__link:after{background-color:var(--c-orange);border-radius:2px;content:"";height:0;inset:auto 0 0;position:absolute;transition:height .3s ease-in-out}.nav div.menu .menu__link:is(:focus-visible,:hover):after{height:4px}.nav div.menu .menu-portfolio{position:relative}.nav div.menu .menu-portfolio .submenu{background-color:var(--c-white);border:2px solid var(--c-black);border-radius:0 0 8px 8px;border-top:2px solid transparent;box-shadow:8px 8px var(--c-black);padding-block:1rem var(--padding-outline);position:absolute;top:70%;z-index:-1}.nav div.menu .menu-portfolio .submenu>*{padding:.5rem}.nav div.menu .menu-portfolio .submenu a{padding:0}body .lang-nav{--first-icon-open:translate(0,var(--icon-offset));--second-icon-closed:translate(0,calc(var(--icon-offset)*-1));--third-icon-closed:translate(0,calc(var(--icon-offset)*-2));align-items:flex-end;height:47px;justify-content:end;margin:0 0 0 auto;max-width:47px;padding:0}body .lang-nav:is(:focus-visible,:hover,:focus-within){background-color:transparent}body .lang-nav:is(:focus-visible,:hover,:focus-within) .lang-nav__btn{background-color:var(--c-white)}body .lang-nav:is(:focus-visible,:hover) .lang-nav__btn{background-color:var(--c-black);fill:var(--c-white)}body .lang-nav__btn{border:var(--border);transition:border .3s ease-in-out,background-color .3s ease-in-out,fill .3s ease-in-out}body .lang-nav__btn:is(:focus-visible,:hover){outline-color:var(--c-black)}body .lang-nav ul li:first-child{background-color:var(--c-saturated)}body .lang-nav ul li:nth-child(2){background-color:var(--c-yellow)}body .lang-nav ul li:nth-child(3){background-color:var(--c-orange)}body .lang-nav ul{flex-direction:column}body .lang-nav__item{border:2px solid transparent;text-align:center}body .lang-nav__item[aria-selected=true]{border:var(--border);color:var(--c-black)}body .lang-nav[aria-expanded=true] .lang-nav__btn{background-color:var(--c-black);border-color:transparent;fill:var(--c-white)}body .lang-nav[aria-expanded=true] .lang-nav__container{width:var(--icon-size)}body .hero.wrapper:where(:has(.hero__text)){flex-direction:row}body .hero__text{align-self:stretch;display:grid;max-width:540px}body .hero__text h1{align-self:end;line-height:1.1;max-width:unset;text-wrap:nowrap}body .hero__img{max-width:46%;transform:translate(0)}body .hero__img .outline{overflow:hidden;transform:translate(-8%,-8%);width:128%}body .hero__img .outline path{stroke-width:1;transform-origin:45% 100%}body .hero .lines:not(.gallery__lines){display:none}body .hero:where(:has(.btn)){padding-block-end:clamp(50px,5.5vw,90px)}body .hero .btn{align-self:end;display:grid;justify-self:end}}@container header (min-width: 1000px){body .nav{align-items:flex-end;min-width:-moz-fit-content;min-width:fit-content}body .nav .logo{padding-inline-start:0}body .nav .logo,body .nav .logo>img{width:70px}body .nav .navbar{padding-inline-start:0}body .nav .menu{padding:0 0 var(--padding-outline) var(--padding-outline)}body .lang-nav{align-self:flex-end}body .lang-nav[aria-expanded=true]{max-width:var(--max-width)}body .lang-nav ul{--first-icon-open:translateX(calc(var(--icon-offset)*-1));--second-icon-closed:translateX(calc(var(--icon-offset)*1));--third-icon-closed:translateX(calc(var(--icon-offset)*2));flex-direction:row-reverse}body .hero .btn{align-self:center;margin-block-start:3rem}}@container main (min-width: 770px){body .about-me__container{min-height:350px}body .section.skills .wrapper p{margin-inline:unset}body .skills .circle{transform:translate(40vw,20%)}body .skills__container{align-items:center;grid-template-columns:50% 50%}body .skills__container .window{margin-block-start:0}body .animated-elements:not(.digital){--cat-size:300px}body .animated-elements:not(.digital) .cat{transform:translateY(125px)}}@container main (min-width: 850px){body .portfolio .portfolio-gallery{padding-block-end:76px}body .portfolio .portfolio-gallery__card .data{scale:1}body .portfolio .portfolio-gallery__card:first-child{transform:rotate(-20deg) translateY(60px)}body .portfolio .portfolio-gallery__card:first-child:is(:hover,:focus-visible){transform:rotate(-20deg) translate(-2em,-2em)}body .portfolio .portfolio-gallery__card:nth-child(2){transform:rotate(-10deg) translateY(15px)}body .portfolio .portfolio-gallery__card:nth-child(2):is(:hover,:focus-visible){transform:rotate(-10deg) translate(-2em,-2em)}body .portfolio .portfolio-gallery__card:nth-child(3):is(:hover,:focus-visible){transform:rotate(0deg) translate(-2em,-2em)}body .portfolio .portfolio-gallery__card:nth-child(4){transform:rotate(10deg) translateY(15px)}body .portfolio .portfolio-gallery__card:nth-child(4):is(:hover,:focus-visible){transform:rotate(10deg) translate(-2em,-2em)}body .portfolio .portfolio-gallery__card:nth-child(5){transform:rotate(20deg) translateY(60px)}body .portfolio .portfolio-gallery__card:nth-child(5):is(:hover,:focus-visible){transform:rotate(20deg) translate(2em,-2em)}}@container main (min-width: 1000px){body .about-me h3{display:flex;font-size:3rem;font-weight:500;height:auto;justify-content:space-between;overflow:initial;padding-inline-end:100px;position:relative;width:auto}body .about-me h3>:not(:last-child){opacity:0;transform:translateY(30px)}body .about-me h3 span[lang=pl]{color:hsl(from var(--c-black) h s l/.6);rotate:-10deg}body .about-me h3 span[lang=fr-FR]{rotate:10deg}body .about-me h3 span[lang=ja-Hira]{font-family:"MS Gothic",Arial,sans-serif;font-size:2.25rem;height:0;inset:9rem -.5rem auto auto;letter-spacing:.25em;overflow:hidden;position:absolute;word-break:keep-all;writing-mode:vertical-rl}body .about-me.animate h3 span:not(:last-child){animation:pop-up .4s ease-out forwards}body .about-me.animate h3 span:first-child{animation-delay:0s}body .about-me.animate h3 span:nth-child(2){animation-delay:.75s}body .about-me.animate h3 span:nth-child(3){animation-delay:1.5s}body .about-me.animate span[lang=ja-Hira]{animation:unroll 2s ease-out 2s forwards}body .about-me.animate text{animation:pop-up .4s ease-out 1s forwards}body .about-me.animate .about-me__frame{animation:path-length 4s ease-in-out forwards}@keyframes path-length{to{stroke-dasharray:1}}@keyframes pop-up{to{opacity:1;transform:translate(0)}}@keyframes unroll{to{height:800px}}body .about-me div.about-me__container{align-items:center;display:grid;grid-template-columns:1fr 57.5%;margin-block-start:0;max-width:1080px;width:90%}body .about-me__frame{display:block;grid-column:1/3;grid-row:1/2;height:100%;overflow:visible;stroke-dasharray:0 1;stroke-width:1;width:100%}body .about-me .about-me__text{padding:2rem}body .about-me__text{grid-column:2/3;grid-row:1/2;margin-inline:auto;max-width:100%}body .about-me__text p{min-width:100%}body .about-me .btn{display:none}body .about-me .widget{grid-column:1/2;grid-row:1/2;margin:100px auto 0 -20px}body .about-me .widget__avatar{width:100%}body .about-me .widget__text{display:none}body .portfolio:after{background:none;-webkit-mask-image:none;mask-image:none}body .portfolio .wrapper{position:relative}body .portfolio .wrapper:after{background:url(../assets/svg/dots-path-background.svg) no-repeat 50% 15px;content:"";height:100%;inset:0;margin-inline:auto;position:absolute;width:clamp(995px,90%,1000px);z-index:-2}body .contact .wrapper{padding-block-end:0}body .contact>.wrapper:first-child{align-items:flex-start;display:flex;height:85vh}body .contact>.wrapper:first-child .window{align-self:center;margin:0}body .animated-elements:not(.digital){--cat-size:400px;height:auto}body .animated-elements:not(.digital) .sun{transform:translate(55vw,5%)}body .animated-elements:not(.digital) .cat{transform:translateY(160px)}}@container main (min-width: 1300px){body .skills .spark-1{transform:translate(34vw,-80%)}}@container main (min-width: 1700px){body .contact .sun{transform:translate(calc(55vw - 50%),5%)}}@container footer (min-width: 770px){footer p{text-align:center}}@container header (min-width: 1000px){body .hero__gallery{margin:150px auto 80px}}@container main (min-width: 1000px){body .gallery{margin-block-end:300px}}@container header (min-width: 770px){body.digital h1.hero__header{margin-inline-start:110px;max-width:700px}}@container main (min-width: 770px){body.digital .description{grid-template-rows:auto auto}body.digital .description p:last-child{margin-inline-start:auto}body.digital .digital-gallery{gap:4rem}}:root{--c-black:#181306;--c-white:#fffaeb;--c-green:#dce5c8;--c-yellow:#ffb433;--c-orange:#e07038;--c-saturated:#5ed499;--accent-font:"Playfair Display","Times New Roman",serif;--main-font:"Source Sans 3","Helvetica",sans-serif;--mono-font:"Cutive Mono",monospace;--border:2px solid var(--c-black);--border-radius:25px;--shadow:0 -10px 10px hsl(from var(--c-black) h s l/0.11);--padding-outline:6px;--icon-size:45px;--icon-border-radius:12px}@font-face{font-display:swap;font-family:"Source Sans 3";font-weight:400;src:url(../assets/fonts/Source_Sans_3/SourceSans3-Medium.woff2) format("woff2"),url(../assets/fonts/Source_Sans_3/SourceSans3-Medium.woff) format("woff")}@font-face{font-display:swap;font-family:"Source Sans 3";font-weight:700;src:url(../assets/fonts/Source_Sans_3/SourceSans3-Bold.woff2) format("woff2"),url(../assets/fonts/Source_Sans_3/SourceSans3-Bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Playfair Display";font-weight:400;src:url(../assets/fonts/Playfair_Display/PlayfairDisplay-Medium.woff2) format("woff2"),url(../assets/fonts/Playfair_Display/PlayfairDisplay-Medium.woff) format("woff")}@font-face{font-display:swap;font-family:"Playfair Display";font-weight:700;src:url(../assets/fonts/Playfair_Display/PlayfairDisplay-Bold.woff2) format("woff2"),url(../assets/fonts/Playfair_Display/PlayfairDisplay-Bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Cutive Mono";font-style:normal;font-weight:400;src:url(../assets/fonts/Cutive_Mono/cutivemono-regular-webfont.woff2) format("woff2"),url(../assets/fonts/Cutive_Mono/cutivemono-regular-webfont.woff) format("woff")}html{box-sizing:border-box;font-size:100%;scroll-behavior:smooth}body,html{overflow-x:clip}*{margin:0;padding:0}*,:after,:before{box-sizing:inherit}body{background-color:var(--c-white);color:var(--c-black);font-family:var(--main-font);font-size:clamp(1rem,.97vw + .773rem,1.5rem);line-height:1.5;min-height:100vh;overflow-y:scroll;width:100%}body :focus-visible,body:focus-within{outline-color:outline-clr(var(--c-white))}.preload *,.preload :after,.preload :before{animation-duration:0!important}img{display:block;height:auto;max-width:100%}footer,header,main{min-width:375px}.nav,header,section:not(.hero){width:100%}main :target{scroll-margin-block-start:3rem}.wrapper{margin-inline:auto}.wrapper:not(.nav){width:min(1000px,100% - 2rem)}:is(.about-me,.skills)>.wrapper{padding-block-end:clamp(50px,5.5vw,90px)}.about-me__container>*+*,:is(.about-me,.skills,.contact)>.wrapper>*+*{margin-block-start:clamp(50px,2vw,70px);margin-inline:auto}.portfolio{padding-block-end:clamp(70px,5.5vw,80px)}.portfolio .wrapper>*+*{margin-block-start:clamp(70px,5.5vw,80px);margin-inline:auto}svg.icon{height:34px;width:34px}button,input,select,textarea{font:inherit}.btn,h1,h2,h3{font-family:var(--accent-font);font-weight:700;text-wrap:balance}h1{font-size:clamp(2.5rem,6.788vw + .909rem,96px);font-weight:400;line-height:1.3}.section__header{padding-block-start:3em;position:relative;text-align:left}.section__header h2{display:inline-block;font-size:clamp(2.25rem,3.394vw + 1.455rem,4rem);line-height:1;position:relative}.section__header h2:after{background-image:linear-gradient(to left,var(--c-yellow) 10%,var(--c-orange) 100%);content:"";display:block;height:35%;position:absolute;transform:translateY(-.3em);width:calc(100% + .5em);z-index:-1}.btn,h3{font-size:clamp(1.5rem,.97vw + 1.273rem,2rem)}.about-me__text,.contact__metadata,.skills__text,p{max-width:55ch;overflow-wrap:break-word;text-wrap:pretty}ul{list-style:none;padding-inline-start:0}a{color:inherit;text-decoration:none}::-moz-selection{background-color:var(--c-orange);color:var(--c-white)}::selection{background-color:var(--c-orange);color:var(--c-white)}footer ::-moz-selection{background-color:var(--c-yellow)}footer ::selection{background-color:var(--c-yellow)}:focus-visible{outline:3px dashed;outline-offset:3px}.screen-reader-text{background-color:var(--c-black);color:var(--c-white);font-size:1.5rem;padding:1em;position:absolute;transform:translate(-9999px);z-index:100}.screen-reader-text:focus-visible{opacity:1;transform:translate(6px,6px)}.stt{bottom:2.5em;opacity:0;pointer-events:none;position:fixed;right:5%;transition:.5s;visibility:hidden;z-index:10}.stt.active{opacity:1;pointer-events:auto;visibility:visible}.nav{--animation-timing-function:linear(0,0.002 0.5%,0.008 1.1%,0.017 1.6%,0.031 2.2%,0.049 2.8%,0.07 3.4%,0.098 4.1%,0.129 4.8%,0.184 5.9%,0.257 7.2%,0.551 12.1%,0.671 14.2%,0.735 15.4%,0.789 16.5%,0.839 17.6%,0.881 18.6%,0.923 19.7%,0.957 20.7%,0.99 21.8%,1.019 22.9%,1.043 24%,1.063 25.1%,1.08 26.2%,1.094 27.4%,1.107 29%,1.114 30.7%,1.116 32.5%,1.112 34.5%,1.105 36.1%,1.095 37.9%,1.041 45.8%,1.018 49.9%,1.008 52.1%,1 54.4%,0.994 56.7%,0.99 59.1%,0.987 62.3%,0.987 65.9%,0.999 84.9%,1);--menu-item-height:5rem;--nav-closed:calc(var(--menu-item-height)*-9);--nav-opened:calc(var(--menu-item-height)*-1 + var(--padding-outline));position:relative}.nav .navbar{background-color:var(--c-white);display:flex;justify-content:space-between;padding:1rem 1rem .5rem;position:relative;z-index:99}.nav .logo,.nav .logo>img,.nav .menu-btn{width:55px}.nav .menu-btn{position:relative;z-index:100}.nav .menu-btn__burger,.nav .menu-btn__burger:after,.nav .menu-btn__burger:before{background-color:var(--c-black);border-radius:2px;height:2px;margin-inline:auto;transition:all .4s ease-in-out;width:40px}.nav .menu-btn__burger{display:block;position:relative}.nav .menu-btn__burger:after,.nav .menu-btn__burger:before{content:"";position:absolute}.nav .menu-btn__burger:before{transform:translate(-20px,-11px)}.nav .menu-btn__burger:after{transform:translate(-20px,11px)}.nav:has(.menu[aria-expanded=true]) .menu-btn>*{background:transparent;width:0}.nav:has(.menu[aria-expanded=true]) .menu-btn>:before{transform:translate(-20px) rotate(405deg)}.nav:has(.menu[aria-expanded=true]) .menu-btn>:after{transform:translate(-20px) rotate(-405deg)}.nav .lang-nav__link,.nav .menu__link{letter-spacing:.1em}.nav .menu{background:var(--c-white);border-radius:0 0 var(--border-radius) var(--border-radius);box-shadow:7px 12px var(--c-black);overflow:hidden;padding-block:var(--menu-item-height) var(--padding-outline);position:absolute;text-align:center;text-transform:lowercase;width:100vw;z-index:98}.nav .menu .menu-list{background-color:var(--c-white)}.nav .menu__link{display:block;font-size:1.25rem;line-height:2;padding:1rem}.nav .menu[aria-expanded=false]{animation:close-nav .65s forwards;display:none}.nav .menu[aria-expanded=true]{animation:open-nav .65s forwards;display:block}.nav .menu[aria-expanded=false],.nav .menu[aria-expanded=true]{animation-timing-function:var(--animation-timing-function)}.nav+.nav-overlay{backdrop-filter:blur(5px);inset:0;opacity:0;position:fixed;transition:visibility .2s ease-in-out,.2s ease-in-out;visibility:hidden;z-index:10}.nav:has(.menu[aria-expanded=true])+.nav-overlay{background-color:rgba(0,0,0,.8);opacity:1;visibility:visible}.lang-nav:is(:focus-visible,:hover),.menu__link:is(:focus-visible,:hover){background-color:hsl(from var(--c-orange) h s l/.5)}.lang-nav:is(:focus-visible,:hover) .lang-nav__btn,.menu__link:is(:focus-visible,:hover) .lang-nav__btn{background-color:#efb48f}button.menu__link{display:block;width:100%}button.menu__link span{display:inline-block;transition:transform .3s ease-in-out}.menu-list:has(.submenu[aria-expanded=true]) button.menu__link span{transform:rotate(90deg)}.submenu{max-height:0;overflow-y:clip;padding-block:var(--padding-outline);transition:max-height .3s ease-in-out}.submenu[aria-expanded=false]{animation:close-submenu .5s forwards;display:none}.submenu[aria-expanded=true]{animation:open-submenu .5s forwards;display:block}.submenu .menu__link{padding:.75rem .75rem .75rem 40%;text-align:left}.lang-nav{--slide-duration:0.25s;--delay:0.075s;--gap:8px;--icon-offset:calc(var(--icon-size) + var(--gap));--icon-count:4;--max-width:calc(var(--icon-size)*var(--icon-count) + var(--gap)*(var(--icon-count) - 1));--first-icon-open:translate(var(--icon-offset),0);--second-icon-closed:translate(calc(var(--icon-offset)*-1),0);--third-icon-closed:translate(calc(var(--icon-offset)*-2),0);cursor:pointer;display:flex;height:-moz-fit-content;height:fit-content;justify-content:center;padding-block:1rem}.lang-nav ul,.lang-nav__item{height:var(--icon-size);width:var(--icon-size)}.lang-nav__btn,.lang-nav__container{height:47px;width:47px}.lang-nav__container{align-items:center;display:inline-grid;transition:width var(--slide-duration) ease-out}.lang-nav__container>*{grid-column:1/1;grid-row:1/1}.lang-nav__btn{fill:var(--c-black);position:relative;transform:translateX(-1px);z-index:4}.lang-nav__btn:is(:focus-visible,:hover,:focus-within){outline-color:transparent}.lang-nav__btn svg{height:100%;padding:8px;width:100%}.lang-nav__btn,.lang-nav__item{background-color:var(--c-white);border-radius:var(--icon-border-radius)}.lang-nav ul{display:inline-flex;gap:var(--gap);transition:transform var(--slide-duration) ease-out;transition-delay:calc(var(--stagger-index)*var(--delay))}.lang-nav__item{border:var(--border);flex-shrink:0;line-height:1.7;pointer-events:none;transition:border .3s ease-in-out,background-color .3s ease-in-out,color .3s ease-in-out,transform var(--slide-duration) ease-out calc(var(--stagger-index)*var(--delay));-webkit-user-select:none;-moz-user-select:none;user-select:none}.lang-nav__item[aria-selected=true]{--stagger-index:1;background-color:var(--c-black);color:var(--c-white);font-weight:700;text-transform:uppercase;z-index:3}.lang-nav__item:nth-child(2){--stagger-index:2;z-index:2}.lang-nav__item:nth-child(3){--stagger-index:3}.lang-nav__item a{display:block;font-size:24px}.lang-nav__item:hover:not([aria-selected=true]){background-color:var(--c-black);border:var(--border);color:var(--c-white)}.lang-nav[aria-expanded=true] .lang-nav__container{width:var(--max-width)}.lang-nav[aria-expanded=true] ul{transform:var(--first-icon-open)}.lang-nav[aria-expanded=true] .lang-nav__item:not([aria-selected=true]) a{pointer-events:all}.lang-nav[aria-expanded=false] .lang-nav__container{transition-delay:calc(var(--slide-duration) + var(--delay)*3);width:var(--icon-size)}.lang-nav[aria-expanded=false] ul{--stagger-index:3;transform:translateX(0)}.lang-nav[aria-expanded=false] .lang-nav__item:nth-child(2){--stagger-index:2;transform:var(--second-icon-closed)}.lang-nav[aria-expanded=false] .lang-nav__item:nth-child(3){--stagger-index:1;transform:var(--third-icon-closed)}.lang-nav[aria-expanded=false] a{pointer-events:none}@keyframes open-nav{0%{transform:translateY(var(--nav-closed))}to{transform:translateY(var(--nav-opened))}}@keyframes close-nav{0%{transform:translateY(var(--nav-opened))}to{transform:translateY(var(--nav-closed))}}@keyframes open-submenu{0%{max-height:0;padding:0}to{max-height:400px}}@keyframes close-submenu{0%{max-height:400px}to{max-height:0;padding:0}}.footer{background-color:var(--c-orange);border-block-start:2px solid var(--c-orange);width:100vw}.footer__wrapper{line-height:75px;text-align:right}.footer__wrapper p{font-size:1.25rem;max-width:none}button{background:none;border:none;cursor:pointer;display:block}.btn{display:grid;width:-moz-fit-content;width:fit-content}.btn>*{border:var(--border);grid-column:1/2;grid-row:1/2;height:100%;width:100%}.btn__shadow{background-color:var(--c-black)}.btn__fill{background:var(--c-green);transition:transform .3s ease-in-out,background-color .3s ease-in-out}.btn--border>*{border-radius:.75em}.btn--border .btn__fill{padding:.25em .75em}.btn--round{--btn-round-size:clamp(55px,8vw,70px);height:var(--btn-round-size);width:var(--btn-round-size)}.btn--round>*{border-radius:50%}.btn--round .btn__fill{display:flex;flex-direction:column;padding:8px}.btn--round svg{aspect-ratio:1/1;fill:var(--c-black)}.btn:is(:hover,:focus-visible) .btn__fill{background-color:var(--c-white);transform:translate(-5px,-5px)}.btn:is(:hover,:focus-visible).btn--border .btn__fill{transform:translate(-.25em,-.25em)}.animated-elements{--cat-size:200px;pointer-events:none}.animated-elements .cat-wrapper{height:calc(var(--cat-size) + 100px);inset:auto auto -77px -77px;overflow-y:hidden;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--cat-size);z-index:2}.animated-elements .cat{--pivot:0% 63%;height:var(--cat-size);position:absolute;transform:scale(1) translateY(90px);transform-origin:var(--pivot);width:var(--cat-size)}.spotlight{border-radius:50%;pointer-events:none;position:absolute;transform:translate(-50%,-50%);z-index:1000}.spotlight--outer{--size:40px;background-color:hsla(from var(--c-orange) h s l/.4);height:var(--size);mix-blend-mode:multiply;width:var(--size)}.card-02 .card__top{background-color:#e27a46;color:#fff}.card-02 .card__top :focus-visible,.card-02 .card__top:focus-within{outline-color:outline-clr(#e27a46)}.card-02 .center{cursor:pointer;height:58px;position:relative;width:80px}.card-02 .center:focus-visible{outline-offset:1em}.card-02 .line{background-color:#fff;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.411);height:8px;position:absolute;width:80px}.card-02 .open.line-middle{animation:menu-disappear .6s ease-in-out forwards}.card-02 .closed.line-middle{animation:appear .6s ease-in-out forwards}@keyframes menu-disappear{0%{opacity:1}50%,to{opacity:0;transform:scaleX(.4)}}@keyframes appear{0%,50%{opacity:0;transform:scaleX(.4)}to{opacity:1}}.card-02 .line-top{top:0}.card-02 .line-bottom{bottom:0}.card-02 .open.line-top{animation:top-open .8s cubic-bezier(.22,.61,.36,1) forwards}.card-02 .open.line-bottom{animation:bottom-open .8s cubic-bezier(.22,.61,.36,1) forwards}.card-02 .closed.line-top{animation:top-close .8s cubic-bezier(.22,.61,.36,1) forwards}.card-02 .closed.line-bottom{animation:bottom-close .8s cubic-bezier(.22,.61,.36,1) forwards}@keyframes top-open{0%{top:0}50%{top:50%;transform:translateY(-50%)}to{top:50%;transform:translateY(-50%) rotate(45deg)}}@keyframes top-close{0%{top:50%;transform:translateY(-50%) rotate(45deg)}50%{top:50%;transform:translateY(-50%)}to{top:0}}@keyframes bottom-open{0%{bottom:0;transform:translateY(50%)}50%{bottom:50%;transform:translateY(50%)}to{bottom:50%;transform:translateY(50%) rotate(135deg)}}@keyframes bottom-close{0%{bottom:50%;transform:translateY(50%) rotate(135deg)}50%{bottom:50%;transform:translateY(50%)}to{bottom:0}}.card-01 .card__top{background-image:linear-gradient(225deg,var(--c-orange) 0,var(--c-yellow) 90%);padding-block:20px;position:relative;z-index:1}.card-01 .big,.card-01 .small{color:#fff;display:block;font-family:"Courier New",Courier,monospace;font-weight:700;line-height:.8;text-align:center;text-shadow:rgba(0,0,0,.3) 0 0 10px;text-transform:uppercase}.card-01 .big{font-size:86.4px}.card-01 .small{font-size:25.6px}.card-01 .number{display:block;left:10px;margin-block-end:10px;position:relative;width:100%}.card-01 .number div{background-color:#fff;border-radius:3px;box-shadow:0 5px 10px 2px rgba(0,0,0,.24)}.card-01 .nr1{height:100px;position:relative;width:25px}.card-01 .nr1:after{background-color:#fff;border-radius:3px;box-shadow:0 5px 10px 2px rgba(0,0,0,.24);content:"";display:inline-block;height:45px;left:2px;position:absolute;transform:rotate(45deg);transform-origin:top left;width:20px;z-index:-1}.card-01 div.nr0-one,.card-01 div.nr0-two{background-color:transparent;background-image:radial-gradient(circle 20px at 50% 50%,transparent 26px,#fff 27px);border-radius:50%;height:100px;position:absolute;width:100px}.card-01 div.nr0-one{left:15px}.card-01 div.nr0-two{left:100px}.card-03:is(:hover,.animate,:focus-visible) .pyr,.card-03:is(:hover,.animate,:focus-visible) .pyr-right,.card-03:is(:hover,.animate,:focus-visible) .shadow,.card-03:is(:hover,.animate,:focus-visible) .sky,.card-03:is(:hover,.animate,:focus-visible) .sun,.gallery__card:is(:hover,.animate,:focus-visible) .pyr,.gallery__card:is(:hover,.animate,:focus-visible) .pyr-right,.gallery__card:is(:hover,.animate,:focus-visible) .shadow,.gallery__card:is(:hover,.animate,:focus-visible) .sky,.gallery__card:is(:hover,.animate,:focus-visible) .sun{animation-play-state:running}.card-03 .card__top{background-color:#262626}.card-03 .frame{aspect-ratio:1/1;border-radius:50%;overflow:hidden;position:absolute;width:50%}.card-03 .sky{animation:disappear3 4s ease-in-out infinite;animation-play-state:paused;background-color:#7ddffc;height:100%;position:relative;width:100%}.card-03 .pyr,.card-03 .pyr-right,.card-03 .sand,.card-03 .shadow,.card-03 .sun{position:absolute}.card-03 .pyr,.card-03 .shadow,.card-03 .sun{left:50%;transform:translateX(-50%)}.card-03 .sun{animation:sun 4s ease-in-out infinite;animation-play-state:paused;background-color:#ffef00;border-radius:50%;height:19.44%;top:2.78%;transform-origin:0 370%;width:19.44%}.card-03 .sand{background-color:#f0de75;bottom:0;height:31.11%;width:100%}.card-03 .shadow{animation:shadow3 4s ease-in-out infinite;animation-play-state:paused;background-color:rgba(157,146,82,.671);clip-path:polygon(33.33% 0,66.66% 0,100% 10%);height:19.44%;top:68.89%;transform-origin:top;width:193.33%}.card-03 .pyr{animation:pyr 4s ease-in-out infinite;animation-play-state:paused;background:#f2f2f2;clip-path:polygon(0 100%,50% 0,100% 100%);width:64.44%}.card-03 .pyr,.card-03 .pyr-right{bottom:30.83%;height:31.67%}.card-03 .pyr-right{animation:pyr-right 4s ease-in-out infinite;animation-play-state:paused;background-color:#b6b5b6;clip-path:polygon(25% 100%,0 0,100% 100%);left:50%;width:32.22%}@keyframes pyr-right{0%{background-color:#b6b5b6}25%{background-color:#dedbdb}50%,75%,to{background-color:#f2f2f2}}@keyframes pyr{0%,25%{background-color:#f2f2f2}75%{background-color:#dedbdb}to{background-color:#b6b5b6}}@keyframes disappear3{30%,65%{opacity:1}0%,90%,to{opacity:0}}@keyframes sun{0%{transform:rotate(-90deg)}30%{transform:rotate(-30deg)}to{transform:rotate(90deg)}}@keyframes shadow3{0%{clip-path:polygon(33.33% 0,66.66% 0,100% 0);transform:translateX(-50%) scaleY(1);transform-origin:top center}30%{clip-path:polygon(33.33% 0,66.66% 0,90% 100%);transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(.34)}65%{clip-path:polygon(33.33% 0,66.66% 0,25% 100%);transform:translateX(-50%) scaleY(.57)}90%{clip-path:polygon(33.33% 0,66.66% 0,0 0);transform:translateX(-50%) scaleY(1)}}.card-04:is(:hover,.animate,:focus-visible) .circle1,.card-04:is(:hover,.animate,:focus-visible) .circle2,.card-04:is(:hover,.animate,:focus-visible) .circle3,.gallery__card:is(:hover,:focus-visible) .card-04 .circle1,.gallery__card:is(:hover,:focus-visible) .card-04 .circle2,.gallery__card:is(:hover,:focus-visible) .card-04 .circle3{animation-play-state:running}.card-04 .card__top{background:var(--c-saturated)}.card-04 .circle{background-color:var(--c-white);border-radius:50%;position:absolute;transform:scale(0)}.card-04 .circle1{animation:circle1 2s cubic-bezier(.19,1.01,.68,1) infinite alternate;animation-play-state:paused;box-shadow:6px 9px 17px 2px rgba(0,0,0,.3);height:90px;width:90px}.card-04 .circle2{animation:circle2 2s cubic-bezier(.19,1.01,.68,1) infinite alternate;animation-play-state:paused;box-shadow:8px 5px 13px 1px rgba(0,0,0,.281);height:58px;width:58px}.card-04 .circle3{animation:circle3 2s cubic-bezier(.19,1.01,.68,1) infinite alternate;animation-play-state:paused;box-shadow:8px 8px 13px 2px rgba(0,0,0,.274);height:27px;width:27px}@keyframes circle1{0%,10%{box-shadow:2px 2px 2px 2px rgba(0,0,0,.3);transform:scale(0)}to{box-shadow:10px 10px 15px 0 rgba(0,0,0,.3);transform:scale(1)}}@keyframes circle2{35%{box-shadow:2px 2px 2px 2px rgba(0,0,0,.3);transform:scale(0)}to{box-shadow:10px 10px 15px 0 rgba(0,0,0,.3);transform:scale(1)}}@keyframes circle3{60%{box-shadow:2px 2px 2px 2px rgba(0,0,0,.3);transform:scale(0)}to{box-shadow:10px 10px 15px 0 rgba(0,0,0,.3);transform:scale(1)}}.card-05 .card__top{background-color:var(--c-green);padding-block:20px}.card-05 h3{font-family:var(--main-font);font-size:15px;font-weight:600;text-transform:uppercase}.card-05 svg{fill:none}.card-05 .frame--shadow{background-color:#fff;color:#949494;display:grid;grid-template-rows:30% auto;width:280px}.card-05 .frame--shadow p{font-size:12px}.card-05 .bar{align-items:center;background-color:#f1bb65;border-top-left-radius:3px;border-top-right-radius:3px;color:#fff;display:flex;height:100%;justify-content:space-between;padding:15px;width:100%}.card-05 .rev{font-size:15px;font-weight:600}.card-05 .col-right{text-align:right}.card-05 .chart-container{display:flex;flex-direction:column;gap:10px;margin-block-end:0;padding:10px}.card-05 .legend{align-self:flex-end}.card-05 .legend>*{display:inline-block}.card-05 .legend p{font-size:10px}.card-05 .svg-legend{overflow:visible;stroke:#fa7575;stroke-linecap:round;stroke-width:2}.card-05 .legend>p:nth-child(2){padding-inline-end:15px}.card-05 .blue{stroke:#7aa2ff}.card-05 .chart{height:80px;position:relative}.card-05 .line{background-color:#ececec;height:1px;left:0;position:absolute;right:0;top:0;width:100%;z-index:-1}.card-05 .line-2{top:50%}.card-05 .line-3{top:100%}.card-05 .figure{overflow:visible;stroke-width:2}.card-05 .purchases{stroke:#7aa2ff}.card-05 .views{stroke:#fa7575}.card-05 .blues>*,.card-05 .reds>*{border-radius:50%;height:7px;position:absolute;width:7px}.card-05 .blues>:hover,.card-05 .reds>:hover{cursor:pointer}.card-05 .reds .tooltip,.card-05 .reds .tooltip:after,.card-05 .reds>*{background-color:#fa7575}.card-05 .blues .tooltip,.card-05 .blues .tooltip:after,.card-05 .blues>*{background-color:#7aa2ff}.card-05 .reds .c-1{bottom:35px;left:8px}.card-05 .reds .c-2{bottom:62px;left:48px}.card-05 .reds .c-3{bottom:57px;left:88px}.card-05 .reds .c-4{bottom:67px;left:128px}.card-05 .reds .c-5{bottom:38px;left:168px}.card-05 .reds .c-6{bottom:30px;left:208px}.card-05 .reds .c-7{bottom:59px;left:248px}.card-05 .blues .c-1{bottom:19px;left:8px}.card-05 .blues .c-2{bottom:30px;left:48px}.card-05 .blues .c-3{bottom:15px;left:88px}.card-05 .blues .c-4{bottom:26px;left:128px}.card-05 .blues .c-5{bottom:17px;left:168px}.card-05 .blues .c-6{bottom:4px;left:208px}.card-05 .blues .c-7{bottom:13px;left:248px}.card-05 .tooltip{border-radius:3px;color:#fff;font-size:12px;opacity:0;padding:5px;pointer-events:none;top:-25px;transform-origin:bottom;transition:all .3s ease-in-out}.card-05 .tooltip,.card-05 .tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.card-05 .tooltip:after{bottom:-4px;clip-path:polygon(0 0,50% 100%,100% 0);content:"";display:block;height:5px;width:10px}.card-05 .blues div[class^=c-]:hover .tooltip,.card-05 .reds div[class^=c-]:hover .tooltip{opacity:1;top:-32px}.card-05 .days{display:flex;justify-content:space-between}.card-05 .days span{color:#949494;font-size:10px;text-transform:uppercase}.card-06 .frame{overflow:visible}.card-06 .profile__img:is(:hover,:focus-visible){cursor:pointer}.card-06 button:is(:hover,:focus-visible){background-color:var(--c-orange);color:#fff}.card-06 .profile__img:is(:hover,:focus-visible) .circle-1,.card-06 .profile__img:is(:hover,:focus-visible) .circle-2{border-color:transparent;transform:rotate(300deg)}.card-06 .profile__img:is(:hover,:focus-visible) .circle-3{filter:blur(3px) saturate(1.2);height:100px;transform:rotate(300deg);width:100px}.card-06 .meta:is(:hover,:focus-visible){background-color:hsl(from var(--c-orange) h s 85%)}.card-06 .card__top{background:linear-gradient(to right top,#b93171,#ff843d);padding:20px;text-align:center}.card-06 .card__top span{display:block}.card-06 img{border-radius:50%;position:relative;width:80px;z-index:2}.card-06 .meta{color:var(--c-orange);cursor:pointer;text-decoration:none}.card-06 button{background:none;border:1px solid var(--c-orange);border-radius:20px;color:var(--c-orange);display:block;font-size:12px;font-weight:700;padding:5px;transition:color .3s ease-in,background-color .3s ease-in;width:130px}.card-06 .frame--shadow{background-color:#fff;color:#333;display:grid;grid-template-areas:"profile posts" "profile likes" "profile followers";grid-template-columns:65% 35%;grid-template-rows:1fr 1fr 1fr;min-height:270px;width:250px}.card-06 .frame--shadow :focus-visible,.card-06 .frame--shadow:focus-within{outline-color:outline-clr(#fff)}.card-06 .profile{display:grid;grid-area:profile;justify-content:center;padding-block:10px}.card-06 .profile__img{display:grid;height:100%;place-items:center;width:100%}.card-06 .circle-1,.card-06 .circle-2,.card-06 .circle-3,.card-06 img{grid-column:1/2;grid-row:1/2;margin-inline:auto}.card-06 .circle-1,.card-06 .circle-2,.card-06 .circle-3{border-radius:50%;border-style:dashed;border-width:1px}.card-06 .circle-1{border-color:var(--c-orange) transparent var(--c-orange) var(--c-orange);height:100px;width:100px}.card-06 .circle-1,.card-06 .circle-2{transition:border-color .5s ease-in-out,transform .5s ease-in-out}.card-06 .circle-2{border-color:var(--c-orange) var(--c-orange) var(--c-orange) transparent;height:90px;width:90px}.card-06 .circle-3{background:linear-gradient(to left,#b93171,var(--c-orange));border:none;height:70px;transition:all .7s ease-in-out;width:70px}.card-06 .name{color:var(--c-orange);font-size:18px;font-weight:600}.card-06 .job{font-size:11px;font-weight:500}.card-06 .buttons{display:grid;gap:5px}.card-06 .meta{align-content:center;background-color:#f3e2d8;border:3px solid transparent;border-bottom:1px solid #fff;display:grid;transition:background-color .3s ease-in}.card-06 .meta:last-child{border:none}.card-06 .meta:focus-visible{border:3px dashed var(--c-black);outline:none}.card-06 .meta .count{font-size:18px;font-weight:600}.card-06 .meta .sub{font-size:11px}.card-06 .posts{grid-area:posts}.card-06 .likes{grid-area:likes}.card-06 .followers{grid-area:followers}article.card-07 .card__top{min-height:320px}article.card-07:is(:hover,.animate,:focus-visible,:focus-within) .event{animation-play-state:running}article.card-07 .card__top{background-color:var(--c-green);color:#fff}article.card-07 .frame--shadow{height:90%;width:90%}article.card-07 a{color:#7a9bb8;text-decoration:none;transition:color .4s ease-in-out}article.card-07 ul{list-style:none}article.card-07 button{background:none;border:none;cursor:pointer}article.card-07 .bar .frame__nav{background-color:#44637e;border-radius:0 5px 5px 0;bottom:0;box-shadow:4px 8px 16px 0 rgba(0,0,0,.1);display:grid;grid-template-rows:repeat(5,1fr);height:calc(100% - 60px);left:-150px;position:absolute;transition:left .5s ease-in-out;width:150px;z-index:1}article.card-07 .bar .frame__nav[aria-expanded=true]{left:0}article.card-07 .bar .frame__nav__item{display:flex}article.card-07 .bar .frame__nav__link{align-content:center;border:3px solid transparent;display:block;padding-inline-start:1rem;transition:background-color .4s ease-in-out,color .4s ease-in-out;width:100%}article.card-07 .bar .frame__nav__link:is(:hover,:focus-visible){background-color:#364e63;color:#fff}article.card-07 .bar .frame__nav__link:focus-visible{border:3px dashed var(--c-white);outline:none}article.card-07 .bar .frame__nav i{margin-inline-end:5px}article.card-07 .frame__nav__link .frame__nav__link:is(:hover,:focus-visible){color:#fff}article.card-07 .dashboard{background:#fff;color:#333;display:grid;grid-template-areas:"header","events";grid-template-rows:auto 1fr;height:100%;position:relative;width:100%}article.card-07 .bar{align-items:center;background-color:#6098cd;color:#fff;display:flex;justify-content:space-between;padding:var(--padding-outline);width:100%}article.card-07 .bar :focus-visible,article.card-07 .bar:focus-within{outline-color:outline-clr(#6098cd)}article.card-07 .menu{height:50px;padding:10px}article.card-07 .menu-icon{background-color:#a2cdf6;border-radius:2px;height:3px;position:relative;top:-4px;transition:background-color .3s ease-in-out;width:30px}article.card-07 .menu-icon:after,article.card-07 .menu-icon:before{background-color:#a2cdf6;content:"";display:block;position:absolute;transition:background-color .3s ease-in-out}article.card-07 .menu-icon:before{border:2px solid var(--blue-color);border-radius:50%;height:11px;right:-2px;top:50%;transform:translateY(-50%);width:11px}article.card-07 .menu-icon:after{border-radius:2px;bottom:-11px;height:3px;width:30px}article.card-07 .header i :hover,article.card-07 .menu :hover{cursor:pointer}article.card-07 .menu:is(:hover,:focus-visible) .menu-icon,article.card-07 .menu:is(:hover,:focus-visible) .menu-icon:after,article.card-07 .menu:is(:hover,:focus-visible) .menu-icon:before{background-color:#fff}article.card-07 .search-btn i{color:#a2cdf6;font-size:18px;position:relative;transition:color .3s ease-in-out;z-index:2}article.card-07 .search-btn{height:50px;width:45px}article.card-07 .search-btn:is(:hover,:focus-visible) i{color:#fff}article.card-07 .search-bar{border:none;border-radius:20px;color:#666;font-size:16px;left:70%;opacity:0;padding:7px 15px;position:absolute;top:31px;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out,left .3s ease-in-out;width:60%}article.card-07 .search-bar.open{left:50%;opacity:1}article.card-07 .timeline{background-color:#e6e6e6;bottom:0;left:25px;position:absolute;top:84px;width:4px}article.card-07 .events{display:grid;font-size:16px;height:100%;justify-content:space-between;line-height:1.2;padding:10px 10px 10px 45px}article.card-07 .event{animation:slide .5s ease-in-out 1s forwards;animation-play-state:paused;color:#666;opacity:0;position:relative}article.card-07 .event *{transition:color .4s ease-in-out}article.card-07 .event:is(:hover,:focus-visible){color:#6098cd;cursor:pointer}article.card-07 .event__time{font-size:14px}article.card-07 .event__time:before{background-color:#fff;border:2px solid #6098cd;border-radius:50%;content:"";display:block;height:12px;left:-24px;outline:3px solid #fff;position:absolute;top:7px;width:12px}article.card-07 .name{font-weight:700;margin-inline-end:.5em}@keyframes slide{to{opacity:1;top:0}}.card-08:is(:hover,.animate,:focus-visible) .bubble,.card-08:is(:hover,.animate,:focus-visible) .bubble:after,.card-08:is(:hover,.animate,:focus-visible) .bubble:before,.card-08:is(:hover,.animate,:focus-visible) .lava{animation-play-state:running}.card-08 .center{background:#000;filter:contrast(20);height:100%;position:relative;width:100%}.card-08 .bubble,.card-08 .lava{background-color:#fff;filter:blur(8px)}.card-08 .lava{animation:move8 5s linear infinite,color8 5s linear infinite;animation-play-state:paused;border-radius:45%;height:100px;width:100px}.card-08 .bubble{animation:spin8 2s linear infinite,color8 5s linear infinite;animation-play-state:paused;border-radius:50% 40% 50% 40%/40% 50% 50% 50%;position:absolute}.card-08 .bubble:after{animation:spin8 5s linear infinite,color8 5s linear infinite;animation-play-state:paused}.card-08 .bubble:before{animation:spin8 3s linear infinite,color8 5s linear infinite;animation-play-state:paused}.card-08 .bubble.big{height:50px;transform-origin:170% 90%;width:50px}.card-08 .bubble.big:nth-child(odd){animation-delay:1.2s;transform-origin:20% 150%}.card-08 .bubble.mid{animation-delay:.5s;height:40px;transform-origin:170% 0;width:40px}.card-08 .bubble.small{animation-delay:1s;height:30px;transform-origin:40% -100%;width:30px}.card-08 .bubble.small:nth-child(odd){animation-delay:.7s;left:0;top:60%;transform-origin:10% 200%}.card-08 .bubble:after,.card-08 .bubble:before{content:"";display:block;position:absolute}.card-08 .bubble:after{border-radius:50%;height:25px;left:50%;top:50%;transform-origin:-5% -100%;width:25px}.card-08 .bubble:before{border-radius:50%;height:20px;left:100%;top:-150%;transform-origin:50% 150%;width:20px}@keyframes color8{0%{background-color:#fff}20%{background-color:#85e0ff}30%{background-color:#ffabab}50%{background-color:#bbffb4}90%{background-color:#ffb870}to{background-color:#fff}}@keyframes move8{to{transform:rotate(1turn)}}@keyframes spin8{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}article.card-09:is(:hover,.animate,:focus-visible) .drop.big,article.card-09:is(:hover,.animate,:focus-visible) .drop.mid,article.card-09:is(:hover,.animate,:focus-visible) .drop.small,article.card-09:is(:hover,.animate,:focus-visible) .moon{animation-play-state:running}article.card-09 .card__top{background:#1a2238;color:#fff;color:#333;display:grid;font-weight:300;grid-template-rows:1fr 64px;position:relative}article.card-09 .widget{height:100%;position:relative;width:100%}article.card-09 .moon{animation:moon-up 1s linear forwards;animation-play-state:paused;background-color:#f3e7a5;border-radius:50%;box-shadow:0 0 10px #f3e7a5;height:70px;left:15%;overflow:hidden;position:absolute;top:200px;width:70px}article.card-09 .hole{background-color:#e5d68a;border-radius:50%;height:7px;position:absolute;width:7px}article.card-09 .hole-1{height:12px;top:12px;width:12px}article.card-09 .hole-2{height:12px;left:45%;top:10px;width:12px}article.card-09 .hole-3{right:12px;top:20px}article.card-09 .hole-4{right:-2px;top:28px}article.card-09 .hole-5{bottom:24px;right:10px}article.card-09 .hole-6{bottom:20px;left:15px}article.card-09 .hole-7{bottom:8px;right:28px}article.card-09 .hole-8{bottom:0;height:12px;left:10px;width:12px}article.card-09 .hole-9{height:5px;right:25px;top:35px;width:5px}article.card-09 .hole-10{height:4px;left:18px;top:25px;width:4px}article.card-09 .hole-11{height:6px;left:28px;top:28px;width:6px}article.card-09 .clouds-bg{background-color:#26314f;bottom:-1rem;clip-path:path("M 0 220 A 55,45 0,0,1 220,50 M 200 75 a 50,30 0,0,1 290,35");height:55%;position:absolute;width:100%}article.card-09 .clouds{background-color:#313d5e;bottom:-2rem;clip-path:path("M 0 220 A 85,55 0,0,1 120,50 M 80 100 a 40,30 0,0,1 290,35 M 300 130 a 40,30 0,0,1 300, 35");height:50%;position:absolute;width:100%}article.card-09 .rain{height:100%;left:-100px;position:absolute;width:100%}article.card-09 .drop{background-color:#7fc1f9;border-radius:50%;position:absolute;top:-20px;transform-origin:bottom}article.card-09 .drop:before{background-color:#7fc1f9;clip-path:polygon(0 120%,50% 0,100% 120%);content:"";display:block;position:absolute}article.card-09 .drop.big{animation:drop9 1s linear infinite;animation-play-state:paused;height:10px;width:10px}article.card-09 .drop.big:before{height:10px;top:-8px;width:10px}article.card-09 .drop.big:nth-child(2),article.card-09 .drop.small:nth-of-type(12){animation-delay:.25s}article.card-09 .drop.big:nth-child(3),article.card-09 .drop.small:nth-of-type(13){animation-delay:1.15s}article.card-09 .drop.big:nth-child(4),article.card-09 .drop.small:nth-of-type(14){animation-delay:.55s}article.card-09 .drop.big:nth-child(5),article.card-09 .drop.small:nth-of-type(15){animation-delay:1s}article.card-09 .drop.big:nth-child(6),article.card-09 .drop.small:nth-of-type(11){animation-delay:.75s}article.card-09 .drop.big:nth-child(7),article.card-09 .drop.mid:nth-of-type(10){animation-delay:.5s}article.card-09 .drop.big:nth-child(8),article.card-09 .drop.mid:nth-of-type(9){animation-delay:1.25s}article.card-09 .drop.big:nth-child(9),article.card-09 .drop.mid:nth-of-type(8){animation-delay:.9s}article.card-09 .drop.big:nth-child(10),article.card-09 .drop.mid:nth-of-type(7){animation-delay:.6s}article.card-09 .drop.big:nth-child(11),article.card-09 .drop.mid:nth-of-type(6){animation-delay:2s}article.card-09 .drop.big:nth-child(12),article.card-09 .drop.mid:nth-of-type(5){animation-delay:3.25s}article.card-09 .drop.big:nth-child(13),article.card-09 .drop.mid:nth-of-type(4){animation-delay:2s}article.card-09 .drop.big:nth-child(14),article.card-09 .drop.mid:nth-of-type(3){animation-delay:.75s}article.card-09 .drop.big:nth-child(15),article.card-09 .drop.mid:nth-of-type(2){animation-delay:1.65s}article.card-09 .drop.mid{animation:drop9 1.7s linear infinite;animation-play-state:paused;height:8px;opacity:.3;width:8px}article.card-09 .drop.mid:before{height:8px;top:-6px;width:8px}article.card-09 .drop.small{animation:drop9 2.5s linear infinite;animation-play-state:paused;height:5px;opacity:.3;width:5px}article.card-09 .drop.small:before{height:5px;top:-4px;width:5px}article.card-09 .card{background-color:#fff;color:#313d5e;display:flex;inset:auto 0 0 0;justify-content:center;line-height:1.2;position:absolute}article.card-09 .card__wrapper{align-items:center;display:grid;gap:10px;grid-template-columns:1fr auto;max-width:350px;padding:10px;width:100%}article.card-09 .today{display:grid;grid-template-columns:auto 1fr;grid-gap:7px;align-items:center;text-wrap:nowrap}article.card-09 .today .temp{font-size:36px}article.card-09 .more-info span{display:block}article.card-09 .future,article.card-09 .today{font-size:15px}article.card-09 .day{display:grid;grid-template-columns:35px auto;grid-gap:5px;min-width:98px}article.card-09 .day>*,article.card-09 .name{text-align:right}article.card-09 .day .deg{font-weight:400}@keyframes moon-up{to{left:20%;top:40px}}@keyframes drop9{0%{transform:rotate(15deg) translateX(0)}80%{top:106%;transform:rotate(15deg) translateX(-70px) scale(1)}to{top:106%;transform:rotate(15deg) translateX(-70px) scale(3,0)}}.card-10 .card__top{background-color:var(--c-green);padding-block:20px}.card-10 .center{--width:70%;align-items:center;aspect-ratio:1/1;background-color:#242424;border:.5em solid #3b3b3b;border-radius:50%;color:#fff;display:grid;justify-content:center;margin-inline:auto;position:relative;width:var(--width)}.card-10 .data,.card-10 .dots,.card-10 .dots>*{aspect-ratio:1/1;grid-column:1/2;grid-row:1/2;height:85%}.card-10 .data{align-content:center;border-radius:50%;display:grid;font-size:16px;grid-template-rows:auto auto auto;height:100%;justify-content:center;text-transform:uppercase;text-wrap:nowrap;width:100%}.card-10 .data,.card-10 .top{text-align:center}.card-10 .time{font-size:40px;font-weight:600;margin-block:-5px}.card-10 .bottom{align-items:center;display:flex;gap:.25em;justify-content:center}.card-10 .heart{animation:beat 1s ease-out infinite;background-color:tomato;border-radius:50%;display:block;height:8px;margin-inline-end:7px;position:relative;top:-2px;width:7px}.card-10 .heart:after,.card-10 .heart:before{background-color:tomato;content:"";display:block;position:absolute}.card-10 .heart:before{clip-path:polygon(50% 100%,90% 72%,50% 50%,10% 72%);height:17px;left:0;top:-5px;width:14px}.card-10 .heart:after{border-radius:50%;height:8px;right:-7px;top:0;width:7px}@keyframes beat{0%{transform:scale(.8)}50%,55%{transform:scale(.95)}to{transform:scale(.8)}}.card-10 .beat{align-items:center;display:flex}.card-10 .beat>*{display:inline-block}.card-10 .dots{aspect-ratio:1/1;display:grid;margin-inline:auto;place-items:center;position:relative;width:85%}.card-10 .dots>*{height:100%;width:5px}.card-10 .dots :after,.card-10 .dots :before{background-color:#fff;border-radius:50%;content:"";display:block;height:3px;left:50%;position:absolute;transform:translateX(-50%);width:3px}.card-10 .dots :nth-child(2n):after,.card-10 .dots :nth-child(2n):before{height:2px;width:2px}.card-10 .dots :after{bottom:0}.card-10 .dots .dots-1:after,.card-10 .dots .dots-1:before{background:none;border:.5px solid #fff;height:5px;width:5px}.card-10 .dots .dots-2{transform:rotate(15deg)}.card-10 .dots .dots-3{transform:rotate(30deg)}.card-10 .dots .dots-4{transform:rotate(45deg)}.card-10 .dots .dots-5{transform:rotate(60deg)}.card-10 .dots .dots-6{transform:rotate(75deg)}.card-10 .dots .dots-7{transform:rotate(90deg)}.card-10 .dots .dots-8{transform:rotate(105deg)}.card-10 .dots .dots-9{transform:rotate(120deg)}.card-10 .dots .dots-10{transform:rotate(135deg)}.card-10 .dots .dots-11{transform:rotate(150deg)}.card-10 .dots .dots-12{transform:rotate(165deg)}.card-10 .second{height:100%;position:absolute;width:100%}.card-10 .second circle{animation:count 120s linear 1s infinite;position:absolute;rotate:-90deg;stroke:var(--c-yellow);stroke-dasharray:30;transform-origin:center}@keyframes count{0%{stroke-dashoffset:-30}to{stroke-dashoffset:-90}}.card-11:is(:hover,.animate,:focus-visible) .left-shoe,.card-11:is(:hover,.animate,:focus-visible) .left-shoe .shoe,.card-11:is(:hover,.animate,:focus-visible) .right-shoe,.card-11:is(:hover,.animate,:focus-visible) .shoe{animation-play-state:running}.card-11 .card__top{background:radial-gradient(var(--c-white),var(--c-yellow));display:grid;grid-template-rows:1fr 30%}.card-11 .floor{background-color:#242424;height:100%;width:100%}.card-11 .center{height:100%;position:relative;width:100%}.card-11 .shoe{animation:rotate-shoes 1s ease-in-out infinite;animation-play-state:paused;background:url(https://100dayscss.com/codepen/doc-martens.svg);bottom:0;height:128px;left:0;position:absolute;transform:rotate(10deg) translateY(3px);width:152px}.card-11 .left-shoe .shoe{animation:rotate-shoes 1s ease-in-out .5s infinite;animation-play-state:paused}.card-11 .left-shoe,.card-11 .right-shoe{bottom:-1rem;height:300px;left:50%;opacity:0;position:absolute;transform:rotate(10deg) translateX(-50%);transform-origin:0 -80%;width:152px}.card-11 .right-shoe{animation:fade .5s ease-in-out .3s forwards,walk 1s ease-in-out infinite;animation-play-state:paused}.card-11 .left-shoe{animation:fade .5s ease-in-out .3s forwards,walk 1s ease-in-out .5s infinite;animation-play-state:paused;transform:rotate(10deg) translateX(-50%)}@keyframes walk{0%{transform:rotate(10deg) translateX(-50%)}50%{transform:rotate(-10deg) translate(-50%,-8px)}to{transform:rotate(10deg) translateX(-50%)}}@keyframes rotate-shoes{0%,to{transform:rotate(10deg) translateY(3px)}25%{transform:translateY(-20px)}50%{transform:rotate(-10deg) translateY(-3px)}75%{transform:rotate(0deg) translateY(10px)}}.card-12{min-height:350px}.card-12 div.card__top{background-color:hsl(from var(--c-saturated) h 30% 60%);color:#fff;font-size:18px;font-weight:400}.card-12 .center{align-items:center;display:grid;height:100%;justify-content:center;padding-inline:20px}.card-12 blockquote{letter-spacing:2%;position:relative;width:270px}.card-12 .quote{font-family:Arial,Helvetica,sans-serif;font-size:16px;left:-1.225em;line-height:.7;opacity:.3;pointer-events:none;position:absolute;top:.5em}.card-12 blockquote p{hyphens:none;margin:1em;position:relative}.card-12 .def{padding:var(--padding-outline);position:relative}.card-12 p .word:hover{cursor:pointer}.card-12 p .word{display:inline-block;padding:0 8px 5px;position:relative}.card-12 p .word,.card-12 span.tooltip{background-color:hsl(from var(--c-saturated) h 30% 35%)}.card-12 span.tooltip{--tooltip-width:270px;font-size:16px;left:calc(50% - var(--tooltip-width)/2);opacity:0;padding:0;position:absolute;top:55px;transition:all .5s ease-in-out .3s;width:var(--tooltip-width);z-index:-1}.card-12 span.tooltip__text{display:block;padding:.725em}.card-12 p .def:is(:hover,:focus-visible) .tooltip{left:calc(50% - var(--tooltip-width)/2);opacity:1;position:absolute;top:45px;transition:all .5s ease-in-out 0s;z-index:3}.card-12 .tooltip:before{background-color:#fff;clip-path:polygon(0 100%,50% 0,100% 100%);content:"";display:block;height:8px;left:calc(50% - 7.5px);position:absolute;top:-8px;transition:all .5s ease-in-out .3s;width:15px}.card-12 .def:is(:hover,:focus-visible) .tooltip:before{bottom:-8px;opacity:1;transition:all .5s ease-in-out 0s}.card-12 .tooltip .pronunciation,.card-12 .tooltip .text{cursor:text}.card-12 .pronunciation{background-color:#fff;color:hsl(from var(--c-saturated) h 30% 35%);display:block;padding:.225rem 1rem;width:100%}.card-12 .pronunciation i{cursor:pointer;margin-inline-start:5px;padding:5px;transition:transform .3s ease-in-out}.card-12 .pronunciation i:is(:hover,:focus-visible){transform:scale(1.1)}.card-12 blockquote footer{font-size:20px;font-style:italic;font-weight:300;margin-inline-start:1rem}article.card-13 .card__top{background-color:var(--c-white);display:block;position:relative}article.card-13 .user-gallery{border:5px solid var(--c-white);display:grid;height:100%;width:100%;grid-gap:5px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden}article.card-13 .user-gallery__img{overflow:hidden;position:relative}article.card-13 img{height:auto;width:100%}article.card-13 .user-gallery__img .gallery__overlay{background:transparent;cursor:pointer;display:grid;height:100%;place-items:center;position:absolute;top:0;transition:background-color .3s ease-in-out;width:100%}article.card-13 .user-gallery__img:last-child img{transform:scale(1.05)}article.card-13 .cta,article.card-13 .open-profile{background-color:var(--c-orange);border-radius:50%;cursor:pointer;display:grid;height:50px;place-items:center;transition:all .5s ease-in-out;width:50px}article.card-13 .gallery__overlay .open-profile{display:grid;opacity:0;place-items:center;transform:scale(2.5)}article.card-13 .user-gallery__img .gallery__overlay:is(:hover,:focus-visible){background-color:rgba(0,0,0,.7)}article.card-13 .user-gallery__img .gallery__overlay:is(:hover,:focus-visible) .open-profile{opacity:1;transform:scale(1)}article.card-13 .user-gallery__img .gallery__overlay:focus-visible .open-profile{outline:3px dashed var(--c-white);outline-offset:3px}article.card-13 .open-profile:after,article.card-13 .open-profile:before{background-color:var(--c-white);border-radius:2px;content:"";display:block;grid-column:1/2;grid-row:1/2;height:20px;margin-inline:auto;width:3px}article.card-13 .open-profile:after{height:3px;width:20px}article.card-13 .profile{height:100%;pointer-events:none;position:absolute;top:0;width:100%}article.card-13 .open.profile{height:100%;pointer-events:all}article.card-13 .profile-header{background-color:var(--c-white);height:calc(50% - 20px);position:absolute;top:-50%}article.card-13 .open .profile-header{top:0}article.card-13 .profile-bg{background-color:#e27a46}article.card-13 .profile-bg :focus-visible,article.card-13 .profile-bg:focus-within{outline-color:outline-clr(#e27a46)}article.card-13 .profile-bg{align-content:center;bottom:calc(-50% - 20px);display:grid;gap:15px;height:calc(50% + 20px);padding-block-start:20px;position:absolute;width:100%}article.card-13 .profile-bg .buttons{display:flex;gap:15px;justify-content:space-between;margin-inline:auto;width:auto}article.card-13 .profile-bg .buttons button{border:1px solid var(--c-white);border-radius:50%;color:var(--c-white);cursor:pointer;display:grid;font-size:1.25rem;height:50px;place-items:center;transition:all .3s ease-in-out;width:50px}article.card-13 .profile-bg .buttons button:is(:hover,:focus-visible){background-color:var(--c-white);box-shadow:2px 5px 10px rgba(0,0,0,.3);color:var(--c-orange)}article.card-13 .open .profile-bg{bottom:0;transition:bottom 1s ease-in-out}article.card-13 .profile .name{text-align:center}article.card-13 .profile-pic{border:2px solid var(--c-white);border-radius:50%;box-shadow:2px 5px 15px rgba(0,0,0,.3);left:50%;overflow:hidden;position:absolute;top:calc(-50% - 20px);transform:translate(-50%,-50%);width:100px}article.card-13 .open .profile-pic{top:calc(50% - 20px)}article.card-13 .cta.close{color:var(--c-white);font-size:1.725rem;position:absolute;right:10px;rotate:45deg;top:-60px;transition:color .5s ease-in-out,background-color .5s ease-in-out,box-shadow .5s ease-in-out,border .5s ease-in-out}article.card-13 .cta.close:is(:hover,:focus-visible){background-color:var(--c-white);border:1px solid var(--c-orange);box-shadow:2px 5px 10px rgba(0,0,0,.3);color:var(--c-orange)}article.card-13 .open .cta.close{top:10px}article.card-13 .open .profile-header{transition:top 1s ease-in-out}article.card-13 .open .profile-pic{transition:top 1s ease-in-out .2s}article.card-13 .open .cta.close{transition:top 1s ease-in-out .6s,color .5s ease-in-out,background-color .5s ease-in-out,box-shadow .5s ease-in-out,border .5s ease-in-out}article.card-13 .cta.close{transition:top 1s ease-in-out,color .5s ease-in-out,background-color .5s ease-in-out,box-shadow .5s ease-in-out,border .5s ease-in-out}article.card-13 .profile-pic{transition:top 1s ease-in-out .4s}article.card-13 .profile-bg{transition:bottom 1s ease-in-out .6s}article.card-13 .profile-header{transition:top 1s ease-in-out .6s}.card-14:is(:hover,.animate,:focus-visible,:focus-within) .bicycle,.card-14:is(:hover,.animate,:focus-visible,:focus-within) .fly-1,.card-14:is(:hover,.animate,:focus-visible,:focus-within) .fly-2,.card-14:is(:hover,.animate,:focus-visible,:focus-within) .helicopter,.card-14:is(:hover,.animate,:focus-visible,:focus-within) .line-1,.card-14:is(:hover,.animate,:focus-visible,:focus-within) .line-2{animation-play-state:running}.card-14 .card__top{background-color:var(--c-green);position:relative}.card-14 .frame{background-color:none;box-shadow:none;height:160px;overflow:visible;width:clamp(240px,330px,80%)}.card-14 .card,.card-14 .card *{border-radius:5px}.card-14 .wrapper{height:100%;overflow:hidden;width:100%}.card-14 .track{bottom:25px;left:50%;position:absolute;transform:translateX(-50%)}.card-14 line,.card-14 path{stroke:var(--c-black);stroke-linecap:round;stroke-width:3}.card-14 .fly-1{animation:wind 1.5s linear infinite;animation-play-state:paused;transform:translateX(100%)}.card-14 .fly-2{animation:wind-2 1s linear .7s infinite;animation-play-state:paused;transform:translateX(85%)}.card-14 .box{height:130px;width:180px}@keyframes wind{to{transform:translateX(-80%)}}@keyframes wind-2{to{transform:translateX(-100%)}}.card-14 .line-1{animation:ride-slow .4s linear infinite;animation-play-state:paused;stroke-dasharray:15 30}.card-14 .line-2{animation:ride .5s linear infinite;animation-play-state:paused;bottom:5px;position:absolute;stroke-dasharray:7 30}@keyframes ride{0%{stroke-dashoffset:-74}}@keyframes ride-slow{0%{stroke-dashoffset:-45}}.card-14 .bicycle{animation:bump .6s ease-in-out infinite;animation-play-state:paused;transform-origin:bottom}.card-14 .helicopter{animation:fly 2s ease-in-out infinite;animation-play-state:paused}@keyframes bump{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-50%) scaleY(.97)}}.card-14 .frame{perspective:600px}.card-14 .card{background-color:var(--c-yellow);box-shadow:5px 5px 20px rgba(0,0,0,.6);height:100%;position:relative;transform-style:preserve-3d;transition:all 1s ease-in-out;width:100%}.card-14 .box,.card-14 .card__face img,.card-14 .wrapper{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.card-14 .frame:is(:hover,:focus-visible) .card{box-shadow:5px -5px 20px rgba(0,0,0,.6);transform:rotateX(180deg)}.card-14 .card__face{backface-visibility:hidden;background-color:var(--c-yellow);height:100%;position:absolute;width:100%}.card-14 .card__face--back{transform:rotateX(180deg)}.card-15 .card__top{background:linear-gradient(to right top,var(--c-orange),var(--c-yellow));color:#666;padding-block:20px}.card-15 button{border:none}.card-15 .frame{background-color:#fff;border-radius:5px;box-shadow:4px 8px 16px 0 rgba(0,0,0,.3);padding:1rem;position:relative;width:clamp(240px,300px,70%)}.card-15 .frame :focus-visible,.card-15 .frame:focus-within{outline-color:outline-clr(#fff)}.card-15 .frame p{border-block-end:1px solid #ccc;text-align:center}.card-15 .loading-bar{background-color:var(--c-orange);height:3px;position:absolute;top:50px;width:0}.card-15 .loading-bar.animation{animation:load15 4s ease-out forwards}@keyframes load15{to{width:208px}}.card-15 .container{height:80px;position:relative;width:clamp(100px,70%,200px)}.card-15 .drop{border:1px dashed grey;border-radius:5px;display:flex;height:80px;justify-content:flex-start;position:relative;transition:opacity .5s ease-in-out;width:100%}.card-15 .upload-file-input{color:transparent;cursor:pointer}.card-15 input{inset:0;position:absolute}.card-15 input::file-selector-button{background:transparent;border:none;color:transparent}.card-15 .cloud-icon,.card-15 .done-icon,.card-15 .loading-icon{font-size:2.5rem;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .5s ease-in-out}.card-15 .loading-icon.animation{animation:rotate15 4s ease-out forwards}@keyframes rotate15{to{transform:translate(-50%,-50%) rotate(1turn)}}.card-15 .cloud-icon{opacity:.5}.card-15 .container,.card-15 .drop,.card-15 .upload-btn{margin-block-start:1em;margin-inline:auto}.card-15 .upload-btn{background-color:var(--c-orange);border-radius:3px;box-shadow:0 2px 0 hsl(from var(--c-orange) h s 20%);color:#fff;cursor:pointer;display:block;font-size:16.4px;padding-block:.5em;transition:box-shadow .3s ease-in-out;width:140px}.card-15 .upload-btn:is(:hover,:focus-visible){box-shadow:0 2px 0 hsl(from var(--c-orange) h s 20%),0 0 10px 3px hsla(from var(--c-orange) h s l/.8)}.card-15 .file-name{display:block;font-size:12.8px;padding:10px}.card-16:is(:hover,.animate,:focus-visible) .blobby,.card-16:is(:hover,.animate,:focus-visible) .octa-sparkle,.card-16:is(:hover,.animate,:focus-visible) .octagon,.card-16:is(:hover,.animate,:focus-visible) .ring,.card-16:is(:hover,.animate,:focus-visible) .tri-sparkle,.card-16:is(:hover,.animate,:focus-visible) .triangle{animation-play-state:running}.card-16 .card__top{background:var(--c-saturated);color:#666}.card-16 .center{display:grid;place-items:center}.card-16 .blob{background-color:#fff;height:100px;width:100px}.card-16 .blobby{animation:animation 5s cubic-bezier(.21,-.46,.73,1.61) infinite;animation-play-state:paused;border-radius:50%}.card-16 .octagon{animation:octa 5s cubic-bezier(.21,-.46,.73,1.61) infinite;animation-play-state:paused;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);position:absolute;transform:rotate(22deg)}.card-16 .triangle{animation:tria 5s cubic-bezier(.21,-.46,.73,1.61) infinite;animation-play-state:paused;clip-path:polygon(50% 0,0 100%,100% 100%);position:absolute}.card-16 .octa-sparkle,.card-16 .ring,.card-16 .tri-sparkle{animation:tri-sparkle 5s linear infinite;animation-play-state:paused;display:grid;height:200px;place-items:center;position:absolute;width:200px}.card-16 .ring{animation:ring 5s linear infinite;animation-play-state:paused}@keyframes ring{0%,75%{opacity:1;transform:scale(0)}80%{opacity:.5;transform:scale(.8)}82%,to{opacity:0;transform:scale(1)}}.card-16 .tri-sparkle *{background-color:#fff;border-radius:8px;height:25px;position:absolute;width:5px}.card-16 .octa-sparkle{animation:octa-sparkle 5s linear infinite;animation-play-state:paused;transform:translateX(-1px)}.card-16 .octa-sparkle *{border-radius:8px;height:100%;position:absolute;width:5px}.card-16 .octa-sparkle-2{transform:rotate(45deg)}.card-16 .octa-sparkle-3{transform:rotate(-45deg)}.card-16 .octa-sparkle-4{transform:rotate(90deg)}.card-16 .sparkle-1,.card-16 .sparkle-2{background-color:#fff;border-radius:8px;height:25px;top:0;width:5px}.card-16 .sparkle-2{bottom:0;top:unset}.card-16 .tri-sparkle-1{top:0}.card-16 .tri-sparkle-2{bottom:-3px;left:7px;transform:rotate(45deg)}.card-16 .tri-sparkle-3{bottom:-3px;right:7px;transform:rotate(-45deg)}@keyframes tri-sparkle{0%,52%{opacity:1;transform:scale(0)}58%,to{opacity:0;transform:scale(1.5)}}@keyframes octa-sparkle{0%,30%{opacity:1;transform:translateX(-1px) scale(0)}36%,to{opacity:0;transform:translateX(-1px) scale(1.5)}}@keyframes animation{0%{transform:translateY(-250px) scaleY(1.2)}10%{transform:translateY(50px) scaleY(.85)}14%{transform:translateY(-30px) scaleY(1.2)}18%,20%{transform:translate(0) scaleY(1)}24%{transform:translate(0) scale(1.2)}32%,72%{transform:translate(0) scale(0)}80%{transform:translate(0) scale(1.2)}84%,86%{transform:translate(0) scale(1)}90%{transform:translateY(-30px) scaleY(1)}to{transform:translateY(400px) scaleY(1.2)}}@keyframes octa{0%,28%{transform:translate(0) rotate(15deg) scale(0)}36%{transform:translate(0) rotate(15deg) scale(1.2)}40%,42%{transform:translate(0) rotate(15deg) scale(1)}46%{transform:translate(0) rotate(15deg) scale(1.2)}54%,to{transform:translate(0) rotate(15deg) scale(0)}}@keyframes tria{0%,50%,76%,to{transform:translate(0) scale(0)}58%,68%{transform:translate(0) scale(1.2)}62%,64%{transform:translate(0) scale(1)}}.card-17 .center:is(:hover,.animate),.card-17:is(:focus-visible,.animate) .center{border-radius:50%;transform:rotate(90deg)}.card-17 .center:is(:hover,.animate) svg,.card-17:is(:focus-visible,.animate) .center svg{transform:rotate(-90deg)}.card-17 .center:is(:hover,.animate) .light,.card-17:is(:focus-visible,.animate) .center .light{fill:hsl(from var(--c-saturated) h s 25%)}.card-17 .center:is(:hover,.animate) .middle,.card-17:is(:focus-visible,.animate) .center .middle{fill:hsl(from var(--c-saturated) h s 75%)}.card-17 .center:is(:hover,.animate) .dark,.card-17:is(:focus-visible,.animate) .center .dark{fill:var(--c-saturated)}.gallery__card:is(:hover,:focus-visible) .card-17 .center{border-radius:50%;transform:rotate(90deg)}.gallery__card:is(:hover,:focus-visible) .card-17 .center svg{transform:rotate(-90deg)}.gallery__card:is(:hover,:focus-visible) .card-17 .center .light{fill:hsl(from var(--c-saturated) h s 25%)}.gallery__card:is(:hover,:focus-visible) .card-17 .center .middle{fill:hsl(from var(--c-saturated) h s 75%)}.gallery__card:is(:hover,:focus-visible) .card-17 .center .dark{fill:var(--c-saturated)}.card-17 .card__top{background-image:repeating-linear-gradient(45deg,#fff8f8 0 10%,#242424 10% 11%)}.card-17 .center{aspect-ratio:1/1;background-color:#383838;box-shadow:5px 5px 15px rgba(0,0,0,.4);display:grid;place-items:center;position:relative;transition:all .3s ease-in;width:50%}.card-17 .penrose *{grid-column:1/2;grid-row:1/2;transition:transform .3s ease-in,fill .3s ease-in;width:70%}.card-17 .light{fill:hsl(from var(--c-orange) h s 75%)}.card-17 .middle{fill:var(--c-orange)}.card-17 .dark{fill:hsl(from var(--c-orange) h s 25%)}article.card-18:is(:hover,.animate,:focus-visible) .card{animation-play-state:running}article.card-18 .card__top{display:block;height:100%;position:relative;width:100%}article.card-18>*{width:100%}article.card-18 .bottom,article.card-18 .top{height:50%;width:100%}article.card-18 .top{background-color:var(--c-saturated)}article.card-18 .bottom{background-color:var(--c-orange)}article.card-18 .container{height:100%;overflow:hidden;perspective:600px;-webkit-perspective:600px;position:absolute}article.card-18 .card,article.card-18 .container{left:50%;top:50%;transform:translate(-50%,-50%);width:100%}article.card-18 .card{animation:rotate18 5s ease-out infinite;animation-play-state:paused;border-radius:50%;height:350px;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}article.card-18 .side-1{background-color:var(--c-orange)}article.card-18 .side-2{background-color:var(--c-saturated);transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}article.card-18 .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%;height:100%;position:absolute;width:100%}@keyframes rotate18{0%,50%,to{transform:translate(-50%,-50%) rotateX(90deg);-webkit-transform:translate(-50%,-50%) rotateX(90deg)}15%{transform:translate(-50%,-50%) rotateX(160deg);-webkit-transform:translate(-50%,-50%) rotateX(160deg)}20%{transform:translate(-50%,-50%) rotateX(40deg);-webkit-transform:translate(-50%,-50%) rotateX(40deg)}25%{transform:translate(-50%,-50%) rotateX(100deg);-webkit-transform:translate(-50%,-50%) rotateX(100deg)}30%{transform:translate(-50%,-50%) rotateX(75deg);-webkit-transform:translate(-50%,-50%) rotateX(75deg)}35%{transform:translate(-50%,-50%) rotateX(94deg);-webkit-transform:translate(-50%,-50%) rotateX(94deg)}40%{transform:translate(-50%,-50%) rotateX(86deg);-webkit-transform:translate(-50%,-50%) rotateX(86deg)}45%{transform:translate(-50%,-50%) rotateX(92deg);-webkit-transform:translate(-50%,-50%) rotateX(92deg)}65%{transform:translate(-50%,-50%) rotateX(30deg);-webkit-transform:translate(-50%,-50%) rotateX(30deg)}70%{transform:translate(-50%,-50%) rotateX(140deg);-webkit-transform:translate(-50%,-50%) rotateX(140deg)}75%{transform:translate(-50%,-50%) rotateX(70deg);-webkit-transform:translate(-50%,-50%) rotateX(70deg)}80%{transform:translate(-50%,-50%) rotateX(105deg);-webkit-transform:translate(-50%,-50%) rotateX(105deg)}85%{transform:translate(-50%,-50%) rotateX(85deg);-webkit-transform:translate(-50%,-50%) rotateX(85deg)}90%{transform:translate(-50%,-50%) rotateX(95deg);-webkit-transform:translate(-50%,-50%) rotateX(95deg)}95%{transform:translate(-50%,-50%) rotateX(88deg);-webkit-transform:translate(-50%,-50%) rotateX(88deg)}}.card-19 .wrapper{display:grid;gap:11px;grid-template-columns:repeat(3,64px);justify-content:space-between;padding:0;place-items:center;position:relative;width:80%}.card-19 input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:grid;left:unset;place-items:center;position:relative;text-align:center;width:64px;z-index:2}.card-19 input:before{border:3px solid #fff;border-radius:50%;content:"";cursor:pointer;height:64px;margin-inline:auto;visibility:visible;width:64px}.card-19 .ball{background-color:#fff;border-radius:50%;height:48px;left:32px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .4s ease-in-out;width:48px;z-index:1}.card-19 .mid:checked~.ball{left:50%}.card-19:has(.mid:checked) .bg{left:-100%}.card-19 .right:checked~.ball{left:calc(100% - 32px)}.card-19:has(.right:checked) .bg{left:-200%}.card-19 .bg{display:grid;grid-template-columns:repeat(3,1fr);height:100%;left:0;position:absolute;top:0;transition:left .8s ease-out;width:300%}.card-19 .bg>*{height:100%}.card-19 .bg-1{background-color:var(--c-yellow)}.card-19 .bg-2{background-color:var(--c-saturated)}.card-19 .bg-3{background-color:var(--c-orange)}article.card-20 .card__top{align-items:center;background-color:#263b40;display:flex;flex-direction:column;justify-content:center}article.card-20 .card__top :focus-visible,article.card-20 .card__top:focus-within{outline-color:outline-clr(#263b40)}article.card-20.animate .circle{animation:shrink 1s ease-in-out forwards}article.card-20.animate .circle-ring{animation:shrink 1s ease-in-out .2s forwards}article.card-20.animate .envelope{animation:send .7s linear forwards}article.card-20.animate .plane{animation:fold .8s linear .8s forwards,fly 1.2s ease-in 1.4s forwards}article.card-20.animate .send-btn{animation:btn-disappear 3s ease-in-out 2.8s forwards}article.card-20.animate .reset-btn{animation:fade 3s linear 2.8s forwards}article.card-20 .circle,article.card-20 .circle-ring{display:grid;place-items:center}article.card-20 .center>*{grid-column:1/2;grid-row:1/2}article.card-20 .center{height:140px;margin-block-end:20px;position:relative;width:140px}article.card-20 .circle,article.card-20 .circle-ring{border-radius:50%;height:100%;width:100%}article.card-20 .circle{background-color:#304a50}article.card-20 .circle-ring{border:5px solid #304a50}@keyframes shrink{15%{transform:scale(1.1)}to{transform:scale(0)}}article.card-20 .envelope,article.card-20 .plane{left:50%;position:absolute;stroke:#d9d9d9;top:50%;transform:translate(-50%,-25px);width:90px}article.card-20 .envelope{height:45px;stroke-dasharray:250;stroke-dashoffset:0;stroke-linejoin:round;width:90px}article.card-20 .plane{height:99px;stroke-dasharray:280;stroke-dashoffset:280;width:90px}article.card-20 .send-btn{background-color:#d9d9d9;border:none;border-radius:30px;color:#263b40;cursor:pointer;font-size:16px;font-weight:600;height:45px;position:relative;transition:background-color .25s ease-in-out,color .25s ease-in-out;width:150px}article.card-20 .send-btn:is(:hover,:focus-visible){background-color:#0fbda0;color:#fff}@keyframes send{to{stroke-dashoffset:280}}@keyframes fold{to{stroke:#ecea79;stroke-dashoffset:0}}@keyframes fly{0%{transform:translate(-50%,-25px)}20%{transform:translate(-60%,-17px)}50%{opacity:1}90%,to{opacity:0;transform:translate(80%,-126px) scale(.5)}}@keyframes btn-disappear{15%,20%{background-color:#0fbda0;width:200px}30%,37%{transform:scale(1);width:45px}40%{background-color:#0fbda0;opacity:1;transform:scale(1.1)}55%{opacity:0;transform:scale(0);width:45px}80%{opacity:0;transform:scale(1);width:200px}to{opacity:1}}@keyframes fade{15%,20%{opacity:0}80%{opacity:0}to{opacity:1}}.card-21:is(:hover,.animate,:focus-visible) .blue-ghost,.card-21:is(:hover,.animate,:focus-visible) .eye,.card-21:is(:hover,.animate,:focus-visible) .pacman,.card-21:is(:hover,.animate,:focus-visible) .points,.card-21:is(:hover,.animate,:focus-visible) .red-ghost{animation-play-state:running}.card-21 .card__top{align-items:center;display:flex;flex-direction:column;justify-content:center}.card-21 .center{left:50%;top:50%;transform:translate(-50%,-50%)}.card-21 .center,.card-21 .pacman{height:120px;position:absolute;width:120px}.card-21 .pacman{animation:pacman .7s linear infinite;animation-play-state:paused;background-color:#ebc247;border-radius:50%;clip-path:polygon(0 0,0 100%,50% 100%,50% 50%,100% 50%,100% 0);transform:rotate(-90deg)}@keyframes pacman{0%,to{clip-path:polygon(0 0,0 100%,50% 100%,50% 50%,50% 100%,100% 100%,100% 0);transform:rotate(-90deg)}25%,75%{clip-path:polygon(0 0,0 100%,50% 100%,50% 50%,100% 100%,100% 50%,100% 0)}50%{clip-path:polygon(0 0,0 100%,50% 100%,50% 50%,100% 50%,100% 50%,100% 0);transform:rotate(-45deg)}}@keyframes pacman-2{0%,to{transform:rotate(0deg)}50%{transform:rotate(44deg)}}.card-21 .eye{animation:pacman-eye .7s linear infinite;animation-play-state:paused;background-color:#333;border-radius:50%;height:13px;left:50%;position:absolute;top:50%;width:13px;z-index:5555}@keyframes pacman-eye{0%,to{transform:translate(30%,-280%)}50%{transform:translate(-15%,-300%)}}.card-21 .points{animation:eat 2s linear infinite;animation-play-state:paused;position:absolute;right:-10%;stroke:#ebc247;stroke-dasharray:0 30;stroke-dashoffset:-90;stroke-linecap:round;stroke-width:10;top:42%;width:70%}@keyframes eat{to{stroke-dashoffset:0}}.card-21 .blue-ghost,.card-21 .red-ghost{height:60px;width:60px}.card-21 .red-ghost{animation:red-waka 3s linear .5s infinite;animation-play-state:paused;fill:red;left:-20%;position:absolute;stroke:red;stroke-linecap:round;stroke-linejoin:round;top:10%;transform:scaleX(-1)}@keyframes red-waka{0%{left:-20%;top:10%}15%{left:15%;top:10%}30%{left:15%;top:80%}45%{left:60%;top:80%}55%{left:60%;top:60%}65%{left:85%;top:60%;transform:scaleX(-1)}74%{transform:scaleX(1)}75%{left:85%;top:75%}to{left:-50%;top:75%;transform:scaleX(1)}}.card-21 .blue-ghost{animation:blue-waka 3s linear infinite;animation-play-state:paused;fill:blue;position:absolute;right:-25%;stroke:blue;stroke-linecap:round;stroke-linejoin:round}@keyframes blue-waka{0%{bottom:20%;right:-25%}10%{bottom:20%;right:10%}30%{bottom:75%;right:10%}45%{bottom:75%;right:50%}50%{bottom:80%;right:50%}58%{bottom:80%;right:80%}70%{bottom:20%;right:80%;transform:scaleX(1)}74%{transform:scaleX(-1)}75%{bottom:20%;right:70%}76%{transform:scaleX(1)}90%{bottom:80%;right:70%}to{bottom:80%;right:120%}}.card-22:is(:hover,.animate,:focus-visible) .progress-bar,.gallery__card:is(:hover,:focus-visible) .progress-bar{animation-play-state:running}.card-22 .card__top{background-color:#213540}.card-22 .frame{color:#fff;display:grid;grid-template-rows:auto 2fr 1fr;height:-moz-fit-content;height:fit-content;padding:30px;text-align:center;width:100%}.card-22 .frame *{margin-inline:auto}.card-22 .top{font-size:16px;margin-block-end:.5em;text-transform:uppercase}.card-22 .top span{display:block;font-weight:600;margin-block-start:-5px}.card-22 .center .data__text,.card-22 .top span{font-size:32px}.card-22 .data__text span{font-size:14px}.card-22 .data__text{font-size:18px}.card-22 .bottom .small{font-size:12px}.card-22 .data__text span,.card-22 .small{color:#fff;display:block;margin-block-start:-5px}.card-22 .center{width:50%}.card-22 .center svg{stroke-width:9}.card-22 .bottom{display:grid;gap:8%;grid-template-columns:repeat(2,1fr);justify-content:center;width:65%}.card-22 .center,.card-22 .kilometers,.card-22 .steps{align-items:center;display:grid;position:relative}.card-22 .center *,.card-22 .kilometers *,.card-22 .steps *{grid-column:1/1;grid-row:1/1}.card-22 svg{fill:none;stroke:#1a2932;stroke-width:7;width:100%}.card-22 .progress-bar{animation:progress 2s ease-out forwards;animation-play-state:paused;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}.card-22 .center .progress-bar{stroke:#28e2b0;stroke-dasharray:80 20}.card-22 .bottom .progress-bar{stroke:#5be0ec;stroke-dasharray:65 35}.card-22 .kilometers .progress-bar{stroke-dasharray:40 60}@keyframes progress{0%{stroke-dasharray:10 90}}.card-23:is(:hover,.animate,:focus-visible) .ball,.card-23:is(:hover,.animate,:focus-visible) .bottom.small,.card-23:is(:hover,.animate,:focus-visible) .bracket,.card-23:is(:hover,.animate,:focus-visible) .bracket:after,.card-23:is(:hover,.animate,:focus-visible) .bracket:before,.card-23:is(:hover,.animate,:focus-visible) .center,.card-23:is(:hover,.animate,:focus-visible) .line-left,.card-23:is(:hover,.animate,:focus-visible) .line-right,.card-23:is(:hover,.animate,:focus-visible) .top.small{animation-play-state:running}.card-23.reset .ball,.card-23.reset .bottom.small,.card-23.reset .bracket,.card-23.reset .bracket:after,.card-23.reset .bracket:before,.card-23.reset .center,.card-23.reset .line-left,.card-23.reset .line-right,.card-23.reset .top.small{animation:none}.card-23 .card__top{background-color:var(--c-saturated);color:#fff;text-align:center}.card-23 .card__top span{display:block;text-transform:uppercase}.card-23 .wrapper{height:auto;left:50%;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:clamp(250px,275px,70%)}.card-23 .center{font-size:35px;font-weight:800;margin-block:-5px}.card-23 .bracket:after,.card-23 .bracket:before{animation:bracket .5s linear 1.8s forwards;animation-play-state:paused;background-color:#fff;content:"";display:block;height:4px;position:absolute;width:0}.card-23 .bracket:after{bottom:0}.card-23 .bracket-right{right:0}.card-23 .bracket-left:after,.card-23 .bracket-left:before{transform-origin:left}.card-23 .bracket-right:after,.card-23 .bracket-right:before{right:0;transform-origin:right}.card-23 .ball,.card-23 .bracket,.card-23 .line{background-color:#fff;position:absolute;top:52%}.card-23 .ball{animation:ball .7s ease-in-out forwards;animation-play-state:paused;border-radius:50%;height:50px;left:50%;transform:translate(-50%,-50%);transform-origin:center;width:50px}.card-23 .line{height:4px;transform:translateY(-50%)}.card-23 .line-left{animation:line-left 1.2s ease-in-out .4s forwards;animation-play-state:paused}.card-23 .line-right{animation:line-right 1.2s ease-in-out .4s forwards;animation-play-state:paused}.card-23 .bracket{animation:unfold .4s ease-in-out 1.5s forwards;animation-play-state:paused;height:4px;opacity:0;transform:translate(-50%,-50%);width:4px}.card-23 .center{animation:big-text .4s ease-in-out 1.5s forwards;animation-play-state:paused;transform:scaleY(0)}.card-23 .bottom.small,.card-23 .top.small{font-size:20px;font-weight:200}.card-23 .top.small{animation:top-small .8s ease-in-out 2.2s forwards;animation-play-state:paused;opacity:0}.card-23 .bottom.small{animation:bottom-small .8s ease-in-out 2.2s forwards;animation-play-state:paused;opacity:0}@keyframes ball{30%{height:60px;width:60px}90%{opacity:1}to{height:4px;opacity:0;width:4px}}@keyframes line-left{0%{left:50%;right:50%}50%{left:0;right:50%}to{left:0;right:100%}}@keyframes line-right{0%{left:50%;right:50%}50%{left:50%;right:0}to{left:100%;right:0}}@keyframes unfold{20%{opacity:1}to{height:70px;opacity:1}}@keyframes big-text{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes bracket{to{width:25px}}@keyframes top-small{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes bottom-small{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}.card-24{background:linear-gradient(to top right,#e49e58,#2298d3)}.card-24 .center>*{display:grid;grid-column:1/2;grid-row:1/2;place-items:center}.card-24 button{background-color:transparent;border:2px solid #fff;border-radius:60px;color:#fff;cursor:pointer;font-size:1.25rem;font-weight:500;height:60px;letter-spacing:2px;position:relative;text-transform:uppercase;transition:background-color .3s ease-in-out,width .3s ease-in-out,border-color .3s ease-in-out;width:220px}.card-24 button>*{height:auto;width:auto}.card-24 button:hover{background-color:rgba(0,0,0,.3)}.card-24 button.animate#btn{border-color:rgba(0,0,0,.3);cursor:pointer;width:60px}.card-24 button.animate#btn:is(:hover,:focus-visible,:focus,:target,:active){background-color:transparent;border-color:rgba(0,0,0,.3)}.card-24 button.animate#btn .btn__text{opacity:0}.card-24 button.animate#btn .fa-check{animation:appear-24 .3s ease-in-out 1.4s forwards}.card-24 .circle.animate{animation:circle-24 2s ease-in-out}.card-24 .btn__text,.card-24 i{border:unset}.card-24 .btn__text{transition:opacity .3s ease-in-out}.card-24 svg{fill:none;pointer-events:none;width:120px}.card-24 .circle{stroke:#fff;stroke-dasharray:0 100;stroke-width:1;transform:rotate(-90deg);transform-origin:center}@keyframes circle-24{75%{opacity:1;r:12;stroke-dasharray:110}90%,to{opacity:0;r:20;stroke-dasharray:110}}.card-24 .fa-check{color:#fff;font-size:1.5rem;opacity:0}@keyframes appear-24{to{opacity:1}}.card-25 .card__top{background-color:#0035a7;color:#000}.card-25 .card__top :focus-visible,.card-25 .card__top:focus-within{outline-color:outline-clr(#0035a7)}.card-25 .frame{box-shadow:none;height:80%;overflow:visible;position:relative;width:250px}.card-25 .back-face,.card-25 .card25{height:100%;width:100%}.card-25 .front-face{cursor:pointer;height:100px;left:50%;top:50%;transform:translate(-50%,-70%);transition:transform .5s ease-in-out;width:60px}.card-25 .back-face{background-color:#fff;border-radius:5px;box-shadow:5px 5px 10px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;transform:rotateY(-180deg);transition:all .5s ease-in-out}.card-25 .back-face :focus-visible,.card-25 .back-face:focus-within{outline-color:outline-clr(#fff)}.card-25 .back-face>*+*{margin-block-start:10px}.card-25 .back-face .hero-img{background:no-repeat url(https://100dayscss.com/codepen/surfshop.jpg) 50%;background-size:cover;border-radius:5px 5px 0 0;height:35%;width:100%}.card-25 .back-face .contact{align-content:center;flex:1;text-align:center}.card-25 .back-face .name{font-weight:600;margin-block-end:5px}.card-25 .back-face .address{font-size:15px}.card-25 .back-face .buttons{display:flex;font-size:16px;height:45px}.card-25 .back-face button{background-color:transparent;border:none;color:#0847ce;cursor:pointer;height:100%;transition:background-color .3s ease-in-out,color .3s ease-in-out;width:50%}.card-25 .back-face button:is(:hover,:focus-visible){background-color:#0847ce;color:#fff}.card-25 .back-face .save{border-right:1px solid #0847ce}.card-25 svg{animation:hover 2s ease-in-out infinite;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:50px}.card-25 .shadow{animation:shadow 2s ease-in-out infinite;background-color:rgba(0,0,0,.4);border-radius:50%;bottom:0;filter:blur(1px);height:5px;left:50%;position:absolute;transform:translateX(-50%);width:20px}@keyframes hover{50%{transform:translate(-50%,-60%)}}@keyframes shadow{50%{transform:translateX(-50%) scale(1.5)}}.card-25 .frame{perspective:400px}.card-25 .card25{border-radius:5px;transform-style:preserve-3d;transition:all 1s ease-in-out}.card-25 .face{position:absolute}.card-25 .back-face{backface-visibility:hidden}.card-25 .card25.animate{transform:rotateY(-180deg)}.card-25 .card25.animate .back-face{opacity:1}.card-26 .card__top{background:#dccbcb}.card-26 .frame{animation:appear-26 .7s ease-in-out forwards;background-color:#fff;border-radius:3px;color:#6d403c;height:160px;opacity:0;overflow:visible;text-align:center;width:250px}.card-26 .frame.disappear{animation:disappear-26 .5s ease-in-out forwards}.card-26 .content{height:100%;opacity:0;padding:30px 25px;pointer-events:none;position:absolute;width:100%}.card-26 .content:first-child{opacity:1}@keyframes appear-26{0%{opacity:0;transform:scale(.8)}to{opacity:1;pointer-events:all;transform:scale(1)}}@keyframes disappear-26{0%{opacity:1;transform:scale(1)}to{opacity:0;pointer-events:none;transform:scale(1.1)}}.card-26 .page{background-color:#917ab8;clip-path:polygon(0 0,100% 0,100% 100%,0 0);color:#fff;font-size:16px;font-weight:600;height:50px;padding:5px 10px 0 0;position:absolute;right:0;text-align:right;top:0;width:50px}.card-26 .heading{font-size:16px;font-weight:600;margin-block-end:10px}.card-26 .content__text{color:#8d534e;font-size:14px}.card-26 button{background-color:#ba5e5e;border:none;border-radius:0;bottom:0;color:#fff;cursor:pointer;font-size:16px;height:45px;left:0;position:absolute;right:0;transition:all .3s ease-in-out}.card-26 button:is(:hover,:focus-visible){background-color:#8f3d3d}.card-27 .card__top{background:#dccbcb;color:#0e3936}.card-27 .frame{background-color:#f7eee4;border-radius:3px;box-shadow:5px 5px 10px rgba(0,0,0,.1);margin:20px;padding:20px;width:250px}.card-27 .date{align-content:center;border-block-end:1px solid rgba(0,0,0,.3);color:#18625d;display:grid;padding-block-end:15px;place-items:center;text-align:center}.card-27 .day{font-size:22px;margin-block-end:5px}.card-27 .date-year{font-size:14px}.card-27 .list{display:grid;font-size:15px;gap:20px;list-style:none;padding-block-start:20px}.card-27 .list-item{position:relative}.card-27 label{align-items:center;cursor:pointer;display:flex;justify-content:space-between;transition:color .3s ease-in-out}.card-27 li input{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;position:absolute}.card-27 label:has(input:checked){color:#afcac8}.card-27 input:checked+.checkbox-container svg{stroke-dasharray:100}.card-27 input:not(:checked)+.checkbox-container svg{transition:stroke-dasharray .3s ease-in-out}.card-27 input:checked+.checkbox-container .checkbox{opacity:0;transform:scale(1.4)}.card-27 input:not(:checked)+.checkbox-container .checkbox{transition:all .3s ease-in-out .3s}.card-27 .checkbox-container{cursor:pointer;display:grid;height:20px;width:20px}.card-27 .checkbox-container>*{grid-column:1/2;grid-row:1/2}.card-27 .checkbox-container .checkbox{border:1px solid #d65c4c;border-radius:50%;height:100%;transition:all .3s ease-in-out;width:100%}.card-27 svg{height:100%;stroke:#afcac8;stroke-dasharray:0 100;transition:stroke-dasharray .3s ease-in-out .3s;width:100%}.card-27 label:has(input:focus-visible){outline:3px dashed var(--c-black);outline-offset:3px}.card-28:is(:hover,.animate,:focus-visible) .bell,.card-28:is(:hover,.animate,:focus-visible) .ring{animation-play-state:running}.card-28 .card__top{background:var(--c-orange)}.card-28 .wrapper{display:block;height:90px;position:relative;width:90px}.card-28 svg{display:inline-block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.card-28 svg.bell{height:auto;width:80px}.card-28 .bell{animation:ring-28 2.5s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 18px;z-index:5}.card-28 .alarm{stroke-dasharray:12.5 25 25 26;transform:translate(-50%,-45%);width:250px}.card-28 .ring{animation:alarm 2.5s ease-out infinite;animation-play-state:paused;opacity:0;transform-origin:center}.card-28 .ring-1{animation-delay:.5s}.card-28 .ring-2{animation-delay:1s}@keyframes alarm{0%{opacity:1}50%,to{opacity:0;transform:scale(2)}}@keyframes ring-28{0%,50%,to{transform:translate(-50%,-50%) rotate(0deg)}15%,21%,27%,3%,33%,39%,45%,9%{transform:translate(-50%,-50%) rotate(-10deg)}12%,18%,24%,30%,36%,42%,48%,6%{transform:translate(-50%,-50%) rotate(10deg)}}.card-29 .card__top{background:var(--c-saturated)}.card-29 .frame{box-shadow:5px 10px 20px rgba(0,0,0,.2);position:absolute;top:15%}.card-29 .search-bar{align-items:center;background-color:#fff;border-block-end:1px solid var(--c-saturated);display:flex;justify-content:space-between;padding:var(--padding-outline);width:250px}.card-29 input{border:none;font-size:20px;font-weight:600;padding-inline:10px 15px;width:100%}.card-29 input::-moz-placeholder{color:hsl(from var(--c-saturated) h s 35%)}.card-29 input::placeholder{color:hsl(from var(--c-saturated) h s 35%)}.card-29 input:focus-visible{outline:none}.card-29 .search-bar:has(input:focus-visible){border:3px solid var(--c-black)}.card-29 i{font-size:20px;height:20px;position:relative}.card-29 .accordeon{background-color:#fff;display:none;font-size:14px;padding-inline:15px}.card-29 .accordeon *{cursor:pointer;padding-block:10px}.card-29 .accordeon .animate,.card-29 .accordeon :hover,.card-29 i,.card-29 input{color:hsl(from var(--c-saturated) h s 35%)}.card-29 .active-search{font-weight:600}.card-30:is(:hover,.animate,:focus-visible) .animal,.card-30:is(:hover,.animate,:focus-visible) .purr{animation-play-state:running}.card-30.reset .animal,.card-30.reset .purr{animation:none}.card-30 .card__top{background-color:var(--c-orange);position:relative}.card-30 .frame{box-shadow:none;height:250px;position:relative;width:250px}.card-30 svg.animal{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.card-30 .animal{animation:flow 7s ease-in-out;animation-play-state:paused;height:250px;stroke-dasharray:106;stroke-linecap:round}@keyframes flow{0%{stroke-dashoffset:-100}to{opacity:1;stroke-dashoffset:0}}@keyframes drop{0%{opacity:1}5%,to{opacity:0;r:10}}.card-30 .purr{animation:purr 1.5s linear 7s infinite;animation-play-state:paused;height:22px;position:absolute;stroke-dasharray:110;stroke-dashoffset:110;width:50px}.card-30 .purr-1{left:42%;top:27%;transform:rotate(-40deg)}.card-30 .purr-2{animation-delay:7.2s;right:12%;top:42%;transform:rotate(58deg)}@keyframes purr{to{stroke-dashoffset:-110}}.card-31 .card__top{background-color:var(--c-green)}.card-31:is(:hover,.animate,:focus-visible) .ball{animation-play-state:running}.card-31 .wrapper{display:flex;flex-direction:column;height:90%;justify-content:space-around;position:relative;width:150px}.card-31 .ball{animation:spin31 1s ease-in-out infinite;animation-play-state:paused;background:radial-gradient(circle at 60% 45%,#fff,var(--c-saturated) 30%,hsl(from var(--c-saturated) h s 10%) 55%);border-radius:50%;height:15px;left:0;overflow:hidden;position:relative;width:15px}@keyframes spin31{50%{left:100%}}.card-32{background:linear-gradient(to top right,var(--c-yellow),var(--c-orange))}.card-32 .center{align-items:center;background-color:#fff;border-radius:40px;box-shadow:0 3px 15px rgba(0,0,0,.3);display:flex;height:50px;padding:5px;width:150px}.card-32 .counter{color:rgba(0,0,0,.6);flex:1;font-size:1.5rem;font-weight:500;height:40px}.card-32 button.btn{background-color:transparent;border:none;border-radius:50%;cursor:pointer;height:40px;position:relative;transition:background-color .3s ease-in-out;width:40px;z-index:1}.card-32 .btn:after,.card-32 .btn:before{content:"";display:block;height:2px;left:calc(50% - 10px);position:absolute;top:calc(50% - 1px);transition:background-color .3s ease-in-out;width:20px}.card-32 .btn.plus:is(:hover,:focus-visible),.card-32 .plus:after,.card-32 .plus:before{background-color:#7ec90e}.card-32 .minus:after{background-color:tomato;height:2px}.card-32 .plus:after{transform:rotate(-90deg)}.card-32 .btn.plus:is(:hover,:focus-visible):after,.card-32 .btn.plus:is(:hover,:focus-visible):before,.card-32 .minus:is(:hover,:focus-visible):after{background-color:#fff}.card-32 .btn.minus:is(:hover,:focus-visible){background-color:tomato}.card-32 .counter span{display:block;line-height:40px;position:absolute;text-align:center;transform-origin:center;width:60px}.card-32 .disappearGrow{animation:disappear32 .4s ease-in forwards}.card-32 .appearGrow{animation:appear32 .4s ease-out forwards}.card-32 .disappearShrink{animation:appear32 .4s ease-in reverse forwards}.card-32 .appearShrink{animation:disappear32 .4s ease-out reverse forwards}@keyframes appear32{0%{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}}@keyframes disappear32{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.75)}}.card-33:is(:hover,.animate,:focus-visible) .cloud,.card-33:is(:hover,.animate,:focus-visible) .sun{animation-play-state:running}.card-33 .card__top{background:#73c1e7;position:relative}.card-33 .center{height:100%;width:100%}.card-33 svg{position:absolute}.card-33 .sun{animation:sun33 60s ease-in-out infinite alternate;animation-play-state:paused;fill:#ffd83d;height:75px;left:15%;stroke:#ffd83d;top:15%;width:75px}.card-33 .cloud{fill:#fff;stroke:#fff}.card-33 .cloud-1{animation:cloud-1 60s linear infinite alternate;animation-play-state:paused;bottom:20%;height:80px;left:-100px;width:180px}.card-33 .cloud-2{animation:cloud-2 60s linear infinite alternate;animation-play-state:paused;height:50px;left:110px;top:15%;width:100px}.card-33 .cloud-3{animation:cloud-3 50s linear infinite alternate;animation-play-state:paused;height:80px;left:100px;top:50%;width:150px}@keyframes sun33{to{transform:translateX(30%)}}@keyframes cloud-1{to{transform:translateX(450px)}}@keyframes cloud-2{to{transform:translateX(200px)}}@keyframes cloud-3{to{transform:translateX(330px)}}.card-34:is(:hover,.animate,:focus-visible) .a1,.card-34:is(:hover,.animate,:focus-visible) .a2,.card-34:is(:hover,.animate,:focus-visible) .a3,.card-34:is(:hover,.animate,:focus-visible) .line{animation-play-state:running}.card-34.reset .a1,.card-34.reset .a2,.card-34.reset .a3,.card-34.reset .line{animation:none}.card-34 .card__top{background:var(--c-orange)}.card-34 .frame{box-shadow:none;display:grid;height:100px;place-items:center;position:relative;width:clamp(260px,70%,320px)}.card-34 .word{display:grid;height:53px;stroke:var(--c-orange);stroke-dasharray:270;stroke-dashoffset:0;width:224px}.card-34 .word>*{grid-column:1/2;grid-row:1/2;height:53px;width:224px}.card-34 .a1{animation:fill34 1.2s ease-in-out .5s both;animation-play-state:paused;fill:#fff;stroke-width:18}.card-34 .a2{animation:fill34 1.7s ease-in-out .5s both;animation-play-state:paused;fill:none;stroke-width:12}.card-34 .a3{animation:fill34 2.2s ease-in-out .5s both;animation-play-state:paused;fill:none;stroke-width:18}@keyframes fill34{0%{stroke-dashoffset:0}to{stroke-dashoffset:270}}.card-34 .line{animation:line34 1.5s ease-out .5s forwards;animation-play-state:paused;background-color:#fff;height:2px;left:50%;position:absolute;top:0;transform:translateX(-50%) scaleX(0);width:100%}.card-34 .line:last-child{bottom:0;top:unset}@keyframes line34{0%{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}}.card-35:is(:hover,.animate,:focus-visible) .loading{animation-play-state:running}.card-35 .card__top{background:linear-gradient(to top right,#35d4bf,#f5a3f1)}.card-35 svg{width:100px}.card-35 .loading{animation:spin35 2s linear infinite,load35 3s cubic-bezier(.455,.03,.515,.955) infinite;animation-play-state:paused;stroke:#fff;stroke-dasharray:50;stroke-dashoffset:0;stroke-linecap:round;transform-origin:center}.card-35 circle{fill:none;stroke:transparent;stroke-width:2}@keyframes spin35{0%{stroke-dashoffset:0}to{transform:rotate(1turn)}}@keyframes load35{to{stroke-dashoffset:-100}}.card-36{min-height:320px}.card-36 .card__top{background:#182a35;padding-block:20px}.card-36 .frame{background-color:#fff;box-shadow:5px 5px 15px rgba(0,0,0,.4);height:250px;width:clamp(240px,330px,80%)}.card-36 .header36{background-color:#2e4452;display:flex;height:45px}.card-36 button{background-color:transparent;border:3px solid transparent;border-radius:0;box-sizing:border-box;color:#8dacbf;cursor:pointer;display:block;transition:color .5s ease-in-out .2s,background-color .5s ease-in-out .2s;width:45px}.card-36 button:is(:hover,:focus-visible) i{color:#fff}.card-36 button:focus-visible{border:3px dashed var(--c-white);outline:none}.card-36 button>*{border:unset}.card-36 button i{display:grid;font-size:16px;place-items:center;pointer-events:none;transition:color .3s ease-in-out}.card-36 button.active{background-color:#3e9eda}.card-36 button.active i{color:#fff}.card-36 button:last-child{margin-left:auto}.card-36 .content{opacity:0;padding:20px;position:absolute;transform:translateY(7px);transition:transform .4s ease-in-out,opacity .4s ease-in-out;width:100%}.card-36 .content.active{opacity:1;transform:translateY(0);transition:transform .5s ease-in-out .3s,opacity .5s ease-in-out .3s}.card-36 h3{color:#2e4452;font-size:18px;font-weight:400;margin-block-end:15px}.card-36 .card__top span{background-color:#e6e6e6;display:block;height:5px;margin-block-end:7px;width:100%}.card-36 .text1{margin-block-end:15px}.card-36 .text1 span:first-child,.card-36 .text2 span:nth-child(3){width:80%}.card-36 .text1 span:nth-child(3),.card-36 .text2 span:nth-child(2){width:60%}.card-36 .text1 span:nth-child(4),.card-36 .text2 span:first-child,.card-36 .text2 span:nth-child(4){width:90%}.card-36 .text1 span:nth-child(5){width:20%}.card-36 .text2 span:nth-child(5){width:40%}.card-37:is(:hover,.animate,:focus-visible) .card-1,.card-37:is(:hover,.animate,:focus-visible) .card-2,.card-37:is(:hover,.animate,:focus-visible) .card-3{animation-play-state:running}.card-37 .card__top{background:linear-gradient(to top right,var(--c-green),var(--c-orange) 200%)}.card-37 .wrapper{height:200px;perspective:160px;position:relative;transform-style:preserve-3d;width:clamp(240px,330px,80%)}.card-37 .card{background-color:#fff;border-radius:4px;box-shadow:2px 5px 10px rgba(0,0,0,.4);display:grid;grid-template-rows:30px auto;height:130px;left:calc(50% - 65px);position:absolute;top:calc(50% - 65px);width:130px}.card-37 .bar{background:#f6b91c;border-radius:4px 4px 0 0}.card-37 .content{align-content:center;display:grid;gap:8px;height:100%;padding:15px;width:100%}.card-37 .card__top span{background-color:#e2e2e2;display:block;height:4px;width:100%}.card-37 span:first-child,.card-37 span:nth-child(4){width:80px}.card-37 span:nth-child(3){width:90px}.card-37 span:last-child{width:40px}.card-37 .card-1{animation:card-1 4s ease-out infinite;animation-play-state:paused;transform:translate3d(-150px,0,-160px)}.card-37 .card-2{animation:card-2 4s ease-out infinite;animation-play-state:paused;transform:translateZ(0)}.card-37 .card-3{animation:card-3 4s ease-out infinite;animation-play-state:paused;transform:translate3d(150px,0,-160px)}@keyframes card-1{33.333%{transform:translateZ(0)}66.666%{transform:translate3d(150px,0,-160px)}0%,to{transform:translate3d(-150px,0,-160px)}}@keyframes card-2{33.333%{transform:translate3d(150px,0,-160px)}66.666%{transform:translate3d(-150px,0,-160px)}0%,to{transform:translateZ(0)}}@keyframes card-3{33.333%{transform:translate3d(-150px,0,-160px)}66.666%{transform:translateZ(0)}0%,to{transform:translate3d(150px,0,-160px)}}.card-38 .card__top{background:var(--c-saturated);cursor:pointer}.card-38 .logo,.card-38 .logo2{height:80px;left:50%;position:absolute;stroke-linejoin:round;top:50%;transform:translate(-50%,-50%);width:70px}.card-38 .logo2:focus:not(:focus-visible),.card-38 .logo:focus:not(:focus-visible){outline:none}.card-38 .logo{fill:#fff;stroke:#fff;transform:translate(-50%,-50%) scale(1);transition:transform 1s ease-out}.card-38 .logo2{fill:var(--c-saturated);stroke:var(--c-saturated);transform:translate(-50%,-50%) scale(0);transition:transform .5s ease-out}.card-38 .logo.animate{transform:translate(-50%,-50%) scale(20)}.card-38 .logo2.animate{transform:translate(-50%,-50%) scale(1)}.card-39 .card__top{background-color:#444e64}.card-39 .card__top :focus-visible,.card-39 .card__top:focus-within{outline-color:outline-clr(#444e64)}.card-39 .center{height:40px;position:relative;width:clamp(260px,70%,280px)}.card-39 .menu-button{background:none;cursor:pointer;height:45px;padding:16px;position:absolute;width:60px}.card-39 .menu-button:is(:hover,:focus-visible){background:none}.card-39 .menu-button.open{animation:open 1s ease-out forwards;cursor:auto}.card-39 .menu-button.close{animation:close 1s ease-out forwards}.card-39 .menu-button:after,.card-39 .menu-button:before{background-color:#fff;content:"";display:block;height:4px;left:50%;position:absolute;transform:translateX(-50%);transform-origin:center;width:100%}.card-39 .menu-button.open:after,.card-39 .menu-button.open:before{animation:thinner 1s ease-out forwards}.card-39 .menu-button.close:after,.card-39 .menu-button.close:before{animation:thicker 1s ease-out forwards}.card-39 .menu-button:before{top:0}.card-39 .menu-button:after{bottom:0}.card-39 .nav39{opacity:0;pointer-events:none;position:relative;transition:opacity .4s ease-in-out;width:100%}.card-39 .menu-button.open~.nav39{opacity:1;pointer-events:all;transition:opacity .3s ease-in-out .7s}.card-39 .menu__list{align-items:center;display:flex;font-size:18px;height:100%;justify-content:space-around;list-style:none;max-width:100%;text-transform:uppercase}.card-39 .menu__item a{color:#fff;cursor:pointer;transition:color .3s ease-in-out}.card-39 .menu__item:is(:hover,:focus-visible) a{color:hsla(0,0%,100%,.6)}@keyframes open{20%{height:20px;width:60px}40%,50%{height:80px;width:60px}to{height:80px;width:100%}}@keyframes close{0%{height:80px;width:100%}50%,60%{height:80px;width:60px}80%{height:20px;width:60px}to{height:45px;width:60px}}@keyframes thinner{0%,20%{height:4px}40%,to{height:2px}}@keyframes thicker{0%,60%{height:2px}80%,to{height:4px}}.card-40{min-width:316px}.card-40 .card__top{background-color:#fff;padding:4px}.card-40 .wrapper{background-color:#fff;border-radius:var(--border-radius) var(--border-radius) 0 0;display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));height:100%;overflow:hidden;padding:0;width:100%}.card-40 .tile{aspect-ratio:1/1;background-color:#000;cursor:pointer;width:100%}.card-40 .tile button.ontop{position:relative;z-index:10}.card-40 .tile button{border:3px solid #fff;height:100%;overflow:hidden;transition:transform .5s ease-in-out,opacity .3s ease-in-out;width:100%}.card-40 .tile button:focus-visible{border:3px dashed #fff;outline:none}.card-40 .tile button img{height:100%}.card-40 .tile button.off{opacity:.1}.card-40 .tile button.open{transform:scale(3.078)}.card-40 .tile button.open:focus-visible{border:3px solid #fff}.card-40 .wrapper .tile:first-child button{transform-origin:top left}.card-40 .wrapper .tile:nth-child(2) button{transform-origin:top center}.card-40 .wrapper .tile:nth-child(3) button{transform-origin:top right}.card-40 .wrapper .tile:nth-child(4) button{transform-origin:center left}.card-40 .wrapper .tile:nth-child(5) button{transform-origin:center}.card-40 .wrapper .tile:nth-child(6) button{transform-origin:center right}.card-40 .wrapper .tile:nth-child(7) button{transform-origin:bottom left}.card-40 .wrapper .tile:nth-child(8) button{transform-origin:bottom center}.card-40 .wrapper .tile:nth-child(9) button{transform-origin:bottom right}.card-41:is(:hover,.animate,:focus-visible) .error{animation-play-state:running}.card-41 .card__top{background:#262626;padding:20px}.card-41 button{background:none;border-radius:0;display:block}.card-41 .error{animation:open41 .8s ease-in-out forwards;animation-play-state:paused;background-color:#fff;border-radius:3px;box-shadow:8px 8px 15px rgba(0,0,0,.3);color:rgba(0,0,0,.7);display:grid;font-size:14px;grid-template-rows:auto 50px;height:230px;overflow:hidden;text-align:center;transform-origin:center;width:clamp(270px,70%,300px)}.card-41 .error__message{align-content:center;display:grid;justify-content:center}.card-41 .error__message *+*{margin-block-end:10px}.card-41 .error.close{animation:shrink41 .7s ease-in-out forwards}.card-41 .error i{color:#f65555;font-size:40px;margin-block-end:15px}.card-41 h3{font-size:20px}.card-41 .card__top p{color:rgba(0,0,0,.5);max-width:25ch;text-align:center}.card-41 .btn{background-color:#f65555;border:3px solid transparent;color:#fff;cursor:pointer;font-size:16px;transition:background-color .3s ease-in-out;width:100%}.card-41 .btn:focus-visible{border:3px dashed var(--c-black);outline:none}.card-41 button.reset-btn{background-color:#f65555;border-radius:var(--border-radius);color:#fff;opacity:0;padding:10px 20px;position:absolute;transition:opacity .4s ease-in-out;visibility:hidden;width:150px}.card-41 button.reset-btn.active{opacity:1;visibility:visible}.card-41 button.reset-btn.active:focus-visible{outline-color:var(--c-white)}.card-41 .btn:is(:hover,:focus-visible),.card-41 button.reset-btn:is(:hover,:focus-visible){background-color:#ec3232}@keyframes shrink41{30%{transform:scale(1.1)}to{transform:scale(0)}}@keyframes open41{0%{transform:scale(0)}50%{transform:scale(1.2)}70%{transform:scale(.9)}to{transform:scale(1)}}.card-42 .card__top{padding-block:1rem}.card-42 .sky{background:linear-gradient(180deg,#1d4254 0,#6db6c5);border-radius:50%;height:250px;overflow:hidden;position:relative;width:250px}.card-42 .star42{animation:spark42 4s ease-in-out infinite;background-color:#fff;border-radius:1px;height:1px;position:absolute;width:1px}.card-42 .shooting-star{animation:shoot42 20s infinite;background:url(https://100dayscss.com/codepen/shooting-star.png) 50%;height:2px;left:-220px;position:absolute;top:30%;transform:rotate(20deg);width:120px}@keyframes spark42{50%{opacity:.2}}@keyframes shoot42{10%,to{transform:rotate(20deg) translateX(550px)}}.hero{aspect-ratio:7/6;display:grid;grid-template-areas:"mid1 mid2 quarter . lines . cross" "mid1 mid2 text text text text text" "wave wave text text text text text" "wave wave text text text text text" "spark spark green green orange orange ." "spark spark . . . . flower";grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);margin:110px auto 80px;max-width:900px;min-width:250px;position:relative}.hero .accent,.hero .days,.hero .text{font-size:clamp(2.188rem,4vw + 1.25rem,4.25rem)}.hero .text{background-color:var(--c-green);display:grid;font-weight:400;grid-area:text;overflow:hidden;position:relative}.hero .text .accent,.hero .text .days{display:block;padding-inline:.5em}.hero .text .days{align-self:end}.hero .text .days .num{position:relative}.hero .text .days .num:after{--number-width:calc(100% + 0.575em);background-color:var(--c-white);border-bottom-right-radius:25% 50%;border-top-right-radius:25% 50%;bottom:0;color:var(--c-black);content:"42";font-family:var(--accent-font);left:calc(var(--number-width)*-1 - .5em);line-height:1;padding:0 .75rem .75rem .25rem;position:absolute;text-align:right;width:var(--number-width)}.hero .text .days .scribble{height:120%;position:absolute;stroke:var(--c-black);stroke-dasharray:1000;stroke-dashoffset:1000;stroke-width:8;transform:translateX(-2em);width:118%}.hero .text .accent{background-color:var(--c-black);color:var(--c-white)}.hero .flower,.hero .mid2,.hero .spark,.hero .wave-container{padding:.5em}.hero .mid1{background-color:var(--c-orange);display:grid;grid-area:mid1;place-items:center;position:relative}.hero .mid1 .oval{aspect-ratio:2/3;border:2px solid var(--c-white);border-radius:70px;position:absolute;width:70%}.hero .mid1 .oval.oval-1{transform:translateY(-35%)}.hero .mid1 .oval.oval-3{transform:translateY(35%)}.hero .mid2{background-color:var(--c-black);grid-area:mid2}.hero .mid2 .semi-circle{transform-origin:center}.hero .quarter{background-color:var(--c-yellow);border-top-right-radius:100%;grid-area:quarter;margin:5px}.hero .gallery-lines{grid-area:lines;grid-column:span 3/-1;grid-row:1/span 3;inset:0;overflow-x:visible;overflow-y:clip;position:absolute}.hero .gallery-lines .lines{aspect-ratio:15/3;position:absolute;stroke-dasharray:100%;stroke-dashoffset:-20;transform:translate(-20%,-110%) rotate(50deg);transform-origin:bottom left;width:160%}.hero .cross-container{grid-area:cross;grid-row:1/span 3;overflow:hidden}.hero .cross-container .tag{background-color:var(--c-white);border:1px solid var(--c-black);border-bottom-left-radius:62.5% 25%;border-bottom-right-radius:62.5% 25%;border-top:0;display:grid;height:91.666667%;padding:10%;position:relative;top:-125%}.hero .cross-container .cross{align-self:flex-end;aspect-ratio:1/1;grid-row-end:3;width:100%}.hero .wave-container{grid-area:wave}.hero .wave-container .wave{overflow:hidden;position:relative}.hero .wave-container .wave>*{aspect-ratio:1/1;border:10px solid var(--c-yellow);border-radius:50%;left:100%;position:absolute;transform:translate(-50%,-50%);transform-origin:center;width:65%}.hero .wave-container .wave>:nth-child(2){width:110%}.hero .wave-container .wave>:nth-child(3){width:155%}.hero .wave-container .wave>:nth-child(4){width:200%}.hero .green,.hero .orange{overflow:hidden;position:relative}.hero .green:after,.hero .orange:after{border-radius:50%;content:"";display:block;height:100%;position:absolute;width:50%;z-index:1}.hero .green{background-color:var(--c-green);grid-area:green}.hero .green:after{background-color:var(--c-orange);right:-25%}.hero .orange{background-color:var(--c-orange);grid-area:orange}.hero .orange:after{background-color:var(--c-green);left:-25%}.hero .spark{grid-area:spark;scale:0}.hero .flower{grid-area:flower;transform-origin:center}.hero .flower,.hero .semi-circle,.hero .spark,.hero .wave{height:100%;width:100%}.hero{--smooth-overshoot-animation-fn:linear(0,0.49 7.4%,0.864 15.3%,1.005 19.4%,1.12 23.7%,1.206 28.1%,1.267 32.8%,1.296 36.4%,1.311 40.2%,1.313 44.2%,1.301 48.6%,1.252 56.9%,1.105 74.4%,1.048 82.5%,1.011 91.1%,1)}.days .num:after{animation:roll-in .5s linear 4s forwards}.days .scribble{animation:scribble 1s linear 3s forwards}.mid1{--flicker-animation-fn:linear(0,0.006 5.5%,0.028 8.9%,0.079 11.8%,0.16 14.3%,0.464 19.2%,0.993 24.2%,0.293 30.3%,0.152 32.3%,0.108 34.1%,0.16 35.9%,0.313 37.7%,0.998 42%,0.408 45.6%,0.276 47%,0.234 48.3%,0.278 49.6%,0.406 50.9%,0.993 54.2%,0.502 57.1%,0.399 58.2%,0.368 59.2%,0.4 60.2%,0.505 61.3%,0.994 64.2%,0.618 66.5%,0.506 68.4%,0.613 70.2%,0.994 72.8%,0.72 74.8%,0.642 76.4%,0.715 78%,0.995 80.4%,0.822 82.2%,0.771 83.6%,0.818 85.1%,0.996 87.4%,0.911 88.9%,0.885 90.2%,0.906 91.4%,0.999 93.9%,0.971 95.9%,1)}.mid1 .oval{animation:flicker 5s var(--flicker-animation-fn) 5 alternate forwards;opacity:0}.mid1 .oval-2{animation-duration:5.8s}.mid1 .oval-3{animation-duration:5.3s}.mid2 .semi-circle{--semi-cirle-animation-fn:linear(0,0.453 7.8%,0.803 16.1%,1.048 24.9%,1.132 29.5%,1.194 34.4%,1.227 38.4%,1.245 42.5%,1.25 46.9%,1.242 51.7%,1.2 60.5%,1.038 84.9%,1.009 92.5%,1);animation:circle-rotations 2.45s var(--semi-cirle-animation-fn) .8s forwards;transform:rotateY(90deg)}.quarter{animation:quarter-grow 2s ease-in-out forwards;transform:scale(0);transform-origin:bottom left}.lines{animation:lines-animation 5s cubic-bezier(.61,1,.87,1) forwards}.wave-container .wave span:first-child{animation-delay:0s}.wave-container .wave span:nth-child(2){animation-delay:.5s}.wave-container .wave span:nth-child(3){animation-delay:1s}.wave-container .wave span:nth-child(4){animation-delay:1.5s}.wave-container .wave>*{animation:wave-animation .4s ease-in-out forwards;opacity:0}.spark{animation:spark .45s var(--smooth-overshoot-animation-fn) .5s forwards}.flower{animation:scale .45s var(--smooth-overshoot-animation-fn) 1s forwards;transform:scale(0) rotate(60deg)}.cross-container .tag{--roll-down-animation-fn:linear(0,0.402 7.4%,0.711 15.3%,0.929 23.7%,1.008 28.2%,1.067 33%,1.099 36.9%,1.12 41%,1.13 45.4%,1.13 50.1%,1.111 58.5%,1.019 83.2%,1.004 91.3%,1);animation:slide-down 2s var(--roll-down-animation-fn) 1.5s forwards}.cross-container .tag svg{animation:scale 3s ease-out 1.5s forwards;transform:scale(1) rotate(-200deg)}@keyframes scribble{to{stroke-dashoffset:0}}@keyframes roll-in{to{left:-.5em}}@keyframes flicker{70%,to{opacity:1}}@keyframes circle-rotations{to{transform:rotateY(1turn)}}@keyframes quarter-grow{to{transform:scale(1)}}@keyframes wave-animation{to{opacity:1}}@keyframes spark{to{scale:1}}@keyframes scale{to{transform:scale(1) rotate(0deg)}}@keyframes slide-down{to{top:-25%}}@keyframes lines-animation{to{stroke-dashoffset:0}}.loader{bottom:-5em;display:grid;height:80px;height:auto;opacity:0;padding-block-start:2em;position:absolute;transition:opacity .3s ease-in-out;width:200px}.loader.show{opacity:1}.loader span{animation:loaderAnimation 1s cubic-bezier(.86,0,.07,1) infinite alternate;grid-column:1/2;grid-row:1/2;transform:translateY(80px)}.loader span:first-child{animation-delay:0s}.loader span:nth-child(2){animation-delay:70ms}.loader span:nth-child(3){animation-delay:.14s}.loader span:nth-child(4){animation-delay:.21s}.loader span:nth-child(5){animation-delay:.28s}.loader span:nth-child(6){animation-delay:.35s}.loader span:nth-child(7){animation-delay:.42s}.loader__letter{display:grid}.loader__letter svg{fill:var(--c-white);grid-column:1/2;grid-row:1/2;height:80px;stroke:var(--c-black);stroke-width:.5;width:200px}.loader__letter svg.loader__shadow{fill:var(--c-black);position:relative;stroke-width:0;transform:translate(6px,3px);z-index:-1}@keyframes loaderAnimation{to{transform:translateY(0)}}main#main-content{width:min(1200px,100% - 2rem)}.gallery{margin-block-end:5em;padding-block:var(--padding-outline);--grid-min-col-size:300px;--grid-gap:40px;gap:var(--grid-gap);grid-auto-rows:minmax(300px,max-content);grid-template-columns:repeat(auto-fit,minmax(var(--grid-min-col-size),330px));justify-content:center;justify-items:center}.gallery,.gallery>article{display:grid;position:relative}.gallery>article{background-color:var(--c-black);border:var(--border);border-radius:var(--border-radius);grid-template-rows:1fr 4rem;grid-template-rows:1fr auto;overflow:hidden;width:100%}.gallery>article:focus-visible{outline-offset:3px}.gallery>article.interact:after,.gallery>article[data-animated=true]:after{animation:tagBounce 2s infinite;background:var(--c-white);border:1px solid var(--c-black);border-bottom-left-radius:50% 30%;border-bottom-right-radius:50% 30%;content:"Hover me!";font-size:1rem;font-weight:900;height:4.5rem;inset:0 1em auto auto;line-height:1.1;padding-block-start:1.5em;position:absolute;text-align:center;transition:top 1s ease-in-out;width:3.125rem;z-index:5}.gallery>article.interact:after{content:"Click me!"}.gallery>article:is(:hover,.animate,:focus-visible,:focus-within):after{animation-play-state:paused;top:-4.5rem}.gallery>article .btn--reset{background-color:var(--c-black);border:2px solid var(--c-white);border-radius:var(--border-radius) var(--border-radius) 0 0;bottom:-100%;box-shadow:none;color:var(--c-white);font-size:1.25rem;font-weight:900;height:auto;line-height:1.1;padding:.5em 1.75em;position:absolute;text-align:center;transition:background-color .3s ease-in-out,color .3s ease-in-out,bottom .5s ease-in-out;z-index:5}.gallery>article .btn--reset.active{bottom:-.125rem;visibility:visible}.gallery>article .btn--reset:is(:hover,:focus-visible){background-color:var(--c-white);color:var(--c-black);outline-color:var(--c-white)}.card>*{max-width:inherit;width:inherit}.card:focus-visible{scroll-margin-bottom:30vh;scroll-margin-top:30vh}.card.show{animation:showCard .5s ease-in-out .5s forwards;opacity:0}.card__top{display:grid;place-items:center;align-items:center;min-height:250px;overflow:hidden;position:relative}.card__top a,.card__top button.btn,.card__top li,.card__top p{font-size:16px}.card__top .overlay{background-color:rgba(0,0,0,.6);inset:0;opacity:0;position:absolute;transition:opacity .5s ease-in-out}.card__top .overlay.active{opacity:1}.card__bar{align-items:center;background-color:var(--c-black);color:var(--c-white);-moz-column-gap:1em;column-gap:1em;display:flex;flex-wrap:wrap;justify-content:space-between;padding:1em;width:100%}.card__bar__header{font-size:2rem;text-wrap:nowrap}.card__bar__header span{color:var(--c-yellow)}.card__bar__title{align-self:end;font-family:var(--mono-font);font-size:1.125rem;hyphens:none;line-height:1.2;max-width:11ch;min-width:auto;overflow-wrap:normal;text-align:right;text-transform:uppercase}.frame{overflow:hidden;position:relative}.frame--shadow{border-radius:3px;box-shadow:4px 8px 16px 5px rgba(0,0,0,.1)}.center{display:grid;place-items:center}@keyframes showCard{0%{opacity:0;transform:translateY(2em)}to{opacity:1;transform:translateY(0)}}@keyframes tagBounce{0%,to{transform:translateY(-1px)}50%{transform:translateY(-5px)}}.animated-elements{height:var(--cat-size);margin-block-start:auto;position:relative;width:100%}.animated-elements .circle-wrapper{bottom:0;height:35vh;overflow-y:hidden;position:absolute;right:-10%;z-index:-1}.animated-elements .circle{background-color:#ffedc8;border-radius:50%;height:65vh;width:65vh}body{min-width:375px;position:relative}.main{align-items:center;display:flex;flex-direction:column}.main:target{scroll-margin-block-start:5rem}.main .description{margin-block-end:5rem;padding-inline:1rem}.main .description p{max-width:65ch}.main .description p:nth-child(2){margin-block-start:1rem}