:root{--backgorund-color: #030712;--primary-text: #f9fafb;--secundary-text: #99a1af;--accent-color: #00d492;--line-color: #1e2939;--input-border: #364153;--button-color: var(--backgorund-color);background:var(--backgorund-color);font-size:16px;font-family:Cousine,monospace;font-weight:400;font-style:normal}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}main{max-width:1280px;width:90%;margin:auto}a{text-decoration:none}button,input,textarea{font-family:Cousine,monospace;outline:none}img{max-width:100%}ul{list-style:none}main{border-left:1px solid var(--line-color);border-right:1px solid var(--line-color);z-index:10}.navbar{position:absolute;top:1.5rem;padding:.5rem;border:1px solid var(--accent-color);border-radius:.5rem;background:#03071280;backdrop-filter:blur(5px);display:flex;align-items:center;gap:1.5rem;z-index:3}.navbar-list{display:flex}.navbar-item{margin-right:1rem}.navbar-item a{font-size:.875rem;color:var(--secundary-text);text-transform:uppercase;transition:.2s all ease-in-out}.navbar-item a:hover{color:var(--primary-text)}.hero{position:relative;height:100dvh;display:flex;justify-content:center;align-items:center}.hero-content{max-width:1080px;width:90%;margin:auto;z-index:2}.hero-heading{font-size:3rem;color:var(--primary-text);font-weight:400;text-wrap:balance}.hero-button{margin-top:1.5rem;display:inline-block;padding:1rem 1.5rem;border-radius:.5rem;background:var(--accent-color);font-size:.875rem;color:var(--button-color);text-transform:uppercase;transition:.2s all ease-out}.hero-button:hover{box-shadow:0 0 32px 1px var(--accent-color)}.hero .hero-radial-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:#030712;background:radial-gradient(circle,#030712cc,#030712 70%);z-index:1}.hero-pattern{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#030712;opacity:1;background-image:linear-gradient(var(--accent-color) 1px,transparent 1px),linear-gradient(to right,var(--accent-color) 1px,#030712 1px);background-size:56px 56px;z-index:0}.about{min-height:600px;border-top:1px solid var(--line-color);border-bottom:1px solid var(--line-color);display:grid;grid-template-columns:1fr 1fr}.about-left-section,.about-right-section,.portfolio-left-section,.portfolio-right-section{display:flex;justify-content:center;align-items:center}.about-left-section{flex-direction:column;border-right:1px solid var(--line-color)}.about-image{margin-top:6rem;position:relative}.about-social{position:absolute;width:3rem;height:3rem;background:var(--backgorund-color);border-radius:100%;display:flex;justify-content:center;align-items:center;border:1px solid var(--line-color)}.about-social a{font-size:1.5rem;color:var(--primary-text);display:flex;justify-content:center;align-items:center}.about-social:nth-child(1){top:-6rem;left:-2.375rem}.about-social:nth-child(2){top:-4.5rem;right:-6rem}.about-social:nth-child(3){top:1.5rem;left:-6rem}.about figure{width:6rem;height:6rem;border-radius:.5rem;overflow:hidden}.about-tags{margin-top:1.5rem;min-width:250px;max-width:300px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:"a a b b" "c c d d" ". e e .";gap:.5rem}.about-tag{font-size:.875rem;width:max-content;background:var(--secundary-text);padding:.25rem;border-radius:.25rem;text-transform:uppercase}.about-tag:nth-child(1){grid-area:a;justify-self:end;background:#a684ff}.about-tag:nth-child(2){grid-area:b;background:#05df72}.about-tag:nth-child(3){grid-area:c;justify-self:end;background:#fb64b6}.about-tag:nth-child(4){grid-area:d;background:#ffb900}.about-tag:nth-child(5){grid-area:e;background:#00d3f2}.about-attributes{margin-top:3.5rem;display:flex;gap:2.375rem}.about-attribute{max-width:6rem}.about-attribute-amount{font-size:3rem;color:var(--primary-text)}.about-attribute-description{color:var(--primary-text);text-transform:uppercase;margin-top:.375rem}.about-bio{max-width:450px;width:80%;display:flex;flex-direction:column;gap:1.5rem}.about-body{font-size:1rem;color:var(--secundary-text);text-wrap:pretty}.about-body:first-child{color:var(--primary-text)}.portfolio{min-height:28.125rem;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-color)}.portfolio-heading{max-width:450px;width:90%;font-size:2.25rem;color:var(--primary-text);font-weight:400;text-wrap:balance}.portfolio-left-section{border-right:1px solid var(--line-color)}.portfolio-btn-left,.portfolio-btn-right{width:3rem;height:3rem;display:flex;justify-content:center;align-items:center;border-radius:100%;border:1px solid var(--accent-color);background:var(--backgorund-color);color:var(--secundary-text);font-size:1.5rem;transition:.2s all ease;cursor:pointer}.portfolio-btn-left:hover,.portfolio-btn-right:hover{color:var(--primary-text)}.portfolio-cards{position:relative;margin:0px 3.875rem;width:16.25rem;height:18.125rem;overflow:hidden;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}.card{position:absolute;width:100%;border:1px solid var(--line-color);border-radius:.5rem;transition:all .8s cubic-bezier(.25,.46,.45,.94)}.card-content{padding:1.125rem}.card-heading{font-size:18px;font-weight:400}.card-heading a{color:var(--primary-text)}.card-skills{margin-top:.5rem;font-size:.875rem;color:var(--secundary-text)}.card.active{z-index:10;transform:translateZ(0)}.card.hidden{opacity:0}.contact{display:flex;flex-direction:column;justify-content:center;align-items:center}.contact-heading{margin-top:3rem;font-size:2.25rem;color:var(--primary-text)}.contact-body{margin-top:.25rem;color:var(--secundary-text)}.contact-form{max-width:25rem;width:100%;margin-top:4rem;display:flex;flex-direction:column;gap:1.125rem}.contact-form-section{display:flex;flex-direction:column}.contact-form-label{font-size:.875rem;color:var(--primary-text);text-transform:uppercase;margin-bottom:.375rem}.contact-form-input{padding:1rem;background:var(--backgorund-color);border:1px solid var(--input-border);border-radius:.5rem;color:var(--primary-text);transition:.2s all ease}.contact-form-input::placeholder{color:var(--secundary-text)}.contact-form-input:focus{border-color:var(--accent-color)}textarea.contact-form-input{resize:none;min-height:6.25rem}.contact-form-btn{margin-top:.875rem;padding:1rem 1.5rem;border-radius:.5rem;background:var(--accent-color);font-size:.875rem;color:var(--button-color);text-transform:uppercase;border:none;outline:none;transition:.2s all ease-out;cursor:pointer}.contact-form-btn:hover{box-shadow:0 0 32px 1px var(--accent-color)}.contact-footer{margin-top:3rem;width:100%;border-top:1px solid var(--line-color);padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.contact-copy{color:var(--secundary-text);font-size:.875rem}.contact-social{display:flex;align-items:center;gap:.5rem;font-size:1.125rem}.contact-social a{color:var(--secundary-text);transition:.2s all ease}.contact-social a:hover{color:var(--primary-text)}@media (max-width: 1080px){:root{font-size:.875rem}}@media (max-width: 1024px){.portfolio-cards{margin:0px 2rem}}@media (max-width: 850px){.about{grid-template-columns:1fr}.about-left-section{border:none;border-bottom:1px solid var(--line-color);padding:3rem 0px}.about-bio{margin:3rem 0;text-align:center}.portfolio{grid-template-columns:1fr}.portfolio-left-section{border:none;border-bottom:1px solid var(--line-color)}.portfolio-heading,.contact-heading{font-size:1.5rem;text-align:center}.contact-body{max-width:80%;text-align:center}}@media (max-width: 425px){.hero-heading{font-size:2.25rem}.portfolio-btn-left,.portfolio-btn-right{width:1.5rem;height:1.5rem}.portfolio-cards{margin:0px 1.5rem}.contact-form{width:90%}.contact-footer{flex-direction:column-reverse;gap:1rem}}