.app{min-height:100dvh;background-color:#000}.app .line{width:100%;height:1px;background-color:#f5f5f5;margin-block:20px 40px}@media (min-width:700px){.app .container{max-width:1200px;margin-inline:auto;padding:1px 4em}.app .container>section:not(.nav-section){margin-block:5em}.app .container .nav-section{position:sticky;top:0;background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10}.app .more-project-btn{display:flex;align-items:center;justify-content:end;gap:10px}.app .more-project-btn img{display:block;width:100px;animation:arrow 1s infinite}.app .more-project-btn>button{border:1px solid grey;background-color:#202020;border-radius:100vmax;color:#f5f5f5;font-family:inherit;width:150px;height:50px;display:block;transition:transform .3s}.app .more-project-btn>button:hover{cursor:pointer;transform:scale(1.1)}}@keyframes arrow{0%{translate:0 0}50%{translate:20px 0}to{translate:0 0}}@media (max-width:700px){.app .container{padding:1px 1rem}.app .container>section:not(.nav-section){margin-block:5em}.app .container .nav-section{position:sticky;top:0;background-color:#00000080;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:10}.app .more-project-btn{display:flex;align-items:center;justify-content:center;gap:10px}.app .more-project-btn img{display:block;width:100px;animation:arrow 1s infinite}.app .more-project-btn>button{border:1px solid grey;background-color:#202020;border-radius:100vmax;color:#f5f5f5;font-family:inherit;width:150px;height:50px;display:block;transition:transform .3s}.app .more-project-btn>button:hover{cursor:pointer;transform:scale(1.1)}}.nav{width:100%;display:flex;justify-content:space-between;align-items:center;color:#f5f5f5;padding-block:20px}.nav>:first-child{font-weight:500}.nav a{text-decoration:none;color:inherit}@media (min-width:700px){.nav>:first-child{font-size:2em}.nav .desktop{width:50%}.nav .desktop>div{display:flex;font-size:1.5em;width:100%;justify-content:space-between;font-weight:300}.nav .mobileNav-toggle-btn{display:none}}@media (max-width:700px){.nav{position:relative;z-index:10}.nav>:first-child{font-size:1.5rem}.nav .mobileNav-toggle-btn{width:30px;height:30px;display:flex;flex-direction:column;justify-content:space-between}.nav .mobileNav-toggle-btn div{width:100%;height:1px;background-color:#fff;transition:.5s}.nav .open:nth-child(3) div{width:33px}.nav .open:nth-child(3)>:nth-child(1){transform:rotate(45deg) translateY(11.5px) translate(9.15px)}.nav .open:nth-child(3)>:nth-child(2){transform:rotate(45deg) translateY(4.7px) translate(2.5px)}.nav .open:nth-child(3)>:nth-child(3){transform:rotate(-45deg) translateY(-4.7px) translate(2.5px)}.nav .open:nth-child(3)>:nth-child(4){transform:rotate(-45deg) translateY(-11.4px) translate(9.2px)}.nav .mobile{display:none}}@media (min-width:700px){.mobileNav{display:none}}@media (max-width:700px){.open .mobileNav{position:fixed;top:75px;background-color:#00000080;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);right:1em;width:50%;padding:20px 60px;font-weight:600;color:#fff}.open .mobileNav>div{margin-bottom:20px}.open .mobileNav a{text-decoration:none;color:inherit}.close .mobileNav{display:none}}.home{color:#f5f5f5;display:flex}.home>:first-child{border-radius:100vmax;aspect-ratio:1;background-color:#2e2e2e}.home>:first-child img{aspect-ratio:1;border-radius:100vmax;object-fit:cover;object-position:top}.home>:last-child{text-align:center}.home>:last-child .greet{font-size:1em;font-weight:500;color:gray}.home>:last-child .name{font-weight:600}.home>:last-child .role{font-weight:600;color:gray}.home>:last-child .btn{display:flex}.home>:last-child .btn a{text-decoration:none;border:1px solid rgb(153,152,152);background-color:transparent;border-radius:100vmax}.home>:last-child .btn button{border:none;background-color:transparent;color:#f5f5f5;font-weight:600;font-size:.8rem;width:130px;height:50px;border-radius:100vmax}.home>:last-child .btn button:hover{cursor:pointer}.home>:last-child .btn>:first-child:hover{background-color:#2c2c2c;border:1px solid rgb(44,44,44)}.home>:last-child .btn>:last-child{background-color:#2c2c2c;border:1px solid rgb(44,44,44)}.home>:last-child .btn>:last-child:hover{background-color:#000;border:1px solid rgb(153,152,152)}@media (min-width:700px){.home{align-items:center;justify-content:space-between;width:80%;margin-inline:auto}.home>:first-child{width:400px}.home>:first-child img{width:400px}.home>:last-child .name{font-size:3rem;letter-spacing:3px}.home>:last-child .role{font-size:1.75rem;letter-spacing:3px}.home>:last-child .btn{justify-content:center;gap:20px;margin-top:25px}}@media (max-width:700px){.home{flex-direction:column;align-items:center;width:100%;gap:40px}.home>:first-child{width:200px}.home>:first-child img{width:100%}.home>:last-child{width:100%}.home>:last-child .name{font-size:2.5rem}.home>:last-child .role{font-size:1.5rem}.home>:last-child .btn{justify-content:center;gap:20px;margin-top:25px}}.about{color:#f5f5f5}.about>div{width:fit-content;font-weight:600}.about>p{text-align:justify;color:#d1d1d1}@media (min-width:700px){.about>div{letter-spacing:3px;font-size:3em}}@media (max-width:700px){.about>div{font-size:2.5rem}}.skills{color:#f5f5f5}.skills>div:first-child{font-weight:600}.skills .skill-list{display:grid;justify-content:space-between}.skills .skill-list>div{display:flex;justify-content:start;align-items:center}@media (min-width:700px){.skills>div:first-child{font-size:3rem;letter-spacing:3px}.skill-list{grid-template-columns:repeat(3,auto);gap:60px 0}.skill-list>div{gap:10px}.skill-list img{width:70px}}@media (max-width:700px){.skills>div:first-child{font-size:2.5rem}.skill-list{grid-template-columns:repeat(2,auto);gap:30px 0}.skill-list>div{gap:5px}.skill-list img{width:40px}}.project>div:first-child{color:#f5f5f5;font-weight:600}.project .projects{display:grid;width:100%}@media (min-width:990px){.project>div:first-child{font-size:3rem;letter-spacing:3px}.project .projects{grid-template-columns:repeat(3,1fr);justify-content:space-between;gap:25px}}@media (min-width:700px) and (max-width:990px){.project>div:first-child{font-size:3rem;letter-spacing:3px}.project .projects{grid-template-columns:repeat(2,1fr);justify-items:center;gap:25px}}@media (max-width:700px){.project>div:first-child{font-size:2.5rem}.project .projects{grid-template-columns:repeat(1,1fr);justify-items:center;gap:25px 0}}.project-item{color:#f5f5f5;max-width:342px;min-width:270px;padding:15px;background-color:#202020;border:1px solid grey;border-radius:10px;overflow:hidden}.project-item .thumbnail{position:relative;overflow:hidden;border-radius:10px}.project-item .thumbnail img{min-height:198px;object-fit:cover;overflow:hidden;transition:.5s ease-in-out}.project-item .thumbnail .btn{position:absolute;bottom:0;left:0;right:0;height:0;display:flex;justify-content:center;gap:20px;transition:.5s ease-in-out}.project-item .thumbnail .btn button{width:7.5rem;height:2.8rem;background:transparent;border:none;border-radius:100vmax;color:#000;background-color:#ffffff80;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:1px;transition:transform .5s ease-in-out}.project-item .thumbnail .btn button:hover{transform:scale(1.2);background-color:#00000080;color:#fff;cursor:pointer;transition:transform .5s ease-in-out}.project-item .thumbnail .btn a{text-decoration:none}.project-item .thumbnail:hover{position:relative}.project-item .thumbnail:hover img{transform:scale(1.1);position:relative;transition:.5s ease-in-out}.project-item .thumbnail:hover .btn{height:70px;transition:.5s ease-in-out;z-index:1}.project-item .thumbnail:hover:after{content:"";top:0;right:0;bottom:0;left:0;position:absolute;background-color:#00000080}.project-item>div:last-child{padding:10px 10px 0;text-align:center}.project-item>div:last-child div{font-size:1.7rem;font-weight:600;letter-spacing:1px}.contact>div:first-child{color:#f5f5f5;font-weight:600}.contact ul{list-style:none;padding-left:0;display:grid}.contact li{display:flex;align-items:center;gap:10px}.contact li div{display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;width:2.8rem;aspect-ratio:1;border-radius:100vmax}.contact li img{width:1.56rem;object-fit:contain}.contact a{text-decoration:none;color:#f5f5f5}@media (min-width:700px){.contact>div:first-child{font-size:3rem;letter-spacing:3px}.contact ul{width:70%;grid-template-columns:repeat(2,auto);gap:20px 0}}@media (max-width:700px){.contact>div:first-child{font-size:2.5rem}.contact ul{width:70%;grid-template-columns:1fr;gap:20px 0}}.project-page>button{display:flex;justify-content:center;align-items:center;font-family:inherit;border-radius:8px;background-color:#202020;border:1px solid grey;color:#f5f5f5}.project-page>button img{transform:rotate(180deg);padding-bottom:1px}.project-page button:hover{cursor:pointer}@media (min-width:700px){.project-page>button{font-size:1.2rem;gap:10px;width:150px;height:50px}.project-page>button img{width:2.5rem}.project-page>*{margin-block:5rem}}@media (max-width:700px){.project-page>button{font-size:1rem;width:100px;height:50px;gap:5px}.project-page>button img{width:2rem}.project-page>*{margin-block:2rem}}*,*:before,*:after{box-sizing:border-box;margin:0;font-family:Poppins,sans-serif}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font-family:Arial,sans-serif;font-size:inherit}