.flex-center{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.btn,.btn-dark,.btn-light,.btn-ghost-light,.btn-ghost-dark{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em;flex-wrap:wrap;padding:var(--btn-padding, .75em 1.25em);background-color:var(--btn-bg-clr, hsl(0, 0%, 0%));color:var(--btn-text-clr, hsl(0, 0%, 100%));box-shadow:var(--btn-box-shadow, var(--shadow-small));border-width:var(--btn-border-width, 2px);border-style:var(--btn-border-style, solid);border-color:var(--btn-border-clr, var(--btn-bg-clr, transparent));border-radius:var(--btn-border-rad, 0);font-weight:var(--btn-fw, 700);font-size:var(--btn-fs, var(--font-size, 1em));font-family:var(--btn-ff, var(--ff-sans));letter-spacing:.05ch;line-height:1.1;text-decoration:none;cursor:pointer;transition:all .15s;--btn-hover-filter-value: opacity(.75);--btn-focus-outline-width: var(--size-3);--btn-focus-outline-offset: var(--size-2);--btn-focus-outline-clr: var(--btn-bg-clr, hsl(0, 0%, 0%))}.btn:active,.btn-dark:active,.btn-light:active,.btn-ghost-light:active,.btn-ghost-dark:active{transform:scale(99%)}.btn:hover,.btn-dark:hover,.btn-light:hover,.btn-ghost-light:hover,.btn-ghost-dark:hover{filter:var(--btn-hover-filter-value)}.btn:focus-visible,.btn-dark:focus-visible,.btn-light:focus-visible,.btn-ghost-light:focus-visible,.btn-ghost-dark:focus-visible{outline-style:solid;outline-width:var(--btn-focus-outline-width);outline-offset:var(--btn-focus-outline-offset);outline-color:var(--btn-focus-outline-clr)}.icon,.icon-mask{color:currentColor;block-size:1lh;aspect-ratio:1}@font-face{font-family:Kanit;src:local("Kanit"),url(/vite-sass-boilerplate/fonts/kanit-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Kanit;src:local("Kanit"),url(/vite-sass-boilerplate/fonts/kanit-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Kanit;src:local("Kanit"),url(/vite-sass-boilerplate/fonts/kanit-extralight.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:DMSerif;src:local("DMSerif"),url(/vite-sass-boilerplate/fonts/dmserif-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:DMSerif;src:local("DMSerif"),url(/vite-sass-boilerplate/fonts/dmserif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}:root{--fs--1: clamp(.9375rem, .8972rem + .1343vi, 1.0315rem);--fs-0: clamp(1.125rem, 1.0179rem + .3571vi, 1.375rem);--fs-1: clamp(1.35rem, 1.1431rem + .6898vi, 1.8329rem);--fs-2: clamp(1.62rem, 1.2672rem + 1.176vi, 2.4432rem);--fs-3: clamp(1.944rem, 1.3814rem + 1.8755vi, 3.2568rem);--fs-4: clamp(2.3328rem, 1.472rem + 2.8693vi, 4.3413rem);--fs-5: clamp(2.7994rem, 1.5189rem + 4.2681vi, 5.787rem)}:root{--ff-sans: Kanit;--ff-serif: DMSerif}:root{--fw-slim: 300;--fw-normal: 500;--fw-thick: 700}:root{--min-width: 300px;--content-width: 1400px;--sidebar-width: 300px;--par-min-width: 25ch;--par-max-width: 65ch}:root{--size-1: .0625em;--size-2: .125em;--size-3: .25em;--size-4: .5em;--size-5: .75em;--size-6: 1em;--size-7: 1.25em;--size-8: 1.5em;--size-9: 1.75em;--size-10: 2em;--size-11: 2.5em;--size-12: 3em;--size-13: 4em;--size-14: 5em;--size-15: 6em;--size-16: 8em;--size-17: 10em;--size-18: 12em;--size-19: 14em}:root{--punctuation-offset: -.3em;--scroll-top-offset: 3ex}:root{--clr-green: green;--clr-red: salmon;--clr-blue: blue;--clr-dark: indigo;--clr-light: ghostwhite}:root{--clr-gray-10: hsl(0deg 0% 90%);--clr-gray-20: hsl(0deg 0% 80%);--clr-gray-30: hsl(0deg 0% 70%);--clr-gray-40: hsl(0deg 0% 60%);--clr-gray-50: hsl(0deg 0% 50%);--clr-gray-60: hsl(0deg 0% 40%);--clr-gray-70: hsl(0deg 0% 30%);--clr-gray-80: hsl(0deg 0% 20%);--clr-gray-90: hsl(0deg 0% 10%)}:root{--clr-green-10: hsl(120deg 100% 90%);--clr-green-20: hsl(120deg 100% 80%);--clr-green-30: hsl(120deg 100% 70%);--clr-green-40: hsl(120deg 100% 60%);--clr-green-50: hsl(120deg 100% 50%);--clr-green-60: hsl(120deg 100% 40%);--clr-green-70: hsl(120deg 100% 30%);--clr-green-80: hsl(120deg 100% 20%);--clr-green-90: hsl(120deg 100% 10%);--clr-red-10: hsl(6deg 93% 90%);--clr-red-20: hsl(6deg 93% 80%);--clr-red-30: hsl(6deg 93% 70%);--clr-red-40: hsl(6deg 93% 60%);--clr-red-50: hsl(6deg 93% 50%);--clr-red-60: hsl(6deg 93% 40%);--clr-red-70: hsl(6deg 93% 30%);--clr-red-80: hsl(6deg 93% 20%);--clr-red-90: hsl(6deg 93% 10%);--clr-blue-10: hsl(240deg 100% 90%);--clr-blue-20: hsl(240deg 100% 80%);--clr-blue-30: hsl(240deg 100% 70%);--clr-blue-40: hsl(240deg 100% 60%);--clr-blue-50: hsl(240deg 100% 50%);--clr-blue-60: hsl(240deg 100% 40%);--clr-blue-70: hsl(240deg 100% 30%);--clr-blue-80: hsl(240deg 100% 20%);--clr-blue-90: hsl(240deg 100% 10%);--clr-dark-10: hsl(275deg 100% 90%);--clr-dark-20: hsl(275deg 100% 80%);--clr-dark-30: hsl(275deg 100% 70%);--clr-dark-40: hsl(275deg 100% 60%);--clr-dark-50: hsl(275deg 100% 50%);--clr-dark-60: hsl(275deg 100% 40%);--clr-dark-70: hsl(275deg 100% 30%);--clr-dark-80: hsl(275deg 100% 20%);--clr-dark-90: hsl(275deg 100% 10%);--clr-light-10: hsl(240deg 100% 90%);--clr-light-20: hsl(240deg 100% 80%);--clr-light-30: hsl(240deg 100% 70%);--clr-light-40: hsl(240deg 100% 60%);--clr-light-50: hsl(240deg 100% 50%);--clr-light-60: hsl(240deg 100% 40%);--clr-light-70: hsl(240deg 100% 30%);--clr-light-80: hsl(240deg 100% 20%);--clr-light-90: hsl(240deg 100% 10%)}:root{--shadow-small: 1px 2px 8px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-medium: 1px 4px 12px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-large: 1px 8px 20px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-drop-small: 1px 1px 2px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-drop-medium: 2px 2px 2px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-drop-large: 3px 3px 2px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-inset-small: inset 1px 1px 8px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-inset-medium: inset 1px 1px 12px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-inset-large: inset 2px 2px 16px var(--shadow-color, hsla(0, 0%, 0%, .25));--shadow-color: hsla(274.6153846154, 100%, 25.4901960784%, .75)}/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;tab-size:4}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-block-size:100vh;min-block-size:100svh;margin:0;line-height:3.125ex}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin-inline:0;margin-block-start:0;margin-block-end:0}p:not(:last-child){margin-block-end:3.125ex}h1,.h1,h2,.h2{line-height:2.380952381ex;margin-inline:0;margin-block-start:0;margin-block-end:2.380952381ex}h3,.h3{line-height:2.6315789474ex;margin-inline:0;margin-block-start:0;margin-block-end:2.6315789474ex}h4,.h4{line-height:2.7027027027ex;margin-inline:0;margin-block-start:0;margin-block-end:2.7027027027ex}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}:where(h1,h2,h3,h4,h5,h6,blockquote){text-wrap:balance;white-space:unset}p,li,figcaption{text-wrap:pretty;max-inline-size:75ch}a{text-decoration-skip-ink:auto;color:currentColor;text-underline-offset:.15em}blockquote{text-indent:-.4em}@supports (hanging-punctuation: first){html{text-indent:0;hanging-punctuation:first allow-end last}}pre{hanging-punctuation:none}img,picture,video,canvas,svg{display:block;max-inline-size:100%;height:auto}:where(svg){fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none}img{font-style:italic;object-fit:cover}figure{margin:0}input,button,textarea,select{color:currentColor;font:inherit;letter-spacing:inherit;word-spacing:inherit}textarea:not([rows]){min-height:10em}:where(textarea){resize:vertical}@supports (resize: block){:where(textarea){resize:block}}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}:where(ul,ol)[role=list]{list-style:none}ul,ol{margin-block-start:0;padding:0}table{border-collapse:collapse;border-spacing:0}th,td{text-align:start;vertical-align:top}::marker{line-height:0}:where(a[href],area,button,input:where([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio]),label[for],select,summary,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type=file]){cursor:auto}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}@media screen and (prefers-reduced-motion: reduce),(update: slow){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}@media (prefers-reduced-motion: no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(.25,0,.4,1)}:where(:not(:active)):focus-visible{transition-duration:.25s}}.center-text{text-align:center}.visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}body{font-family:var(--ff-sans, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-weight:var(--fw-normal)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--ff-serif)}h1,.h1{font-size:var(--fs-5)}h2,.h2{font-size:var(--fs-4)}h3,.h3{font-size:var(--fs-3)}h4,.h4{font-size:var(--fs-2)}.large{font-size:var(--fs-1)}body{font-size:var(--fs-0)}small{font-size:var(--fs--1)}p{font-weight:var(--fw-slim)}body{--body-bg-clr: var(--clr-light);--body-text-clr: var(--clr-dark);background-color:var(--body-bg-clr, var(--clr-light, hsl(0, 0%, 100%)));color:var(--body-text-clr, var(--clr-dark, hsl(0, 0%, 0%)))}#app{overflow:hidden}img:after{content:"Sorry, the image could not be loaded.";display:block;margin-block:1ex;font-size:var(--fs-0)}.logo:hover{--logo-hover-color-1: var(--body-bg-clr, var(--clr-light, hsl(0, 0%, 100%)));--logo-hover-color-2: var(--body-text-clr, var(--clr-dark, hsl(0, 0%, 0%)));--logo-hover-color-1-ratio: 60%;--logo-hover-color-2-ratio: 40%;--logo-hover-shadow-color: color-mix( in hsl, var(--logo-hover-color-1) var(--logo-hover-color-1-ratio), var(--logo-hover-color-2) var(--logo-hover-color-2-ratio) );filter:drop-shadow(0 0 2em var(--logo-hover-shadow-color))}.btn-light-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em;flex-wrap:wrap;width:100%;background-color:var(--clr-dark);padding:var(--size-10)}.button-container{width:100%}.content{display:grid;grid-template-columns:1fr min(var(--content-width, 1200px),100%) 1fr}.content>*{grid-column:2}.full-bleed{width:100%;grid-column:1/4}header{background-color:#000;background-image:linear-gradient(62deg,red,#00f);background-repeat:no-repeat;background-size:cover;color:var(--clr-light);gap:var(--size-8)!important;--section-max-padding: var(--size-17);padding-block:min(var(--section-max-padding, 5em),var(--section-dynamic-padding, 10vh))}@media screen and (min-width: 100em){header{--section-max-padding: var(--size-19)}}header p{font-weight:var(--fw-normal)}.container-header-logo{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--size-10);flex-wrap:wrap}footer{grid-template-columns:subgrid;display:grid;gap:var(--size-12);--section-max-padding: var(--size-17);padding-block-start:min(var(--section-max-padding, 5em),var(--section-dynamic-padding, 10vh))}footer .button-container{grid-column:1/4;padding-block-end:var(--size-6)}footer .social-icons{grid-column:2/3;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em;flex-wrap:wrap}footer .social-icons>a{transition:.15s}footer .social-icons>a:hover{scale:1.1}footer p:has(.dev-logo){grid-column:1/4;max-inline-size:100%;text-align:center;padding-block:var(--size-6);background-color:var(--clr-blue-10)}footer .dev-logo{display:inline-block}.btn{--btn-bg-clr: hsl(0, 0%, 4%)}.btn-dark{--btn-bg-clr: var(--clr-dark);--btn-text-clr: var(--clr-light)}.btn-light{--btn-bg-clr: var(--clr-light);--btn-text-clr: var(--clr-dark)}.btn-ghost-light{--btn-padding: calc(.75em - (var(--btn-border-width) - 2px)) calc(1.25em - (var(--btn-border-width) - 2px));--btn-bg-clr: transparent;--btn-text-clr: var(--clr-dark);--btn-border-width: 4px;--btn-border-clr: var(--clr-dark);--btn-focus-outline-clr: var(--btn-text-clr, hsl(0, 0%, 100%));--btn-hover-filter-value: none}.btn-ghost-light:hover{--btn-text-clr: var(--clr-light);--btn-bg-clr: var(--clr-dark)}.btn-ghost-dark{--btn-padding: calc(.75em - (var(--btn-border-width) - 2px)) calc(1.25em - (var(--btn-border-width) - 2px));--btn-bg-clr: transparent;--btn-text-clr: var(--clr-light);--btn-border-width: 4px;--btn-border-clr: var(--clr-light);--btn-focus-outline-clr: var(--btn-text-clr, hsl(0, 0%, 100%));--btn-hover-filter-value: none}.btn-ghost-dark:hover{--btn-text-clr: var(--clr-dark);--btn-bg-clr: var(--clr-light)}.icon-mask{background-color:var(--icon-btn-clr, currentColor);-webkit-mask-image:url(/vite-sass-boilerplate/send.svg);mask-image:url(/vite-sass-boilerplate/send.svg);-webkit-mask-position:left;mask-position:left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--par-min-width),100%),1fr));grid-template-rows:auto;gap:clamp(var(--size-7),5vw,var(--size-10));padding-block:min(var(--section-max-padding, 5em),var(--section-dynamic-padding, 10vh));padding-inline:var(--size-6)}.card{padding-block:clamp(var(--size-6),5vw,var(--size-10));padding-inline:max(var(--size-8),10%)}.card:nth-child(1){--shadow-color: hsla(174, 72.0720720721%, 56.4705882353%, .25);--shadow-small: 1px 2px 8px var(--shadow-color, hsla(0, 0%, 0%, .25));box-shadow:var(--shadow-small)}.card:nth-child(2){--shadow-color: hsla(0, 100%, 50%, .25);--shadow-medium: 1px 4px 12px var(--shadow-color, hsla(0, 0%, 0%, .25));box-shadow:var(--shadow-medium)}.card:nth-child(3){--shadow-color: hsla(120, 100%, 25.0980392157%, .25);--shadow-large: 1px 8px 20px var(--shadow-color, hsla(0, 0%, 0%, .25));box-shadow:var(--shadow-large)}a{--_bg-clr: var(--body-bg-clr, var(--clr-light, hsl(0, 0%, 100%)));--_text-clr: var(--body-text-clr, var(--clr-dark, hsl(0, 0%, 0%)));--link-visited-text-clr: color-mix( in oklab, var(--_bg-clr) 20%, var(--_text-clr) 80% );--link-hover-bg-clr: color-mix( in oklab, var(--_bg-clr) 80%, var(--_text-clr) 20% );--link-active-bg-clr: color-mix( in oklab, var(--_bg-clr) 30%, var(--_text-clr) 70% )}a:visited{color:var(--link-visited-text-clr)}a:not(:has(svg,img)):hover{background-color:var(--link-hover-bg-clr)}a:focus-visible{outline-width:var(--link-outline-width, 2px);outline-style:solid;outline-offset:var(--link-outline-offset, 2px);outline-color:var(--body-text-clr, var(--clr-dark, hsl(0, 0%, 0%)));text-decoration-color:transparent}a:active{color:var(--body-bg-clr)!important;background-color:var(--body-text-clr)!important}
