*,*:before,*:after{padding:0;margin:0;box-sizing:border-box}:root{font-family:Outfit,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: hsl(240, 89%, 47%);--primary-color-light: hsl(240, 89%, 75%);--primary-color-very-light: hsl(240, 89%, 95%);--primary-color-dark: hsl(240, 89%, 25%);--primary-color-very-dark: hsl(240, 89%, 15%);--accent-color: hsl(332, 100%, 35%);--accent-color-dark: hsl(332, 100%, 30%);--light-gray: hsl(0, 0%, 98%);--medium-light-gray: hsl(0, 0%, 85%);--medium-gray: hsl(0, 0%, 71%);--white: #fff;--red: #ff0000;--yellow: #feff00;--light-bg-color: var(--light-gray);--light-bg-linear-gradient: linear-gradient( to right, var(--light-bg-color), #ececec );--dark-bg-linear-gradient: linear-gradient( to bottom, var(--primary-color-dark), var(--primary-color) 50%, var(--primary-color-dark) );--border-radius: .75rem;--border-color: #cccccc;--card-box-shadow: rgba(99, 99, 99, .2) 0px 2px 8px 0px;--card-box-shadow-hover: rgba(99, 99, 99, .2) 2px 6px 8px 0px;--card-box-shadow-active: rgba(99, 99, 99, .2) 0px 0px 8px 0px;--card-box-shadow-light: rgba(156, 156, 156, .2) 0px 2px 8px 0px;--card-box-shadow-hover-light: rgba(156, 156, 156, .2) 2px 6px 8px 0px;--card-box-shadow-active-light: rgba(156, 156, 156, .2) 0px 0px 8px 0px}html{scroll-behavior:smooth}body{min-height:100vh;background-color:var(--light-gray);font-size:1.25rem}body.dark{background-color:var(--primary-color-dark);color:var(--light-gray)}body.dark h2{color:var(--light-gray)}h2{font-size:2rem;color:var(--primary-color-dark)}img{max-width:100%}section{padding:clamp(2rem,1.5801rem + 1.7917vw,3rem) 0}.container{max-width:1280px;margin:0 auto;width:80%}header{padding:1rem 0 2rem;background:var(--primary-color-very-dark);color:var(--light-gray)}header>.container{display:flex;justify-content:space-between;align-items:center}.nav__list{list-style:none;display:flex;gap:1em}.nav__link{font-size:clamp(1rem,.912rem + .3756vw,1.25rem);text-decoration:none;color:inherit;padding-bottom:.25em}.nav__link:hover{border-bottom:1px solid var(--accent-color)}.logo{font-size:clamp(1.25rem,1.162rem + .3756vw,1.5rem)}.nav__button{display:flex;flex-direction:column;justify-content:center}#dark-mode-toggle{display:block;background:transparent;border:none;display:flex;flex-direction:column;align-items:center;transition:tranform .3s ease}#dark-mode-toggle img{width:100%;height:100%;max-height:24px;max-width:24px}#dark-mode-toggle:hover{transform:scale(1.1)}#hero{padding:clamp(4rem,2.9437rem + 4.507vw,7rem) 0;background:var(--light-bg-linear-gradient)}#hero>.container{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(2rem,1.6479rem + 1.5023vw,3rem)}.hero__title{font-size:clamp(2rem,1.2958rem + 3.0047vw,4rem);line-height:1.3;color:var(--primary-color-dark)}.hero__content{font-size:clamp(1.125rem,.993rem + .5634vw,1.5rem)}.hero__link{font-size:clamp(1.125rem,.993rem + .5634vw,1.5rem);text-decoration:none;color:var(--accent-color);border:1px solid var(--accent-color);padding:.5em 1em;border-radius:var(--border-radius)}.hero__link:hover{color:var(--light-gray);background-color:var(--accent-color)}body.dark #hero{background-image:var(--dark-bg-linear-gradient)}body.dark .hero__title{color:var(--light-gray)}body.dark .hero__link{background-color:var(--accent-color);color:var(--light-gray)}body.dark .hero__link:hover{background-color:var(--accent-color-dark)}h2{margin-bottom:1em}#contact-form{accent-color:var(--accent-color);position:relative;max-width:45rem;margin-right:auto;background:var(--light-gray);border-radius:var(--border-radius);box-shadow:var(--card-box-shadow);padding:clamp(1.5rem,.5458rem + 4.0712vw,2.5rem);display:grid;grid-template-columns:1fr}label{font:inherit;font-size:clamp(1rem,.895rem + .4479vw,1.25rem);display:block;margin-bottom:.5rem}button,input,textarea{font:inherit;width:100%;cursor:pointer}input:not([type=submit]),textarea{border-radius:var(--border-radius);border:1px solid var(--border-color);font-size:1.125rem;padding:.66667em 1.33334em;height:3rem}:is(input:not([type=submit]),textarea):focus-visible{outline-color:var(--accent-color)}:is(input:not([type=submit]),textarea):hover{border-color:var(--accent-color)}textarea{min-height:calc(3lh + 1.4em);resize:block}.required:after{content:" *";color:var(--primary-color)}.form-group{margin-bottom:1.5rem}.form-group:has([required]) label{display:flex;gap:1ch}.form-group:has([required]) label:after{content:"*";color:var(--accent-color)}.consent-row{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:1rem;row-gap:0;margin:0 0 1rem}input[type=checkbox]{width:auto;height:auto}.consent-label{display:inline;cursor:pointer;margin-bottom:0}input[type=submit]{appearance:none;background:var(--accent-color);color:var(--light-gray);border:none;border-radius:5px;padding:1rem 0;width:100%;cursor:pointer;font-weight:700;font-size:clamp(1rem,.895rem + .4479vw,1.25rem);line-height:150%}input[type=submit]:hover{background-color:var(--accent-color-dark)}.error-message{padding-top:.25rem;color:var(--red);display:none;font-size:clamp(1rem,.895rem + .4479vw,1.25rem)}:is(.form-group:has(input:user-invalid),.form-group:has(textarea:user-invalid)) input,:is(.form-group:has(input:user-invalid),.form-group:has(textarea:user-invalid)) textarea{border-color:var(--red);outline:1px solid var(--red)}:is(.form-group:has(input:user-invalid),.form-group:has(textarea:user-invalid)) .error-message{display:block}.span-all{grid-column:1 / -1}.success-message{position:absolute;top:-1rem;left:0;right:0;margin:0 auto;width:fit-content;background-color:var(--primary-color-dark);border-radius:.75rem;color:var(--light-gray);padding:1.5rem;z-index:2;display:none}.success-message.visible{display:block}.success-message .title{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.success-message .title h2{color:var(--light-gray);font-size:1.125rem}body.dark #contact-form{background-color:var(--primary-color-very-light);color:var(--primary-color-very-dark)}@media (min-width: 48rem){#contact-form{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}.form-group{margin-bottom:0}.consent-row{margin:1rem 0}}.project-card{border-radius:var(--border-radius);box-shadow:var(--card-box-shadow);overflow:hidden;max-width:360px;position:relative;transition:all .3s ease}.project-card .project-link{position:absolute;top:0;bottom:0;left:0;height:100%;width:100%;font-size:0}.project-card .project-screenshot img{max-height:12rem;width:100%;object-fit:cover;object-position:top}.project-card .content{padding:1rem 2rem 2rem;display:flex;flex-direction:column;gap:1rem}.project-card:hover{box-shadow:var(--card-box-shadow-hover);transform:translateY(-2%)}.project-card:active{box-shadow:var(--card-box-shadow-active)}#portfolio .card-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));justify-items:center;gap:1rem}body.dark .project-card{background-color:var(--primary-color);border:1px solid var(--primary-color);box-shadow:var(--card-box-shadow-light)}body.dark .project-card:hover{box-shadow:var(--card-box-shadow-hover-light)}body.dark .project-card:active{box-shadow:var(--card-box-shadow-active-light)}footer{margin-top:2rem;padding:3rem 0;background-color:var(--primary-color-very-dark);color:var(--light-gray)}footer>.container{display:flex;justify-content:space-between}footer .copyright{font-size:.75rem}