@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lato:wght@300;400;700&display=swap";.home-container{grid-template-columns:4.75fr 7.25fr;align-items:center;gap:2rem clamp(2rem,-22.6531rem + 32.6531vw,10rem);padding:2.5rem;min-height:100vh}.home-img{height:calc(100vh - 5rem);width:100%;object-fit:cover;border-radius:2rem;z-index:10}.home-title{font-size:var(--h1-font-size);padding-left:4.25rem;position:relative}.home-title span{color:var(--first-color)}.home-title:before{content:"";position:absolute;top:22%;left:0;width:40px;height:4px;border-radius:.5rem;background-color:var(--first-color)}.home-description{line-height:1.75;max-width:600px;margin-block:1.5rem 2.5rem}.color-block{position:fixed;width:30%;height:150%;background-color:var(--first-color);transform:rotate(-16deg);top:-12%;left:-12%}.portfolio-container{grid-template-columns:repeat(3,1fr);gap:2rem;justify-content:center}.portfolio-card{background-color:var(--container-color);padding:1.5rem;border-radius:1.5rem}.portfolio-img-wrapper{border-radius:1.25rem;overflow:hidden;display:block}.portfolio-img{transition:transform .3s ease}.portfolio-card:hover .portfolio-img{transform:scale(1.2)}.portfolio-title{font-size:var(--large-font-size);margin-block:1.5rem .5rem}.portfolio-description{font-size:var(--small-font-size);line-height:1.5}.portfolio-skills{background-color:var(--body-color);padding-inline:.75rem;width:max-content;height:34px;border-radius:1rem;display:flex;align-items:center;column-gap:.75rem;margin-block:1.5rem}.portfolio-skill{width:16px}.portfolio-link{color:var(--title-color);display:inline-flex;align-items:center;column-gap:.5rem;transition:color .3s ease}.portfolio-link:hover{color:var(--text-color)}.link-icon{font-size:1.25rem}.show-more-link{color:var(--primary-color);text-decoration:underline;cursor:pointer;font-size:var(--small-font-size);margin-left:.25rem}.show-more-link:hover{text-decoration:underline;opacity:.8}.nav{position:fixed;inset-block:0;right:2rem;display:flex;align-items:center;z-index:1000}.nav-list{row-gap:1.25rem}.nav-link{background-color:var(--container-color);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;position:relative;transition:background .3s ease}.nav-link:hover,.active-nav{background-color:var(--first-color)}.nav-icon{color:var(--title-color);font-size:1.25rem;transition:color .3s ease}.nav-link:hover .nav-icon,.active-nav .nav-icon{color:var(--white-color)}.nav-name{position:absolute;top:0;right:0;background-color:var(--first-color);height:100%;padding-inline:1.75rem 2.75rem;border-radius:1.5rem;display:flex;align-items:center;color:var(--white-color);font-size:var(--small-font-size);font-weight:var(--weigh-700);opacity:0;visibility:hidden;z-index:-10;transition:opacity .3s ease,visibility .3s ease,right .3s ease}.nav-link:hover .nav-name{opacity:1;visibility:visible;right:.5rem}.nav-close,.nav-toggle{display:none}:root{--hue: 220;--first-color: hsl(var(--hue), 60%, 45%);--title-color: hsl(var(--hue), 4%, 26%);--text-color: hsl(var(--hue), 4%, 38%);--body-color: hsl(var(--hue), 4%, 99%);--container-color: hsl(var(--hue), 4%, 95%);--boarder-color: hsl(var(--hue), 4%, 91%);--white-color: hsl(var(--hue), 4%, 100%);--heading-font: "Josefin Sans", sans-serif;--body-font: "Lato", sans-serif;--h1-font-size: 3.5rem;--h2-font-size: 3rem;--h3-font-size: 1.5rem;--large-font-size: 1.25rem;--normal-font-size: 1rem;--small-font-size: .875rem;--smaller-font-size: .813rem;--weight-300: 300;--weight-400: 400;--weight-700: 700}@media screen and (max-width: 1208px){:root{--h1-font-size: 2.25rem;--h2-font-size: 2rem;--h3-font-size: 1.25rem;--large-font-size: 1rem;--normal-font-size: .938rem;--small-font-size: .813rem;--smaller-font-size: .75rem}}*{margin:0;padding:0;box-sizing:border-box}body,input,textarea,button{font-family:var(--body-font);font-size:var(--normal-font-size);font-weight:var(--weight-400)}h1,h2,h3{font-family:var(--heading-font);color:var(--title-color);font-weight:var(--weight-700)}ul{list-style:none}a{text-decoration:none}button,input,textarea{background-color:transparent;border:none;outline:none}img{display:block;max-width:100%}.button{display:inline-block;color:var(--title-color);border:1px solid var(--first-color);padding:1.25rem 4.5rem 1.25rem 2rem;border-radius:2rem;font-size:var(--small-font-size);font-weight:var(--weight-700);position:relative;overflow:hidden;transition:color .3s ease}.button:hover{color:var(--white-color)}.button:before{content:"";position:absolute;inset:0;background-color:var(--first-color);border-radius:inherit;z-index:-10;transform:translate(100%);transition:transform .3s ease}.button:hover:before{transform:translate(0)}.button-icon{position:absolute;inset:-1px -1px -1px auto;background-color:var(--first-color);aspect-ratio:1/1;border-radius:50%;color:var(--white-color);font-size:1.5rem;display:grid;place-items:center}.section{padding-block:4rem}.section-title{font-size:var(--h1-font-size);text-align:center;margin-bottom:4.5rem}.section-title span{color:var(--first-color)}.grid{display:grid}.container{max-width:1208px;margin-inline:auto;padding-inline:1.25rem}@media screen and (max-width: 1400px){.container{max-width:1008px}}@media screen and (max-width: 1208px){.nav-menu{position:fixed;top:0;right:-100%;background-color:var(--container-color);width:100%;height:100%;padding:5rem 0 0 3rem;z-index:1000;transition:right .3s ease}.show-menu{right:0}.nav-list{row-gap:2rem}.nav-link,.nav-name{all:unset}.nav-link{display:inline-flex;align-items:center;column-gap:1rem;cursor:pointer}.nav-name{color:var(--title-color);font-size:1rem;font-weight:var(--weight-700)}.nav-link:hover{background-color:initial}.nav-icon,.nav-name{transition:color .3s ease}.nav-link:hover :is(.nav-icon,.nav-name),.active-nav :is(.nav-icon,.nav-name){color:var(--first-color)}.nav-close,.nav-toggle{display:inline-flex;color:var(--title-color);cursor:pointer;position:absolute}.nav-close{top:1.25rem;right:1.5rem;font-size:1.75rem}.nav-toggle{top:1rem;right:-.75rem;width:40px;height:40px;border-radius:.25rem;background-color:var(--container-color);display:grid;place-items:center;font-size:1.5rem}.home-container{grid-template-columns:5fr 7fr;padding:1.5rem}}@media screen and (max-width: 1024px){.home-container,.contact-form-group{grid-template-columns:1fr}.home-container,.section{padding-block:3rem}.color-block{display:none}.home-img{width:220px;height:220px;border-radius:50%;margin-top:auto}.home-img,.home-description{margin-inline:auto}.home-content{text-align:center;margin-bottom:auto}.home-title{padding-left:0}.home-title:before{all:unset}.section-title{margin-bottom:3rem}.about-container,.contact-content{grid-template-columns:560px;row-gap:2.75rem;justify-content:center}.portfolio-container{grid-template-columns:repeat(2,350px);gap:1.5rem}.contact-content{padding-top:0}}@media screen and (max-width: 768px){.nav-toggle{top:.75rem;right:-1.25rem}.about-container,.contact-container{grid-template-columns:480px}.portfolio-container{grid-template-columns:380px}}@media screen and (max-width: 540px){.home-container,.container{padding-inline:.75rem}.about-container,.contact-container,.portfolio-container{grid-template-columns:1fr}}@media screen and (max-width: 420px){.info-list{grid-template-columns:1fr}.skills-items{grid-template-columns:repeat(2,1fr)}}