:root{color-scheme:light dark;--gutter:3rem;--bkg:light-dark(hsl(82,11%,98%),hsl(28,2%,19%));--bkg2:light-dark(hsl(28,2%,19%),hsl(82,11%,98%));--txt:light-dark(hsl(28,4%,11%),hsl(82,11%,98%));--txt2:light-dark(hsl(82,11%,98%),hsl(28,4%,11%));--brand:hsl(28,100%,59%);--brandtxt:hsl(82,11%,98%);--accent1:hsl(204,99%,36%);--accent2:hsl(7,76%,42%);--valid:hsl(100,100%,28%);--invalid:hsl(0,100%,28%);}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif;}
input,button,select,textarea{font:inherit;padding:0.25rem 0.4rem;border-radius:0.5rem;color:var(--txt);background-color:var(--bkg);}
input{accent-color:var(--brand);}
input:user-invalid{outline-color:var(--invalid);}
input:user-valid{outline-color:var(--valid);}
form{display:grid;gap:1rem 2rem;}
body{height:100vh;height:100lvh;width:100vw;width:100lvw;display:grid;overflow:hidden;grid-template-columns:[page-start column1-start lcolumn-start]1fr[breakout-start column1-end column2-start]1fr[lcolumn-end mcolumn-start content-start column2-end column3-start]min((100% - (var(--gutter)*4)),120ch)[mcolumn-end content-end column3-end column4-start rcolumn-start]1fr[breakout-end column4-end column5-start]1fr[page-end column5-end rcolumn-end];grid-template-rows:[page-start banner-start row1-start]auto[banner-end header-start row1-end row2-start]auto[header-end row2-end row3-start content-start]1fr[content-end row3-end row4-start footer-start]auto[footer-end row4-end page-end];position:relative;}
@view-transition{navigation:auto;}
#logo{view-transition-name:title;}
#pageCover{z-index:0;position:absolute;top:0;left:0;width:100lvw;height:100lvh;transition:all 400ms ease-in-out;opacity:0;}
.darkGlass,.whiteGlass,.brandGlass{backdrop-filter:blur(1rem);box-shadow:0 4px 30px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.3);padding:1rem;transition:all 500ms ease-in-out;}
.whiteGlass{background-color:hsl(from var(--bkg) h s l / .15);color:var(--txt);}
.whiteGlass:hover{background-color:hsl(from var(--bkg) h s l / .75);}
.darkGlass{background-color:hsl(from var(--bkg2) h s l / .15);color:var(--txt2);}
.darkGlass:hover{background-color:hsl(from var(--bkg2) h s l / .75);border:1px solid rgba(0,0,0,0.3);}
.brandGlass{background-color:hsl(from var(--brand) h s l / .25);color:var(--brandtxt);}
.brandGlass:hover{background-color:hsl(from var(--brand) h s l / .75);}
.brandButton{padding:0.25rem 0.75rem;border-radius:999px;border:1px solid var(--brandtxt);text-align:center;font-size:1rem;font-weight:bold;color:var(--brandtxt);text-decoration:none; transition:all 500ms ease-in-out;background:linear-gradient(to bottom,hsl(from var(--brand)h s 70%), var(--brand) 50%,hsl(from var(--brand)h s 45%));box-shadow:0 4px 15px rgba(0,0,0,0.3);}
.brandButton:hover{box-shadow:0 0 10px var(--brand),0 0 20px hsl(from var(--brand)h s 75%),0 0 30px hsl(from var(--brand)h s 50%);transform:scale(1.03);}
.brandButton:active{transform:scale(0.95);}