html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;color:inherit}a:visited{color:inherit;text-decoration:none}i{font-style:italic}@tailwind base;@tailwind components;@tailwind utilities;:root{--theme1: #01584F;--theme2: #88A78B;--theme3: #EBFFEA;--theme4: #F9F871;--background: #f2f2f2;--innerSize: 400px;--outerSize: 550px;--iconSize: 2.5rem;--speed: 80s}body{font-family:Nanum Gothic Coding,monospace;top:0;right:0;bottom:0;left:0}body::-webkit-scrollbar{display:none}body strong{font-weight:900;color:var(--theme1)}body p{color:#3c3c3c;font-weight:100}body .header{background-color:#222;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:0 10px 30px #00000083}h1,h2,h3,h4,.button{font-family:Orbitron,sans-serif;color:var(--theme1);font-weight:700}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.project__info--button-container{align-self:center}@keyframes rotate-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}:root{--angle: 80deg }@property --angle{syntax: "<angle>"; initial-value: 80deg; inherits: true;}@keyframes buttonBorderRotate{to{--angle: 440deg}}.button{margin-top:2rem;width:auto;padding:.2rem 1rem;border:3px solid transparent;font-size:.75rem;display:flex;align-items:center;gap:.3rem;transition:all .3s ease-out;border-radius:100vw;background:linear-gradient(var(--background)) padding-box,conic-gradient(from var(--angle),var(--theme1),var(--theme1),var(--theme1)) border-box;animation:buttonBorderRotate 3s cubic-bezier(.68,-.55,.27,1.55) infinite;animation-play-state:paused}.button .arrow{width:.7rem}.button:hover,.button:focus{transform:scale(1.15);padding:.3rem 1.1rem;cursor:pointer;box-shadow:0 0 10px #0004;animation-play-state:running;background:linear-gradient(var(--background)) padding-box,conic-gradient(from var(--angle),var(--theme1),var(--theme4),var(--theme1)) border-box}.close-icon{border:none;cursor:pointer;color:#898989;background:transparent}.close-icon__read-more{position:absolute;top:.5rem;left:.5rem;width:3rem}.backdrop{position:fixed;left:0;top:0;width:0;height:0;background-color:#000000a2;z-index:10}.backdrop.show{width:100dvw;height:100dvh}.gradient{--size: 450px;--speed: 50s;--easing: cubic-bezier(.8, .2, .2, .8);position:absolute;width:var(--size);height:var(--size);filter:blur(calc(var(--size) / 5));background-image:linear-gradient(#023636d9,#d6ffda);animation:rotate var(--speed) var(--easing) alternate infinite;border-radius:30% 70% 70% 30%/30% 30% 70% 70%}@media (min-width: 720px){.gradient{--size: 750px}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}header{max-width:960px;margin:0rem auto;height:100dvh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:3rem;z-index:10;text-align:center}.header__title{display:flex;flex-direction:column;gap:2rem;max-width:100%;font-family:Orbitron,sans-serif}.header__main-title{font-size:3.5rem;color:var(--theme3)}.header__main-title span{color:var(--theme4)}.header__sub-title{letter-spacing:1px;display:flex;flex-direction:row;justify-content:space-around;align-items:center;color:var(--theme3);background-color:#ebffea4c;padding:.7rem 1.2rem;gap:.5rem;box-shadow:0 0 10px #00000050;font-size:1.1rem;font-weight:700;color:var(--theme1)}.header__sub-title span{color:var(--theme4);font-size:2rem}.header__sub-title p,.header__sub-title a{font-weight:700;color:var(--theme1)}main{max-width:1440px;padding:10rem 20px;margin:0rem auto 0;display:flex;justify-content:space-around;align-items:center;gap:3rem;overflow-x:hidden;@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotate-reverse{0%{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}@keyframes counter-rotate{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}@keyframes counter-rotate-reverse{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}main .about{width:45%;font-size:1.2rem;line-height:1.6rem;display:flex;flex-direction:column;gap:1rem}main .about .about__header{font-size:1.8rem}main .circle-wrapper{position:relative;width:var(--outerSize);height:var(--outerSize);display:flex;justify-content:center;align-items:center}main .profile{width:250px;height:250px;position:relative;filter:grayscale(.3);aspect-ratio:1/1;object-fit:cover;opacity:.7;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,black 20%,transparent 90%);mask-image:linear-gradient(to bottom,black 45%,transparent 90%)}main .inner-circle,main .outer-circle{position:absolute;border-radius:50%;z-index:10}main .inner-circle{width:var(--innerSize);height:var(--innerSize);animation:rotate var(--speed) linear infinite}main .inner-circle .icon-container,main .outer-circle .icon-container{position:absolute;top:50%;left:50%;font-size:var(--iconSize);color:var(--theme1);filter:drop-shadow(0px 0px 2px var(--theme2)) brightness(1)}main .icon,main .inner-circle .icon-title{display:inline-block;animation:rotate-reverse var(--speed) linear infinite}main .icon{transition:all .2s ease-in-out}main .icon:hover{color:var(--theme2);transform:scale(1.2);cursor:pointer;filter:drop-shadow(0px 0px 5px var(--theme4)) brightness(1.2)}main .icon-title{position:absolute;font-size:1.2rem;font-weight:700;top:calc(100% + .8rem);left:100%;background-color:var(--theme1);color:var(--background);padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 0 5px #0003;transition:all .2s ease-in-out;white-space:nowrap;pointer-events:none}main .inner-circle .icon-title{top:calc(100% + .5rem)}main .hidden-title{opacity:0;font-size:0;padding:0;box-shadow:none}main .inner-circle .icon-container:nth-child(1),main .inner-circle .hidden-title:nth-child(1){transform:rotate(0) translate(calc(var(--innerSize) / 2 - (var(--iconSize) / 2))) rotate(0)}main .inner-circle .icon-container:nth-child(2),main .inner-circle .hidden-title:nth-child(2){transform:rotate(90deg) translate(calc(var(--innerSize) / 2 - (var(--iconSize) / 2))) rotate(-90deg)}main .inner-circle .icon-container:nth-child(3),main .inner-circle .hidden-title:nth-child(3){transform:rotate(180deg) translate(calc(var(--innerSize) / 2 + (var(--iconSize) / 2))) rotate(-180deg)}main .inner-circle .icon-container:nth-child(4),main .inner-circle .hidden-title:nth-child(4){transform:rotate(270deg) translate(calc(var(--innerSize) / 2 + (var(--iconSize) / 2))) rotate(-270deg)}main .outer-circle{width:var(--outerSize);height:var(--outerSize);animation:rotate-reverse var(--speed) linear infinite}main .outer-circle .icon,main .outer-circle .icon-title{animation:rotate var(--speed) linear infinite}main .outer-circle .icon-container:nth-child(1),main .outer-circle .icon-container:nth-child(1) .hidden-title{transform:rotate(0) translate(calc(var(--outerSize) / 2 - (var(--iconSize) / 2))) rotate(0)}main .outer-circle .icon-container:nth-child(2),main .outer-circle .icon-container:nth-child(1) .hidden-title{transform:rotate(60deg) translate(calc(var(--outerSize) / 2 - (var(--iconSize) / 2))) rotate(-60deg)}main .outer-circle .icon-container:nth-child(3),main .outer-circle .icon-container:nth-child(1) .hidden-title{transform:rotate(120deg) translate(calc(var(--outerSize) / 2 - (var(--iconSize) / 5))) rotate(-120deg)}main .outer-circle .icon-container:nth-child(4),main .outer-circle .icon-container:nth-child(1) .hidden-title{transform:rotate(180deg) translate(calc(var(--outerSize) / 2 + (var(--iconSize) / 2))) rotate(-180deg)}main .outer-circle .icon-container:nth-child(5),main .outer-circle .icon-container:nth-child(1) .hidden-title{transform:rotate(240deg) translate(calc(var(--outerSize) / 2 + (var(--iconSize) / 1.5))) rotate(-240deg)}main .outer-circle .icon-container:nth-child(6),main .outer-circle .icon-container:nth-child(1) .hidden-title{transform:rotate(300deg) translate(calc(var(--outerSize) / 2 + (var(--iconSize) / 6))) rotate(-300deg)}.projects{display:flex;flex-direction:column;overflow:hidden}.projects__title{text-align:center;color:#01584f;font-size:3rem;margin-bottom:5rem}.projects__grid{max-width:1920px;width:100dvw;display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(50% - 1rem),1fr));grid-auto-rows:auto;margin:0rem auto 10rem}.project{max-width:100%;height:45rem;background-color:var(--background);position:relative;padding:3rem;transition:all .5s ease-out;filter:grayscale(.7)}.project:hover{box-shadow:0 0 20px #00000029;z-index:5;transform:scale(1.003)}.project:nth-child(1),.project:nth-child(2),.project:nth-child(3),.project:nth-child(4),.project:nth-child(5),.project:nth-child(6){background:linear-gradient(180deg,#fff,#f2f2f2 5%);border-bottom:1px solid #01584f3f}.project:nth-child(odd){border-right:1px solid #01584f3f}.projects__img--container{position:absolute;bottom:2rem;left:0;width:100%;overflow:hidden}.grayscale-off{filter:grayscale(0);transform:scale(1.04);filter:drop-shadow(0px 6px 3px #0000004f)}.grayscale-off .project__img{transform:scale(1.02) translateY(-10px)}.projects__img--motion{display:flex;align-items:center;justify-content:center;transition:all .4s ease-out}.project__img{width:80%;align-self:flex-start;filter:drop-shadow(0px 3px 3px #0000004f);transition:all .4s ease-out}.project__img--phone{width:15%;align-self:end}.projects__title{font-size:2rem}.projects__title .italic{font-style:italic}.project__info{width:100%;display:flex;flex-direction:column;gap:1rem;height:50%}.project__info .project__info--button-container{margin-top:auto;margin-bottom:1.5rem}.project__info--title{font-size:1.8rem;margin-bottom:2rem}.project__info--container{display:flex}.project__info--label{width:20%;font-weight:900;font-size:1.1rem;color:var(--theme1)}.project__info--desc{width:80%;line-height:1.2rem}.read-more{width:80%;max-width:1200px;height:80svh;overflow-y:scroll;position:fixed;background-color:#f1eee1;z-index:20;padding:3rem 4rem;box-shadow:0 10px 50px #000;display:flex;flex-direction:column;align-items:center;opacity:0;transform:scale(0);pointer-events:none;transition:all .5s ease-out;left:-20%}.read-more.right{left:20%}.read-more.show{opacity:1;top:3.5svh;left:50%;transform:scale(1) translate(-50%);pointer-events:auto}.read-more::-webkit-scrollbar{display:none}.read-more .video-container{position:relative;width:94%;height:auto;display:flex;justify-content:center;align-items:center}.read-more .video-container video{max-width:100%;box-shadow:0 0 10px #00000079;border:17px solid var(--background);padding:0}.read-more .button{font-size:1.2rem;background:linear-gradient(#f1eee1) padding-box,conic-gradient(from var(--angle),var(--theme1),var(--theme1),var(--theme1)) border-box;margin:0 auto}.read-more .button:hover,.read-more .button:focus{background:linear-gradient(#f1eee1) padding-box,conic-gradient(from var(--angle),var(--theme1),var(--theme4),var(--theme1)) border-box}.read-more .link-button{margin:3rem auto 5rem}.read-more__title{margin-top:3rem;margin-bottom:2rem;text-align:center;font-size:2.6rem}.custom-animation{opacity:0;transform:rotate3d(1,.5,.5,180deg) scale(.1);transition:all ease-in .4s}.custom-animation-visible{opacity:1;transform:none}.disable-scroll{overflow:hidden}.gallery{width:100%;display:flex;flex-direction:column;align-items:center}.gallery div{width:80%;display:flex;justify-content:center;flex-direction:column;align-items:center}.gallery__img{width:auto;max-width:96%;border:15px solid var(--background);box-shadow:0 0 10px #00000079;margin-bottom:5rem;max-height:80vh;object-fit:contain}.read-more__sub-title{margin:2rem 0;font-size:2.4rem}.footer{background-color:#1d1d1d;width:100%;display:flex;justify-content:center;align-items:center}.footer .wrapper{padding:4rem 1rem;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:980px}.footer .wrapper .contact-container{display:flex;flex-direction:column;gap:1rem}.footer .wrapper .contact-container .contact-info{color:var(--theme2);font-weight:700;font-size:1.5rem;align-items:flex-start}.footer .wrapper .contact-container .contact-info a{transition:all .15s ease-in-out}.footer .wrapper .contact-container .contact-info a:hover{color:var(--theme3);filter:drop-shadow(0px 0px 2px var(--theme2)) brightness(.9)}.footer .wrapper .contact-container .contact-info h3{color:var(--theme3);border-bottom:5px solid var(--theme2);filter:brightness(.9);display:inline-block;padding:.5rem .2rem}.footer .wrapper .social-container{display:flex;flex-direction:column;justify-content:space-between;gap:4rem}.footer .wrapper .social-container .footer__logo{width:4rem;pointer-events:none}.footer .wrapper .social-icon{width:3rem;align-self:flex-end;display:flex;align-items:end}.footer .wrapper .social-icon svg{width:100%;fill:var(--theme2);margin-top:auto;transition:all .3s ease-in-out}.footer .wrapper .social-icon svg:hover{fill:var(--theme3);transform:scale(1.05);filter:drop-shadow(0px 0px 2px var(--theme2))}.shapedividers_com-136{overflow:hidden;position:relative;height:25rem;margin-top:-18rem}.shapedividers_com-136:before{content:"";font-family:"shape divider from ShapeDividers.com";position:absolute;bottom:-1px;left:-1px;right:-1px;top:-1px;z-index:3;pointer-events:none;background-repeat:no-repeat;background-size:183% 137px;background-position:67% 100%;transform:rotateY(180deg);background-image:url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.52" preserveAspectRatio="none"><path d="M0 3.528S27.04 3.352 35.278 0v3.528z" opacity=".2" fill="%231d1d1d"/><path d="M0 3.528S27.04 3.374 35.278.425v3.103z" opacity=".2" fill="%231d1d1d"/><path d="M0 3.528S27.04 3.396 35.278.882v2.646z" fill="%231d1d1d"/><path d="M0 3.527h35.278v.092H0z" fill="%231d1d1d"/></svg>')}@media (min-width:768px){.shapedividers_com-136:before{background-size:100% 95px;background-position:50% 100%;transform:rotateY(180deg)}}@media (min-width:1025px){.shapedividers_com-136:before{bottom:-.1vw;left:-.1vw;right:-.1vw;top:-.1vw;background-size:100% 200px;background-position:50% 100%;transform:rotateY(180deg)}}@media (min-width:2100px){.shapedividers_com-136:before{background-size:100% calc(2vw + 200px)}}@media screen and (min-width: 1500px){.project{height:55rem}.project__info{height:40%}}@media screen and (max-width: 950px){.header__sub-title{flex-direction:column;background-color:#ebffea34}.header__sub-title span{display:none}main{gap:4rem;padding:6rem 2rem}main .about{width:auto;max-width:700px}main .profile{width:200px;height:200px}main .outer-circle,main .inner-circle{display:none}.projects__grid{grid-template-columns:1fr}.project{height:48rem;border-bottom:1px solid #01584f3f}.project:nth-child(2){background:#fff;background:linear-gradient(0deg,#fff,#f2f2f2 5%);border:none}.project__info{height:20rem}.gallery div{width:90%}}@media screen and (max-width: 700px){.header__main-title{font-size:3rem}main{flex-direction:column}main .circle-wrapper{height:auto;max-width:100vw}main .profile{width:220px;height:220px}.projects__title{font-size:2.7rem}.read-more__title{font-size:2.5rem;margin-bottom:3rem}.read-more__sub-title{font-size:2rem}.projects__img--container{overflow:hidden}.read-more{width:90%}}@media screen and (max-width: 580px){.gradient{--size: 250px }.header__main-title{font-size:2rem}.header__sub-title{font-size:.8rem}.project{height:45rem}.read-more{padding:4rem 1rem;height:85svh}.read-more video{height:auto;border-width:10px}.read-more__title{font-size:2rem}.read-more__sub-title{font-size:1.7rem}.gallery__img{margin-bottom:3rem;border-width:10px}.gallery div{width:90%}.project__info--container{flex-direction:column;gap:.8rem;margin-bottom:1rem}.project__info--label,.project__info--desc{width:100%}}.footer .contact-info h3{font-size:1.2rem}.footer .contact-info a{font-size:1.1rem}.footer .wrapper .social-icon{width:2.5rem}@media (any-pointer: coarse){.project{filter:grayscale(0);transition:none}.projects__img--motion{transition:none}}@media screen and (max-width: 420px){.header__main-title{font-size:1.7rem}.header__sub-title{font-size:.7rem}.projects__title{font-size:2.4rem;will-change:transform}.project__info--title{font-size:1.5rem}.read-more__title{font-size:1.6rem}.project-link{font-size:.9rem}}