#accent_color input{accent-color:var(--accent);margin-block:.25rem}#animated_borders button:hover{transform:none}#animated_borders{display:grid;place-content:center;gap:2rem}.glow-effect{position:relative;border-radius:1rem!important;--container-offset: 30px;--glow-color-dark: #ff7b00;--glow-color-light: #77c1ec;--glow-stroke-width: 2px;--glow-blur-color-dark: #fca14d;--glow-blur-color-light: #77c1ec;--glow-blur-size: 5px;--animation-speed: 1.2s;--glow-line-length: 20px}@media (prefers-color-scheme: dark){.glow-effect{--glow-color: var(--glow-color-dark);--glow-blur-color: var(--glow-blur-color-dark)}}@media (prefers-color-scheme: light){.glow-effect{--glow-color: var(--glow-color-light);--glow-blur-color: var(--glow-blur-color-light)}}[color-scheme=dark]{--glow-color: var(--glow-color-dark);--glow-blur-color: var(--glow-blur-color-dark)}[color-scheme=light]{--glow-color: var(--glow-color-light);--glow-blur-color: var(--glow-blur-color-light)}.glow-container{position:absolute;inset:calc(-1 * var(--container-offset) / 2);width:calc(100% + var(--container-offset));height:calc(100% + var(--container-offset));opacity:0;pointer-events:none}.glow-blur,.glow-line{width:calc(100% - var(--container-offset));height:calc(100% - var(--container-offset));x:calc(var(--container-offset) / 2);y:calc(var(--container-offset) / 2);fill:transparent;stroke-dasharray:var(--glow-line-length) calc(50px - var(--glow-line-length))}.glow-effect:is(:hover,:focus) :is(.glow-blur,.glow-line){stroke-dashoffset:-120px;transition:stroke-dashoffset var(--animation-speed) ease-in}.glow-line{stroke:var(--glow-color);stroke-width:var(--glow-stroke-width)}.glow-blur{filter:blur(var(--glow-blur-size));stroke-width:var(--glow-blur-size);stroke:var(--glow-blur-color)}.glow-effect:is(:hover,:focus) .glow-container{animation:glow-visibility ease-in-out var(--animation-speed)}@keyframes glow-visibility{0%,to{opacity:0}25%,75%{opacity:1}}:root{--photo-brightness: 90%;--photo-contrast: 110%;--photo-blur: 2px}.canvas{position:relative;filter:contrast(2000%);overflow:hidden}.canvas:before{content:"";position:absolute;top:-50%;left:-50%;bottom:-50%;right:-50%;background:radial-gradient(circle at center,#333,#fff);background-size:.25em .25em;transform:rotate(20deg)}.canvas img{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:hard-light;filter:grayscale(1) brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) blur(var(--photo-blur))}.caret-color{caret-color:var(--accent)}.form-control{font-size:1.25rem;font-weight:600;line-height:1.1;display:grid;grid-template-columns:1rem auto;gap:.5rem;align-items:center}.form-control input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;margin:0;padding:0;font:inherit;color:currentColor;width:1.15rem;height:1.15rem;border:.15rem solid currentColor;border-radius:3px;display:grid;place-content:center}.form-control input:before{content:"";width:.65rem;height:.65rem;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--accent)}.form-control input:checked:before{transform:scale(1)}#clamp p{font-size:clamp(2.5rem,4vw + 1rem,6rem)}#container_queries{width:100%}#container_queries .box{width:50%;padding:.25rem 1rem;container-type:inline-size}#container_queries p{font-size:clamp(1rem,15cqi,2rem)}.cursor{width:100px;height:100px;background:var(--light-grey);display:flex;justify-content:center;align-items:center;padding:8px;cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>\1f680</text></svg>"),auto}.input-wrapper{position:relative;display:grid;gap:.2em;margin-block:.6em}.form-label{position:absolute;top:50%;transform:translateY(-50%);text-transform:uppercase;font-size:1rem;letter-spacing:.05em;margin-inline:.45em;padding:.1em .35em;background-color:var(--light-grey);transition:transform .15s cubic-bezier(.86,-.1,.27,1.15),background-color .15s cubic-bezier(.86,-.1,.27,1.15)}.form-input{background-color:var(--light-grey);caret-color:var(--accent);box-shadow:0 0 0 -.1em var(--body),0 0 0 -.2em var(--accent);transition:box-shadow .4s cubic-bezier(.86,-.1,.27,1.15)}.form-input:focus{outline:none;box-shadow:0 0 0 .2em var(--body),0 0 0 .4em var(--accent)}.form-input:focus~.form-label,.form-input:not(:placeholder-shown)~.form-label{transform:translate3d(0,-2.55em,0);background-color:var(--body);color:var(--accent)}.form-input::placeholder{opacity:0}.custom-scrollbar{overflow:auto;display:inline-block;height:200px}.box .content{height:500px;text-align:center}.custom-scrollbar::-webkit-scrollbar{width:12px;background-color:var(--scrollbar-track)}.custom-scrollbar::-webkit-scrollbar-track{border-radius:3px;background-color:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{border-radius:5px;background-color:var(--accent);border:2px solid var(--accent)}.custom-selection::-moz-selection{background-color:var(--accent)}.custom-selection::selection{background-color:var(--accent)}.custom-selection{font-size:18px}.drop-shadow{-webkit-filter:drop-shadow(0px 0px 8px var(--shadow));filter:drop-shadow(0px 0px 8px var(--shadow));max-width:150px}#dropdown{width:100%}#dropdown a{color:var(--text);text-align:center;text-decoration:none}#dropdown nav{background-color:var(--header);display:grid;place-items:center;padding:1.25rem 2rem;margin-top:2rem;width:100%}#dropdown ul{list-style:none;margin:0;padding:0;display:grid}#dropdown>nav>ul{grid-auto-flow:column}#dropdown li{padding:0}#dropdown>nav>ul>li{margin:0 .5rem}.dropdown-title{font-size:1rem;color:var(--text);font-family:inherit;background-color:transparent;border:none;display:inline-flex;align-items:center;gap:.25rem}.dropdown-title:after{content:"";border:.25rem solid transparent;border-top-color:var(--text);transform:translateY(.15rem)}.dropdown{position:relative}.dropdown-menu{position:absolute;left:50%;background-color:var(--header);box-shadow:0 3px 4px var(--shadow);border-top:5px solid var(--accent);padding:.5rem 0;min-width:20ch;transform:rotateX(-90deg) translate(-50%);transform-origin:top center;opacity:0;visibility:hidden;transition:.3s all .12s ease-out}#dropdown>nav>ul>li>a{display:inline-block}.dropdown-menu a{display:block;padding:.5rem}.dropdown:is(:hover,:focus-within) .dropdown-menu{opacity:1;visibility:visible;transform:rotateX(0) translate(-50%)}.box:empty{background:var(--accent)}h4{font-size:60px;text-transform:uppercase;text-align:center;color:transparent;background:var(--accent) url(https://picsum.photos/seed/picsum/500/300);background-clip:text;-webkit-background-clip:text}@media (max-width: 425px){h4{font-size:32px}}#focus .button:focus{outline:2px solid var(--text)}#focus .button:focus-visible{outline:2px dashed var(--text);outline-offset:-.2rem}#focus .button:focus:not(:focus-visible){outline:2px solid var(--text)}#focus .button:hover{transform:none}.boxes{display:flex;justify-content:center;flex-wrap:wrap;gap:15px}.boxes .box{background-color:var(--light-grey);width:60px;height:60px}.boxes .box:empty{background-color:none}.gradient-border{text-align:center;padding:25px 30px;border-radius:10px;border:5px solid transparent;position:relative;box-sizing:border-box;background:var(--body);background-clip:padding-box}.gradient-border:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-5px;border-radius:inherit;background:var(--gradient)}.images{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}.grayscale{-webkit-filter:grayscale(100%);filter:grayscale(100%)}#inherit .button{font-size:1rem;font-weight:400}.custom-button{font-family:inherit}.custom-list ul{margin:0 0 0 2em;padding:0;display:grid;grid-gap:1.25rem}.custom-list li{line-height:1.25rem;padding-left:.5rem}.custom-list li::marker{content:"\2bc8";color:var(--accent);font-size:1.25em}:root{--text-dark: #fff;--body-dark: #3c3c3c;--scrollbar-track-dark: #3f3f3f;--accent-dark: #f17c0d;--light-grey-dark: #555;--header-dark: rgb(51, 51, 51, .8);--footer-dark: #4f4f4f;--shadow-dark: rgba(238, 238, 238, .2);--gradient-dark: linear-gradient(315deg, #fc5296 0%, #f67062 74%);--text-light: #3c3c3c;--body-light: #fff;--scrollbar-track-light: #e9e9e9;--accent-light: #45a2d8;--light-grey-light: #d8d8d8;--header-light: rgb(244, 244, 245, .8);--footer-light: #e0ecf3;--shadow-light: rgba(49, 49, 49, .2);--gradient-light: linear-gradient(315deg, #52fc99 0%, #45a2d8 74%)}html{color-scheme:dark light}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh}img,picture{max-width:100%;height:auto;vertical-align:middle;font-style:italic;background-size:cover;background-repeat:no-repeat;shape-margin:.5rem}@media (prefers-reduced-motion: no-preference){html:focus-within{scroll-behavior:smooth;scroll-padding-top:8vmax}}body::-webkit-scrollbar{width:.8rem;background-color:var(--scrollbar-track)}body::-webkit-scrollbar-track{background-color:transparent}body::-webkit-scrollbar-thumb{border-radius:5px;background:var(--gradient);border:2px solid var(--scrollbar-track)}body{background:var(--body);color:var(--text);font-family:Lato,sans-serif}h1,h2,h3,h4,h5,h6{margin-top:1rem;margin-bottom:1.5rem}input{background:var(--light-grey);font-size:18px;color:var(--text);border:none;padding:8px min(15px,3vw)}input:focus{outline-color:var(--accent);outline-style:solid}.container{flex:1;max-width:960px;margin:auto;padding:100px 0 50px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px}.wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}.box{width:300px;background-color:var(--light-grey);padding:15px}.button{color:var(--text);font-weight:600;text-align:center;text-decoration:none;text-transform:capitalize;background:var(--accent);padding:1rem;border:none;border-radius:3px;transition:transform .2s}.button:hover{transform:translateY(-.2rem) scale(1.2)}.button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:.2rem}.button:focus:not(:focus-visible){outline:none}.columns{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}.header{padding:12px 25px;background-color:var(--header);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:100%;position:fixed;top:0;z-index:99;border-bottom:5px solid;border-image-slice:1;border-width:5px;border-image-source:var(--gradient)}.nav-wrapper{display:flex;justify-content:flex-end}.nav-links{position:absolute;top:1rem;left:0;right:0;z-index:-1;background-color:var(--header);padding:1.5rem;border-bottom:2px solid var(--accent);transform:translate3d(0,-200%,0);transition:transform .2s cubic-bezier(.64,.04,.26,.87);list-style:none;text-align:center}.btn-menu{cursor:pointer;color:var(--accent);background-color:transparent;border:none;display:grid;place-items:center;padding-inline:1rem}.btn-menu[aria-expanded=true]+.nav-links{transform:translateZ(0)}.nav-links li{display:inline;padding:0 5px}.nav-link{color:var(--text);text-decoration:none}footer{text-transform:lowercase;text-align:center;padding:25px 0;background:var(--footer)}footer a{color:var(--accent);text-decoration:none}@media screen and (max-width: 768px){.container{margin:15px}}@media (min-width: 768px){.btn-menu{display:none}.nav-links{position:static;transform:translateZ(0);border-bottom:0;z-index:0;padding:0;inset:0;background-color:transparent}li,.nav-link{width:initial}}@media screen and (max-width: 530px){.container{padding:25px 0}}@media screen and (max-width: 320px){.box{width:200px}}@media (prefers-color-scheme: dark){:root{--text: var(--text-dark);--body: var(--body-dark);--scrollbar-track: var(--scrollbar-track-dark);--accent: var(--accent-dark);--light-grey: var(--light-grey-dark);--header: var(--header-dark);--footer: var(--footer-dark);--shadow: var(--shadow-dark);--gradient: var(--gradient-dark)}}@media (prefers-color-scheme: light){:root{--text: var(--text-light);--body: var(--body-light);--scrollbar-track: var(--scrollbar-track-light);--accent: var(--accent-light);--light-grey: var(--light-grey-light);--header: var(--header-light);--footer: var(--footer-light);--shadow: var(--shadow-light);--gradient: var(--gradient-light)}}[color-scheme=dark]{color-scheme:dark;--text: var(--text-dark);--body: var(--body-dark);--scrollbar-track: var(--scrollbar-track-dark);--accent: var(--accent-dark);--light-grey: var(--light-grey-dark);--header: var(--header-dark);--footer: var(--footer-dark);--shadow: var(--shadow-dark);--gradient: var(--gradient-dark)}[color-scheme=light]{color-scheme:light;--text: var(--text-light);--body: var(--body-light);--scrollbar-track: var(--scrollbar-track-light);--accent: var(--accent-light);--light-grey: var(--light-grey-light);--header: var(--header-light);--footer: var(--footer-light);--shadow: var(--shadow-light);--gradient: var(--gradient-light)}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.2s!important;animation-iteration-count:1!important;transition-duration:.2s!important;scroll-behavior:auto!important}}@media (prefers-contrast: more){[color-scheme=dark]{--text: white;--body: black}[color-scheme=light]{--text: black;--body: white}}#mask img{aspect-ratio:1;-o-object-fit:cover;object-fit:cover;-webkit-mask-image:url(../images/yin-yang-bold.svg);mask-image:url(../images/yin-yang-bold.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover}.modal{visibility:hidden;opacity:0;position:fixed;top:0;bottom:0;right:0;left:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.5);transition:all .4s}.modal:target{visibility:visible;opacity:1}.modal-content{position:relative;display:flex;flex-direction:column;gap:25px;width:480px;max-width:90%;background:#fff;color:#333;padding:15px 25px;border-radius:3px}.modal-content header{display:flex;justify-content:space-between}.modal-content .close{text-decoration:none}.modal-content main{flex:1;padding:15px 0;text-align:center}.no-selection{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.outline{position:relative;color:var(--body);text-transform:none;font-weight:400;background:none;text-shadow:-1px -1px 0 #fff,1px 1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff}.outline:after{content:"";position:absolute;inset:0;z-index:1;background:var(--gradient);mix-blend-mode:darken}.outside{overflow:auto;display:flex;height:300px}.inside{height:200px;overflow:auto;overscroll-behavior:contain}#radial_gradient{width:100%}:root{--size: 60px}.radial-gradient{width:100%;max-width:640px;min-height:360px;margin-bottom:5px}.pattern{background:radial-gradient(10% 10%,var(--body) 90%,transparent),radial-gradient(54% 54%,transparent 98%,var(--accent)) calc(var(--size)/2) calc(var(--size)/2);background-size:var(--size) var(--size)}.repeating{background-image:repeating-radial-gradient(transparent 0% 12%,var(--accent) 13% 26%);background-size:var(--size) var(--size)}@media screen and (max-width: 480px){:root{--size: 30px}}.form{display:flex;flex-direction:column}.form label{margin-bottom:10px}input:in-range{background-color:#37cc8e}input:out-of-range{background-color:#cc3737}.resize{resize:both;overflow:auto}#select label{margin-bottom:1rem}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;outline:none;font-family:inherit;font-size:inherit;line-height:inherit;padding:0 1rem 0 0;margin:0;width:100%;cursor:inherit}select::-ms-expand{display:none}.select{width:100%;min-width:10ch;max-width:20ch;border:1px solid var(--header);border-radius:3px;padding:.5rem;cursor:pointer;background-color:var(--scrollbar-track);display:grid;grid-template-areas:"select";align-items:center}.select:after{content:"";width:.8rem;height:.5rem;background-color:var(--text);clip-path:polygon(100% 0%,0 0%,50% 100%);justify-self:end}select,.select:after{grid-area:select}select:focus-within{outline:2px solid var(--accent);outline-offset:.5rem}:root{--circle-height: 55px;--circle-width: 50px}.shapes{display:flex;gap:.5rem;align-items:center;justify-content:center;width:100%}.shape{width:var(--circle-width);height:var(--circle-height)}.wrong-circle{background-color:#bc83e3;border-radius:50%}.circle{background-color:#70b9cc;aspect-ratio:1/1;height:100%;width:max-content;padding:.5rem;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:50%}.circle div{max-width:12ch}.pill{width:80px;height:50px;background-color:#87c7a1;border-radius:100vw}.sticky{position:-webkit-sticky;position:sticky;bottom:0}.background-image{background:var(--accent) url(https://picsum.photos/seed/hi/500/300);padding:min(40px,3vw)}.blur{text-align:center;color:#fff;background:var(--shadow-dark);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@supports (not (backdrop-filter: blur())) and (not (-webkit-backdrop-filter: blur())){.blur{background:rgba(255,255,255,.5)}}.table{width:100%;border-collapse:collapse;background-color:var(--header)}.table thead,.table th{border-bottom:2px solid var(--accent)}.table td,.table th{padding:.75rem;text-align:center}.table tbody tr:nth-of-type(odd){background-color:var(--body-dark)}@media screen and (max-width: 600px){.table{border:0;background-color:unset}.table thead{position:absolute;clip:rect(0 0 0 0);margin:-1px;overflow:hidden;height:1px;width:1px}.table tr{display:block;margin-bottom:1rem}.table td{display:block;border-bottom:1px solid var(--light-grey);text-align:right}.table td:last-child{border-bottom:none}.table td:before{content:attr(data-label);float:left;font-weight:700}.table tbody tr:nth-of-type(even),.table tbody tr:nth-of-type(odd){background-color:var(--header)}}.label{position:relative;display:grid;place-items:center;grid-auto-flow:column;gap:1rem;padding:.5rem 1.25rem;border-radius:100vw}.toggle-text{font-size:1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.04rem;color:var(--text);z-index:2;user-select:none}.label input{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border-radius:100vw;-webkit-appearance:none;-moz-appearance:none;appearance:none}.label input:focus-visible{outline:4px solid var(--light-grey);outline-offset:4px}.toggle-btn{position:relative;pointer-events:none;width:5.5rem;height:3rem;border-radius:100vw;box-shadow:inset 0 -1px 5px #bebebe33}.toggle-btn:after{content:"";position:absolute;top:50%;left:.3rem;transform:translate3d(0,-50%,0);transition:transform .2s cubic-bezier(.95,.05,.795,.035);height:2.5rem;width:2.5rem;background-color:var(--accent);border-radius:50%;box-shadow:0 1px 2px #bebebe99}.label input:checked~.toggle-btn:after{transform:translate3d(2.4rem,-50%,0)}.tooltip{color:var(--accent);text-decoration:underline;position:relative}.tooltip:before{content:attr(data-tooltip);position:absolute;bottom:1.2rem;left:50%;transform:translate(-50%);z-index:1;visibility:hidden;opacity:0;min-width:10ch;background-color:var(--accent);font-size:.75em;color:#fff;text-align:center;padding:8px;border-radius:3px;transition:opacity .6s}.tooltip:hover:before{opacity:1;visibility:visible}#individual_transform button{color:var(--text);font-weight:600;text-align:center;background:var(--accent);padding:1rem;border:none;border-radius:3px;transition:transform 125ms ease-out}.button-wrong{transform:translateY(20%)}.button-wrong:hover{transform:scale(.8)}.button-wrong:active{transform:rotate(180deg)}:root{--ty: 20%;--scale: 1;--deg: 0deg}.button-transform{transform:translateY(var(--ty)) scale(var(--scale)) rotate(var(--deg));will-change:transform}.button-transform:hover{--scale: .8}.button-transform:active{--deg: 180deg}.overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.typing-demo{-webkit-animation:typing 2s steps(12),blink .5s step-end infinite alternate;animation:typing 2s steps(12),blink .5s step-end infinite alternate;white-space:nowrap;overflow:hidden;border-right:3px solid;font-family:monospace;font-size:2rem;width:12ch}@-webkit-keyframes typing{0%{width:0}}@keyframes typing{0%{width:0}}@-webkit-keyframes blink{50%{border-color:transparent}}@keyframes blink{50%{border-color:transparent}}#video,.container-video{width:100%;max-width:960px}.video-wrapper{position:relative;padding-bottom:56.15%;height:0;overflow:hidden}iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.writing-mode{padding-block:2rem;width:100%}.vertical-right{writing-mode:vertical-rl}.vertical-left{writing-mode:vertical-lr}.horizontal{writing-mode:horizontal-tb}.dialog{display:block;transition:all .4s cubic-bezier(.075,.82,.165,1);opacity:0;transform:translate3d(0,-500%,0);border:0;border-radius:.85rem;margin:auto;color:var(--text);padding:1.5rem;background-color:var(--body-dark)}.dialog p+p{margin-top:.5rem}.dialog footer{background-color:var(--body-dark);display:flex;justify-content:flex-end;padding-bottom:0}.dialog::backdrop{background:rgba(0,0,0,.5)}.dialog[open]{opacity:1;transform:translateZ(0)}