:root{--color-primary: #1D3557;--color-secondary: #457B9D;--color-accent: #F1D302;--color-background: #F8FAFC;--color-background-inverse: #121212;--text-primary: #212529;--text-muted: #292020;--text-primary-inverse: #F8F9FA;--text-muted-inverse: #E9ECEF}@media(prefers-color-scheme:dark){:root{--color-primary: rgb(22, 22, 26);--color-secondary: black;--color-accent: #F1D302;--color-background: #121212;--color-background-inverse: #F8FAFC;--text-primary: #F8F9FA;--text-muted: #E9ECEF;--text-primary-inverse: #212529;--text-muted-inverse: #333333}}body[data-theme=light]{--color-primary: #1D3557;--color-secondary: #457B9D;--color-accent: #F1D302;--color-background: #F8FAFC;--color-background-inverse: #121212;--text-primary: #212529;--text-muted: #292020;--text-primary-inverse: #F8F9FA;--text-muted-inverse: #E9ECEF}body[data-theme=dark]{--color-primary: rgb(22, 22, 26);--color-secondary: black;--color-accent: #F1D302;--color-background: #121212;--color-background-inverse: #F8FAFC;--text-primary: #F8F9FA;--text-muted: #E9ECEF;--text-primary-inverse: #212529;--text-muted-inverse: #333333}@font-face{font-family:Inter;src:url(../assets/fonts/inter-variable.woff2) format("woff2 supports variations"),url(../assets/fonts/inter-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}img,picture,video,canvas,svg{display:block;max-width:100%}svg{fill:currentColor}ul,ol{list-style:none}a{display:inline-block;text-decoration:none}p a{text-decoration:underline}input,button,textarea,select{font:inherit;border:none;background:transparent}button{display:block;cursor:pointer}:root{font-size:clamp(1rem,.1vw + 1rem,1.125rem)}body{overflow-x:clip;font-size:1rem;line-height:1.5;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text-muted);background-color:var(--color-background)}h1,h2,h3,h4,h5,h6{color:var(--text-primary)}a{color:inherit}*:focus-visible{outline:solid 2px var(--color-accent)}svg{fill:none;stroke:var(--text-primary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon{display:flex;width:1em;aspect-ratio:1/1}body{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}.header-content,.main-content,.footer-content{display:grid;max-width:1400px;margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem)}.main-content{height:100%}header{padding:1rem 0;color:var(--text-primary);font-size:1.25rem;font-weight:700}.header-content{position:relative;display:flex;justify-content:space-between;gap:8rem}.header-content a,.header-content button{padding:1rem;border-radius:.5rem}.footer-content ul{display:grid;place-items:center;gap:2rem}@media(min-width:800px){.footer-content ul{grid-template-columns:1fr 1fr 1fr}}@media(min-width:992px){header{font-size:1rem}.header-content{display:grid;grid-template-columns:auto 1fr auto;place-items:center}}nav{display:grid;grid-template-columns:1fr auto}.nav-list-container{position:fixed;inset:0;top:var(--header-height);display:none;background-color:var(--color-background)}.nav-list{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%;height:calc(100svh - var(--header-height) * 2);border-radius:1rem;background-color:var(--color-primary)}.nav-list a{padding:1rem;border-radius:.5rem;color:var(--text-primary-inverse)}.active-page{position:relative}.active-page:after{content:"";position:absolute;left:1rem;bottom:1rem;width:calc(100% - 2rem);height:2px;border-radius:1rem;background-color:var(--color-secondary)}body[data-theme=dark] .nav-list a{color:var(--text-primary)}body[data-theme=dark] .active-page:after{background-color:var(--color-accent)}.hamburger-button{border-radius:.5rem;z-index:9999}.hamburger-button .icon{width:2em}.menu-tools{position:fixed;left:0;right:0;bottom:0;visibility:hidden;height:var(--header-height);display:flex;justify-content:space-around;align-items:center;background-color:var(--color-background)}.menu-tools .button{border-radius:.5rem}body:has(nav[data-open=true]){overflow:hidden;padding-right:var(--scrollbar-width)}nav[data-open=true] .nav-list-container{display:block}nav[data-open=true] .nav-list{visibility:visible}nav[data-open=true]+.menu-tools{visibility:visible}@media(min-width:992px){.hamburger-button{display:none}nav{width:100%;height:100%}.nav-list-container{position:static;visibility:visible;display:block;background-color:unset}.nav-list{flex-direction:row;align-items:center;background-color:unset;height:100%}.nav-list a{color:var(--text-primary)}.menu-tools{position:static;visibility:visible;height:100%;background-color:unset}}.header-logo .icon,.theme-button .icon{width:2em}footer{padding:1rem 0;color:var(--text-muted-inverse);background-color:var(--color-primary)}body[data-theme=dark] footer{color:var(--text-muted)}.main-content-index{display:grid;gap:2rem;margin:3rem 0}.album{display:grid;gap:2rem}.album-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;place-items:center}.album-wrapper img{border:solid 2px var(--color-background-inverse);border-radius:.5rem}.buttons-container{display:grid;gap:2rem}.buttons{display:flex;justify-content:space-around}.button,.button4,.button3,.button2,.button1{padding:1rem 2rem;border-radius:.5rem;outline-color:var(--color-background-inverse)}.button:active,.button4:active,.button3:active,.button2:active,.button1:active{transform:scale(.9)}.button1{background-color:#009a00}.button1:hover{background-color:#004d00}.button1{color:var(--text-primary-inverse)}.button2{background-color:#33f}.button2:hover{background-color:#006}.button2{color:var(--text-primary-inverse)}.button3{background-color:#ff1a1a}.button3:hover{background-color:#900}.button3{color:var(--text-primary-inverse)}.button4{background-color:#ff3}.button4:hover{background-color:#b3b300}.button4{color:var(--text-primary)}body[data-theme=dark] .button1{background-color:#009a00}body[data-theme=dark] .button1:hover{background-color:#004d00}body[data-theme=dark] .button1{color:var(--text-primary)}body[data-theme=dark] .button2{background-color:#33f}body[data-theme=dark] .button2:hover{background-color:#006}body[data-theme=dark] .button2{color:var(--text-primary)}body[data-theme=dark] .button3{background-color:#ff1a1a}body[data-theme=dark] .button3:hover{background-color:#900}body[data-theme=dark] .button3{color:var(--text-primary)}body[data-theme=dark] .button4{background-color:#ff3}body[data-theme=dark] .button4:hover{background-color:#b3b300}body[data-theme=dark] .button4{color:var(--text-primary-inverse)}.main-content-not-found{display:grid;grid-template-rows:1fr 1fr;place-items:center;height:100%;width:100%;max-width:none;padding:4rem 0}.main-content-not-found section{text-align:center}.main-content-not-found h1{width:fit-content;height:fit-content;font-size:5rem}.main-content-not-found a{margin-top:1.5rem;padding:1rem 2rem;color:var(--text-muted-inverse);background-color:var(--color-primary);border-radius:1rem;transition:background-color .3s ease}.main-content-not-found a:hover{background-color:color-mix(in srgb,var(--color-primary),black 10%)}.main-content-not-found a:active{transform:scale(.95)}body[data-theme=dark] .main-content-not-found a{color:var(--text-muted)}.main-content-sass{display:grid;gap:2rem;max-width:clamp(40ch,80%,60ch);margin:2rem auto}.sass-start,.pro-con{display:grid;gap:1rem}.pro-con ul{display:grid;gap:1ch;list-style-type:disc;padding-left:1.5rem}