.hero-container{flex-direction:column;align-items:center;min-height:60vh;padding:1rem;display:flex;position:relative}.hero-nav-container{z-index:2;flex-direction:column;gap:20px;display:flex}.hero-nav-container div ul{justify-content:center;gap:25px;display:flex}.hero-image-container{z-index:1;width:175px;height:385px;position:absolute;top:0}.hero-image-container img{object-fit:cover}.hero-text-container{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;margin-top:310px;display:flex}h2 span.heading-highlight{position:relative}h2 span.heading-highlight:after{content:"";background:var(--accent);height:4px;position:absolute;bottom:3px;left:0;right:0}.rings{z-index:0;position:absolute;top:125px;left:-342px}.circle{z-index:0;position:absolute;top:255px;right:-65px}@media screen and (min-width:768px){.hero-container{padding:30px}.hero-nav-container{flex-direction:row;justify-content:space-between;align-items:center;width:100%}.hero-nav-container div ul{gap:32px}.hero-image-container{z-index:1;width:322px;height:600px;top:0;right:0}.hero-text-container{text-align:left;z-index:5;align-items:start;gap:1.5rem;width:445px;height:450px;margin-top:0;position:absolute;top:150px;left:32px}.hero-text-container h2{margin-bottom:60px}.heading-span{display:block}.rings{top:88px}.circle{z-index:1;top:470px}}@media screen and (min-width:1024px){.hero-container{min-height:100vh;margin:0 auto;padding:40px 0}.hero-image-container{z-index:1;width:445px;height:720px}.hero-text-container{width:710px;height:300px;position:absolute;top:200px;left:0}.hero-text-container h2{margin-bottom:40px}.hero-text-container a{margin-top:60px}.heading-span{display:inline}.intro{width:36ch}.rings{top:130px;left:-250px}.circle{z-index:1;top:521px;right:385px}.hero-container{min-height:85vh}}
:root{--black:#151515;--accent:#4ee1a0;--grey:#242424;--light-accent:#d9d9d9;--white:#fff;--main-font:SpceGrotesk}.projects-wrapper{padding:16px}.projects-header{justify-content:space-between;align-items:center;display:flex}.cards-section{flex-direction:column;align-items:center;gap:40px;margin:40px 16px 80px;display:flex}.card{flex-direction:column;gap:20px;display:flex}.card-img{width:100%;height:255px;position:relative}.card-info{flex-direction:column;gap:8px;display:flex}.card-tags{gap:1rem;display:flex}.card-links{gap:30px;display:flex}@media screen and (min-width:768px){.projects-wrapper{padding:30px}.cards-section{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:24px;display:grid}}@media screen and (min-width:1024px){.projects-wrapper{padding:140px 0}.cards-section{margin:80px 0 0}.card{position:relative}.card-image{cursor:pointer;width:538px;height:400px;transition:all .5s;display:block}.card:hover .card-image{filter:brightness(70%)grayscale(20%)}.card-links{display:none}.card:hover .card-links{flex-direction:column;align-items:center;display:flex;position:absolute;top:150px;left:50%;transform:translate(-50%)}}
.skills-wrapper{position:relative}#skills{grid-template-rows:auto;gap:24px;padding:2.5rem 1rem;display:grid}.skill-container{text-align:center;flex-direction:column;display:flex}.skills-rings{z-index:0;position:absolute;bottom:-65px;right:-342px}@media screen and (min-width:768px){.skills-wrapper{padding:0 1rem}#skills{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:52px;padding:3.25rem 1.75rem}.skill-container{text-align:start;gap:14px}.skills-rings{bottom:0}}@media screen and (min-width:1024px){#skills{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:58px}.skills-rings{bottom:-20px;right:-420px}}
:root{--black:#151515;--accent:#4ee1a0;--grey:#242424;--light-accent:#d9d9d9;--white:#fff;--red:#ff6f5b;--main-font:SpceGrotesk}.bottom-section{background-color:var(--grey);padding:80px 16px}#contact{margin-bottom:86px;position:relative}.contact-text{text-align:center;flex-direction:column;gap:16px;display:flex}.contact-header{font-family:var(--main-font);text-align:center;font-size:40px}.form-container{flex-direction:column;gap:32px;margin-top:50px;display:flex}.input-container{position:relative}.form-container input,.form-container textarea{resize:none;width:100%;color:var(--white);text-transform:uppercase;background:0 0;border:none;border-bottom:1px solid #0000;padding-bottom:16px;padding-left:1rem}.form-container input::placeholder,.form-container textarea::placeholder{text-transform:uppercase;color:var(--light-accent)}.form-container textarea{height:100px}.input-container span.underline{background:var(--light-accent);width:100%;height:2px;position:absolute;bottom:0;left:0}.input-container span.underline.correct{background:var(--accent)}.input-container span.underline.incorrect{background:var(--red)}.input-container span.invalid{color:var(--red);position:absolute;bottom:-25px;right:0}.input-container span.invalid-sign{color:var(--red);font-size:24px;font-weight:700;position:absolute;bottom:5px;right:5px}.form-container input:focus,.form-container input:focus-visible,.form-container textarea:focus,.form-container textarea:focus-visible{border-color:currentColor;box-shadow:none!important;outline:none!important}#contact button{cursor:pointer;align-self:flex-end}footer{flex-direction:column;align-items:center;gap:20px;display:flex}footer h4{font-size:32px}.footer-nav-container ul{gap:26px;display:flex}.contact-rings{z-index:0;position:absolute;bottom:10px;left:-342px}@media screen and (min-width:768px){.bottom-section{--content-max-width:1100px;flex-direction:column;align-items:center;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:84px 0 0;display:flex}#contact{width:58%;margin:0 auto 92px}.contact-rings{bottom:-65px;left:-542px}footer{flex-direction:row;justify-content:space-between;margin:48px 32px}}@media screen and (min-width:1440px){.bottom-wrapper{width:1110px}#contact{grid-template-columns:repeat(2,1fr);gap:220px;width:100%;margin:0;display:grid}.contact-text{text-align:left;gap:36px}.form-container{margin-top:0}.form-container input,.form-container textarea,.form-container input::placeholder,.form-container textarea::placeholder{font-size:18px}.contact-rings{bottom:-65px;left:-400px}}