.am-background{overflow:hidden}:root{--c-glass: #bbbbbc;--c-light: #fff;--c-dark: #000;--c-content: #224;--c-action: #0052f5;--c-bg: #fff;--glass-reflex-dark: 1;--glass-reflex-light: 1;--saturation: 150%;font-family:sans-serif;font-optical-sizing:auto;transition:background .4s cubic-bezier(1,0,.4,1),color .4s cubic-bezier(1,0,.4,1)}.am-background{margin:0;position:fixed;z-index:0;width:100%;height:100%}#container{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:var(--c-bg);color:var(--c-content)}canvas{width:100%;height:100%;background:var(--c-bg)}:has(input[value=dark]:checked){--c-glass: #bbbbbc;--c-light: #fff;--c-dark: #000;--c-content: #e1e1e1;--c-action: #ffdc03;--c-bg: #000;--glass-reflex-dark: 2;--glass-reflex-light: .3;--saturation: 150%}.switcher{position:fixed;z-index:2;top:40px;left:50%;translate:-50%;display:flex;align-items:center;gap:8px;width:168px;max-width:168px;height:70px;box-sizing:border-box;padding:8px 12px 10px;margin:0 auto;border:none;border-radius:99em;display:none;font-size:var(--fz);background-color:color-mix(in srgb,var(--c-glass) 12%,transparent);backdrop-filter:blur(8px) url(#switcher) saturate(var(--saturation));-webkit-backdrop-filter:blur(8px) saturate(var(--saturation));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -.3px -1px 4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 1px 5px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 6px 16px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent);transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1);backdrop-filter:blur(5px)}.switcher__legend{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.switcher__input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap}.switcher__icon{display:block;width:100%;transition:scale .2s cubic-bezier(.5,0,0,1)}.switcher__filter{position:absolute;width:0;height:0;z-index:-1}.switcher__option{--c: var(--c-content);display:flex;justify-content:center;align-items:center;padding:0 16px;width:68px;height:100%;box-sizing:border-box;border-radius:99em;opacity:1;transition:all .16s}.switcher__option:hover{--c: var(--c-action);cursor:pointer}.switcher__option:hover .switcher__icon{scale:1.2}.switcher__option:has(input:checked){--c: var(--c-content);cursor:auto}.switcher__option:has(input:checked) .switcher__icon{scale:1}.switcher:after{content:"";position:absolute;left:4px;top:4px;display:block;width:84px;height:calc(100% - 10px);border-radius:99em;background-color:color-mix(in srgb,var(--c-glass) 36%,transparent);z-index:-1;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 2px 1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -1.5px -1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -2px -6px 1px -5px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -1px 2px 3px -1px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 -4px 1px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 3px 6px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent)}.switcher:has(input[c-option="1"]:checked):after{translate:0 0;transform-origin:right;transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1),translate .4s cubic-bezier(1,0,.4,1);animation:scaleToggle .44s ease}.switcher:has(input[c-option="2"]:checked):after{translate:76px 0;transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1),translate .4s cubic-bezier(1,0,.4,1);animation:scaleToggle2 .44s ease;transform-origin:left}@keyframes scaleToggle{0%{scale:1 1}50%{scale:1.1 1}to{scale:1 1}}@keyframes scaleToggle2{0%{scale:1 1}50%{scale:1.1 1}to{scale:1 1}}.am-container-cards[data-astro-cid-5wnvluim]{scroll-snap-align:center;height:100vh;display:flex;flex-wrap:wrap;place-content:center;pointer-events:none;.thumb{width:26.04vmax;height:19.53vmax;perspective:65.1vmax;border-radius:.33vmax;margin:4.56vmax auto;pointer-events:auto;z-index:500;a{display:block;width:100%;height:100%;background:linear-gradient(#0006,#0006),var(--bg);background-size:0,cover;transform-style:preserve-3d;transition:all .5s;position:relative;background-position:center;&:hover{transform:rotateX(80deg);transform-origin:bottom}&:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.34vmax;background:inherit;background-size:cover,cover;background-position:bottom;transform:rotateX(90deg);transform-origin:bottom}span{color:#fff;text-transform:uppercase;position:absolute;top:100%;left:0;width:100%;font:700 .78vmax/2.34vmax Montserrat;text-align:center;transform:rotateX(-89.99deg);transform-origin:top;z-index:1}&:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;transition:all .5s;opacity:.15;box-shadow:0 0 6.51vmax 3.26vmax #00000080;transform:rotateX(95deg) translateZ(-5.21vmax) scale(.75);transform-origin:bottom}&:hover:before{opacity:1;box-shadow:0 0 1.63vmax 1.63vmax #00000080;transform:rotateX(0) translateZ(-3.91vmax) scale(.85)}}}}.am-logo{position:absolute;left:50%;transform:translate(-50%);width:5vmax;bottom:-9vmax}@layer base,demo;@layer demo{:root{--hue: 205;--blur: 0;--spread: 2}.am-titulo-of{display:flex;flex-direction:column;place-items:center;width:clamp(23.44vmax,50vw,39.06vmax);min-height:13.02vmax;max-height:29.3vmax;border-radius:.78vmax;padding:1.04vmax;gap:1.04vmax;font-family:Roboto,sans-serif;z-index:50;position:relative;pointer-events:auto}.board{--size: calc(var(--spread) * 1cqi);width:100%;height:100%;display:grid;place-items:center;position:relative;container-type:inline-size;overflow:hidden;filter:contrast(2);flex:1}h2{--font-level: 1.5}.board .fluid{--font-level: var(--font);--variable-unit: 100cqi;margin:0;text-align:center;text-transform:uppercase;font-weight:var(--weight);line-height:var(--line);font-family:Roboto,sans-serif;color:hsl(var(--hue) 100% 50%);height:100%;width:100%;letter-spacing:.07vmax;filter:blur(calc(var(--blur) * .07vmax)) brightness(1.25);mask:radial-gradient(circle at center,#000 .07vmax,#0000 .07vmax) 50% 50% / var(--size) var(--size);position:relative}.text-wrap{height:100%;width:100%;overflow:hidden;clip-path:inset(0 0 0 100%)}.text-wrap,.board .fluid{transition:clip-path .5s steps(calc(100 / var(--spread)))}[data-debug=true] .text-wrap,[data-debug=true] .board .fluid{transition:clip-path 0s;clip-path:inset(0 0 0 0)}.am-titulo-of:is(:hover,:focus-within) .text-wrap{transition:clip-path 0s;clip-path:inset(0 0 0 0)}.board .fluid{clip-path:inset(0 100% 0 0);transition-delay:.5s}.am-titulo-of:is(:hover,:focus-within) .board .fluid{clip-path:inset(0 0 0 0);transition-delay:0s}.am-titulo-of .board:before{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:plus-lighter;background:radial-gradient(circle at center,hsl(0 0% 40%) .07vmax,transparent .07vmax) 50% 50% / var(--size) var(--size)}}.fluid{font-size:5vmax}div.tp-dfwv{width:280px;display:none}.am-hero[data-astro-cid-bbe6dxrz]{scroll-snap-align:center;height:100vh;position:relative;pointer-events:none;display:grid;z-index:5;place-items:center;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}:root{--gradient: linear-gradient(to bottom, #24ffff, var(--c-bg))}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(/20-projects-with-bulma-css/assets/roboto.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}html{scroll-snap-type:y mandatory}body{--sb-track-color: var(--c-bg);--sb-thumb-color: var(--gradient);--sb-size: .7vmax}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}a,button,img{-webkit-tap-highlight-color:transparent;user-select:none}button{background-color:transparent;border:none;outline:none}body{min-height:100vh;height:max-content;width:100%;flex-direction:column}h1,h2,h3,h4,h5{font-family:AnotherDanger}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--sb-track-color)}body::-webkit-scrollbar-thumb{background:var(--sb-thumb-color)}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--sb-thumb-color) var(--sb-track-color)}}