html,body,#root{width:100dvw;height:100dvh;padding:0;overflow-x:hidden;margin:0}main{flex-grow:1;margin:3rem 0;justify-content:center;box-sizing:border-box;max-width:1500px;width:100%}button{padding:.6em 1.2em}body{text-align:center;place-items:center;justify-content:center;background-color:var(--basecolor)}body{text-align:center;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;color:var(--font-color)}body h1{font-size:2em;line-height:.9;text-align:center}body h2{font-size:1em;text-align:center;line-height:.5;color:var(--basecolor)}body p{font-weight:200;margin:auto}body a{font-weight:500;color:light-dark(hsl(0,0%,30%),hsl(0,0%,80%));text-decoration:inherit}body a:hover{color:light-dark(hsl(0,0%,40%),hsl(0,0%,100%))}body button{background-color:var(--basecolor);border-radius:20px;border:1px solid transparent;padding:.6em 1.2em;font-size:.8em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s;color:var(--font-color__highlight)}body button:hover{border-color:#646cff}body button:focus,body button :focus-visible{outline:4px auto -webkit-focus-ring-color}body button:disabled{opacity:.8;background-color:light-dark(hsl(0,3%,81%),hsl(0,3%,50%));cursor:not-allowed}body{color-scheme:light dark;background-color:var(--bg-color)}:root{--basecolor: light-dark(hsl(108, 100%, 21%), hsl(108, 100%, 27%));--font-color: light-dark(#4f4f4f, #fff);--font-color__highlight: aliceblue;--bg-color: light-dark(hsl(0, 0%, 90%), hsl(208, 32%, 20%))}:root{overflow-x:hidden;justify-content:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}hr{width:90dvw;border:rgba(133,133,133,.609) solid 1q}h1,h2,h3,h4{line-height:1rem;font-weight:800;margin:.5rem 0}p{font-size:small;font-weight:300;margin:1em 0}h4{font-size:small}.personal-info{width:90dvw;max-width:400px;margin:0;padding:1rem}.quick-links{display:flex;max-width:100%;align-items:center;justify-content:center}@media screen and (max-width:1000px){.quick-links{margin:3rem 0}}@media screen{.icon-link img{visibility:inherit}}@media screen and (prefers-color-scheme:dark){.icon-link img{filter:brightness(100%) contrast(0%) brightness(1.5)}}@media screen and (prefers-color-scheme:light){.icon-link img{filter:brightness(100%) contrast(0%) brightness(0)}}.icon-links{display:flex;flex-direction:row;margin:1em;justify-content:space-around;gap:1em;max-width:1000px}.card{border:1px solid hsla(0,0%,61%,.448);border-radius:10px;display:flex;flex-direction:column;min-width:5rem;padding:2rem}.card p,.card h4{text-align:start;line-height:1rem;font-size:small}.card p{font-weight:300;margin:.5em 0}.card h4{line-height:1rem;font-weight:800;margin:.5rem 0}.tag{color:var(--basecolor);font-size:.9rem;padding:.2rem;justify-self:start;border-radius:20px;font-weight:600;text-decoration:underline}.tag:before{content:"#"}.tags{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;place-content:start;gap:.5em}.skill-cards{flex-direction:column;display:flex;margin:3rem;margin-top:0;justify-content:space-between;gap:1rem}.container-personal-info{height:100%;width:100%;justify-self:center;display:flex;justify-content:center}.profile-section{width:100%;display:flex;flex-direction:column}@media screen and (min-width:1000px){.personal-info{position:sticky}.profile-section{display:grid;align-items:start;padding:0 2rem;box-sizing:content-box;grid-template-columns:1fr 2fr}}.tabs{display:flex;justify-content:space-evenly;gap:2rem;width:-moz-fit-content;width:fit-content;max-width:500px;align-items:center;justify-self:center;margin:1rem auto;box-sizing:border-box}.tabs-container{justify-content:center;width:100%;place-content:center;place-items:center}@media screen and (max-width:600px){.tabs{gap:5px;max-width:50%;justify-content:center}.tabs button{min-width:100%}}.tab .tab-on{--tabcolor: hsl(from var(--basecolor) h calc(s/4) calc(l*2) );background-color:var(--tabcolor);box-shadow:2px 2px 10px hsl(from var(--basecolor) h s l / 50%);border:none}.tab .tab-off:hover{transition:all .3s ease-in-out .1s;box-shadow:2px 2px 10px hsl(from var(--basecolor) h s l /50%)}.skills{display:grid;grid-template-columns:4rem 1fr;align-items:center}.contents{width:100%;justify-content:center;display:flex}.content{display:flex;flex-flow:column wrap;flex-direction:row;justify-content:space-evenly;align-items:center;margin:3rem;width:100%;-moz-column-gap:1rem;column-gap:1rem;row-gap:1rem;margin:0}.content>.card{width:clamp(200px,40%,1000px)}@media screen and (max-width:980px){.content>.card{margin:0;justify-self:center}}.contact-form{flex-grow:1;display:flex;width:100%;height:100%;place-content:center;justify-content:center}.contact-form form{display:flex;width:clamp(300px,90dvw,600px);flex-direction:column;padding:4dvw;border-radius:10px;box-sizing:border-box;height:100%;gap:1rem}.contact-form form>button{max-width:100%;margin:.1rem 1rem}.input-field{resize:vertical;display:flex;flex-direction:column}.input-field textarea{resize:vertical}.input-field input,.input-field textarea{border:1q solid var(--basecolor);border-radius:10px;background-color:light-dark(white,#252525);margin:.1rem 1rem;padding:.8rem}:is(.input-field input,.input-field textarea)::-moz-placeholder{color:light-dark(#252525,white)}:is(.input-field input,.input-field textarea)::placeholder{color:light-dark(#252525,white)}:is(.input-field input,.input-field textarea):focus{border-radius:20px;transition:border-radius ease-in-out .3s}header,nav{display:flex;flex:0 0 100%;position:sticky;top:0;width:100dvw;height:3rem;align-items:center;background-color:var(--basecolor);z-index:2}nav{display:grid;padding:0 3rem;box-sizing:border-box;grid-template-columns:1fr 1fr;grid-template-columns:1fr 4fr;gap:1rem}nav .links{display:flex;gap:2rem;align-items:center;justify-content:flex-end}@media screen and (max-width:900px){nav{font-size:12px}}nav .home-header-link{justify-self:start}nav a{color:#ccc}nav a:hover{color:#fff}.nav-links{flex-direction:row;max-width:1000px;display:flex;justify-self:center}.nav-links ul{gap:20dvw;justify-content:center;padding:0}.nav-links ul,.nav-links li{display:flex;list-style:none;list-style-image:none}footer{display:flex;flex-direction:column;gap:2rem;padding:2rem 0;bottom:0;margin:0;border-top:1q solid hsl(0,0%,0%,20%);background-color:var(--bg-color);width:100%;justify-content:center;align-items:center}footer .copyright-info{font-size:.7rem}:root{scrollbar-gutter:stable;scrollbar-width:thin}.login{display:flex;flex-direction:column;gap:2rem;width:clamp(320px,60dvw,600px);justify-content:center;justify-self:center;align-items:center;padding:10dvh 0}.login .input-field{margin:0;width:100%}.login>button{width:5rem;height:2rem}.body-not-found{display:flex;width:100dvw;height:100dvh;justify-content:center;overflow:hidden;margin:0;padding:0;box-sizing:content-box;scrollbar-width:none;align-items:center}.not-found{display:grid;grid:3fr 1fr 1fr /1fr;align-items:center;justify-items:center;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;gap:1rem}.not-found>h1{animation:shake 4s cubic-bezier(.165,.84,.44,1) 0s infinite alternate;font-size:10rem}.not-found>p{font-size:2rem}@keyframes shake{0%{rotate:10deg}20%{rotate:0deg}to{rotate:-10deg}}.button__delete{flex-grow:3;display:flex;justify-content:flex-end;flex-direction:row;padding:0 4rem}.button__delete>button{background-color:#b00}.button__cancel>button{background-color:#483d8b}.form-button{display:flex;justify-content:center}.form-field{display:grid;grid:1fr / 1fr 2fr;align-items:center;align-self:center;padding:1rem;width:80%}.form-field>input{--boxshadow-dist: 5px;--boxshadow-blur: 20px;border-radius:10px;padding:.2rem 1rem;height:2rem;border:1q solid var(--basecolor)}.form{flex-direction:column;--position-side: 50dvw;background-color:hsl(from var(--bg-color) h s calc(l*.9));width:var(--position-side)}@media(max-width:1000px){.form{--position-side: 90dvw}}.form button{margin:1rem}[popover]{border:0;border-radius:30px;overflow:hidden}[popover]:popover-open{animation:boxShadowAnimation 3s cubic-bezier(.19,1,.22,1) .1s forwards}[popover]:popover-open::backdrop{animation:blurAnimation 3s cubic-bezier(.19,1,.22,1) .1s forwards}@keyframes blurAnimation{0%{background-color:#f0f8ff00;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#f0f8ff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}@keyframes boxShadowAnimation{0%{box-shadow:0 0 1px #f5f5f500,0 0 1px #0003}to{box-shadow:4px 4px 30px #f5f5f51a,-4px -4px 30px #0009}}.add-new-button__wrapper{--container-wrapper-height: 20dvh;--button-right-position: 50%;width:100%;display:flex;position:sticky;bottom:0dvw;align-items:flex-end;flex-basis:content;pointer-events:none}.add-new-button__wrapper .bg{width:100%;display:inline;background-color:#0ff;height:25dvh;margin:0;padding:0;position:static;bottom:0;left:0;background:linear-gradient(to bottom,transparent 0%,var(--bg-color) 70%)}.add-new-button__wrapper .add-new-button,.add-new-button__wrapper svg{aspect-ratio:1/1}.add-new-button__wrapper .add-new-button{left:50%;transform:translate(-50%);margin:3rem 0;pointer-events:all;background-color:var(--basecolor);width:clamp(5%,200px,4rem);height:auto;padding:0;border-radius:100%;position:absolute;right:var(--button-right-position)}.add-new-button__wrapper .add-new-button>svg{height:90%;width:auto}