@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap";nav{height:auto;padding-top:.5em;padding-bottom:1em;background-color:var(--color-bg)}.nav--container{height:100%;display:flex;align-items:center}.nav--linkList{display:flex}.nav--linkItem{margin-left:3em;font-size:1.15rem;position:relative;color:var(--title-color);font-weight:700}.nav--linkItem:after{content:"";position:absolute;background-color:orange;height:3px;width:0;left:0;bottom:-5px;transition:.3s}.nav--linkItem:hover:after{width:100%}.nav--logo{max-height:3rem}.nav--logoPush{margin-right:auto}.hero{padding-top:4.5em;padding-bottom:2.5em;display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(4,auto);position:relative}.hero--background{background-color:var(--color-bg)}.wave svg{position:absolute;z-index:-1}.hero--title{grid-column:1 / span 1;grid-row:1}.hero--text{width:20em;grid-row:2}.hero--text p{margin-top:1em}.hero--image{width:18rem;border-radius:10px;float:right;grid-column:2/-1;grid-row:1 / span 2;margin-left:auto}.touch--contact{grid-row:3}.touch--title{font-weight:700;font-size:1.5rem;margin-bottom:.5em}.touch--iconList{display:flex;justify-items:start}.touch--icon{font-size:2rem;margin-right:2em;color:#5f6c7b;transition:all .2s ease-in-out}.touch--icon:hover{color:var(--title-color);transform:scale(1.1)}#message{font-size:3rem}#message span{animation:blinker 1s linear infinite}@keyframes blinker{50%{opacity:0}}@media screen and (max-width: 800px){.hero,.touch--contact,.touch--title{display:flex;flex-direction:column;justify-content:center;align-items:center}.touch--iconList{justify-items:center;text-align:center}.hero--image{float:none;margin-left:0;width:15rem;margin-top:2em}}.skills{background-color:var(--main-bg-color);display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(3,min-content);padding-top:2em}.skills--title{grid-column:1/-1;font-size:1.5rem;margin-top:4.5em}.skills--image{grid-column:1/span 1;grid-row:2/span 2;max-width:90%}.skills--list{grid-column:2 /-1;grid-row:2;display:flex;flex-wrap:wrap;height:fit-content}.skills--about{grid-column:2 /-1;grid-row:3}.skills--about p{margin-top:1em;font-size:.9em;line-height:1.6}@media screen and (max-width: 800px){.skills{display:flex;flex-direction:column}.skills--image{width:10rem;display:flex;align-self:center}.skills--title{margin-top:2em}}.project--item{margin-top:4em;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:min-content}.project--itemText{grid-column:1 / span 3;grid-row:1}.project--itemDescription{margin-top:1em;width:90%;font-size:.9rem}.project--itemImage{grid-column:4 / -1;grid-row:2 / -1;width:85%;max-height:300px;border-radius:10px;border:2px solid var(--title-color);object-fit:cover;object-position:top}.project--itemButtons{margin-top:1.75em}.seeLive{margin-right:1.5em}.project--skillPill{font-size:.75rem}.projects--title{margin-top:4.5em}@media screen and (max-width: 650px){.project--item{display:flex;flex-direction:column}.project--itemImage{margin-top:1.5em;max-width:80%}.projects--title{margin-top:3.5em}}#contactSection{margin-top:5em;margin-bottom:4em}.contact--title{margin-bottom:1.8em}form{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(auto,1fr);gap:1.1rem}.contact--buttonDIV{grid-column:5}.contact--button{padding:1rem 1.5rem;background:transparent;width:calc(100% - 1px);height:calc(100% - 1px)}.contact--button:active:after,.contact--button:active:before{border:3px solid green}.contact--success{grid-column:5;grid-row:2}.contact--input,.contact--textarea{border:2px solid var(--title-color);border-radius:10px;padding:1.1rem;resize:none;width:70%}.contact--name{grid-column:1 /span 4;grid-row:1 / span 1}.contact--email{grid-column:1 /span 4;grid-row:2 / span 1}.contact--textarea{grid-column:1 /span 4;grid-row:3;font-family:Poppins,sans-serif}.contact--img{grid-column:5;grid-row:3;width:80%}@media screen and (max-width: 700px){form{display:flex;flex-direction:column;gap:1.1rem;align-items:center}.contact--img{grid-column:5;grid-row:3;width:30%}}footer{background-color:var(--color-bg);padding-top:1em;padding-bottom:1em;position:relative}.footer{display:flex;justify-content:space-between;max-width:100%}.footer--wave svg{position:absolute;bottom:0;z-index:-3;max-width:100%;min-height:100%}.footer--iconList{display:flex;justify-content:space-between}.footer--links{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:.2em}.footer--title{grid-column:1 /-1;font-weight:700}.footer--author{font-size:.8rem}.footer--icon{font-size:2rem;margin-right:.3em;color:#5f6c7b;transition:all .2s ease-in-out}.footer--icon:hover{color:var(--title-color);transform:scale(1.1)}.footer--linkitem{color:var(--title-color);position:relative}.footer--linkitem:after{content:"";position:absolute;background-color:orange;height:3px;width:0;left:0;bottom:-5px;transition:.3s}.footer--linkitem:hover:after{width:85%}@media screen and (max-width: 800px){footer{padding-top:0}.footer{flex-direction:column}.footer--title{margin-top:1em}.footer--iconList{display:flex;justify-content:start}.footer--icon{font-size:2rem;margin-right:.4em;color:#5f6c7b}.footer--linkitem:hover:after{width:30%}}*{margin:0;padding:0;border:0;outline:0;box-sizing:border-box;list-style:none;text-decoration:none}:root{--color-bg: #d8eefe;--color-bg-white: #fffffe;--title-color: #094067;--text-color: #5f6c7b;--container-width-lg: 75%;--container-width-md: 85%;--container-width-sm: 90%}body{font-family:Poppins,sans-serif}.container{width:var(--container-width-lg);max-width:900px;margin:0 auto}a{color:var(--title-color)}.skills--pill{max-width:fit-content;max-height:fit-content;background-color:var(--title-color);color:#fff;padding:.5em;margin:.5em .25em;border-radius:10px;transition:all .2s ease-in-out}.skills--pill:hover{transform:scale(1.1)}.button{font-weight:700;color:var(--title-color);padding:1em;position:relative}.button:after,.button:before{content:"";border:3px solid orange;position:absolute;width:calc(100% - 6px);height:calc(100% - 6px);left:0;bottom:0;z-index:-1;transition:transform .3s ease}.button:hover:after{transform:translate(-5px,-5px)}.button:hover:before{transform:translate(5px,5px)}.underline{text-decoration:underline solid orange}@media screen and (max-width: 1024px){.container{width:var(--container-width-md)}}@media screen and (max-width: 600px){.container{width:var(--container-width-sm)}}
