@import url(https://fonts.googleapis.com/css2?family=Open+Sans&family=Syne&display=swap);*{box-sizing:border-box;margin:0;padding:0}.app{color:#000;font-family:Open Sans,Syne,sans-serif;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;min-height:100vh;width:100%}.main__container{overflow-x:hidden;overflow-y:hidden;width:100%}h1,h2,h3,h4,h5,h6{font-family:Syne,sans-serif}.nav__container,p{font-family:Open Sans,sans-serif}.nav__container{align-items:center;background-color:#000;color:#f2f2f2;display:flex;font-size:15px;height:12vh;justify-content:space-between;padding:0 15rem;text-transform:uppercase}.nav__container h2{font-size:15px;letter-spacing:1px}.nav__container button{display:none}.nav__container ul{display:flex;font-family:syne,sans-serif;list-style:none}.nav__container ul li{padding:0 2rem}.nav__container ul .link{color:#f2f2f2;text-decoration:none;transition:color .3s,box-shadow .3s}.nav__container ul .link:hover{color:#fd5226}.contact__container .contact__form input,.contact__container .contact__form textarea,.input-fields{border:3px solid #000;color:#000;font-family:Open Sans,sans-serif;font-weight:700;letter-spacing:1.2px;margin-bottom:1rem;padding-left:10px}.contact__container{background-color:#f2f2f2;color:#000;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:2fr 1fr;height:88vh;padding:14rem 15rem 15rem;width:100%}.contact__container .contact__info{display:flex;flex-direction:column;justify-content:space-between}.contact__container .contact__info h2{font-size:3.5rem}.contact__container .contact__info h3{font-size:1.4rem}.contact__container .contact__info span{color:#fd5226;margin-right:5px}.contact__container .contact__form form{display:flex;flex-direction:column}.contact__container .contact__form input{height:3rem}.contact__container .contact__form textarea{height:10rem;padding-top:10px}.contact__container .contact__form ::placeholder{font-family:Open Sans,sans-serif;font-size:1rem;font-weight:400}.contact__container .contact__form button{background-color:#fd5226;border:none;color:#000;font-size:1.2rem;height:3.5rem;width:9rem}.contact__container .contact__form button:hover{background-color:#f2f2f2;border:2px solid #fd5226;color:#fd5226;cursor:pointer}.contact__container .contact__developed{border-top:1px solid #000;display:flex;grid-column:1/3;height:5rem;justify-content:space-between;margin-top:10rem;padding-top:1rem}.contact__container .contact__developed h4{color:#141414}.contact__container .contact__developed h4 span{color:#fd5226}.contact__container .contact__developed ul{display:flex;list-style:none;width:480px}.contact__container .contact__developed li{margin:0 2rem}.contact__container .contact__developed li a{display:flex;text-decoration:none;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}.contact__container .contact__developed li button{background-color:initial;border:none;color:#000;font-size:1.4rem;margin-right:5px}.contact__container .contact__developed li:first-child button:hover{color:#ba55d3}.contact__container .contact__developed li:nth-child(2) button:hover{color:#00f}.contact__container .contact__developed li:last-child button:hover{color:#ff8c69}.contact__container .contact__developed li button:hover{color:#fd5226;cursor:pointer}.header__container{background-color:#000;color:#f2f2f2;height:36rem;padding:2rem 15rem;width:100%}.header__container h2{font-size:70px;margin-bottom:4rem}.header__container .header-link{background-color:#fd5226;color:#000;font-family:Syne;font-size:18px;height:52px;padding:15px 30px;text-decoration:none;text-transform:uppercase;width:185px}.header__container .header-link:hover{background-color:#000;border:2px solid #fd5226;color:#fd5226;cursor:pointer}.profile{background-color:#f2f2f2;display:grid;grid-template-columns:1fr 1fr;height:50rem;padding:5rem 15rem;width:100%}.profile .profile__text{display:flex;flex-direction:column;justify-content:space-around}.profile .profile__text h2{font-size:50px;width:90%}.profile .profile__text p{font-size:15px;width:82%}.profile .profile__text .profile-link{background-color:#fd5226;color:#000;font-size:18px;height:52px;padding:15px 30px;text-align:center;text-decoration:none;text-transform:uppercase;width:205px}.profile .profile__text .profile-link:hover{background-color:#f2f2f2;border:2px solid #fd5226;color:#fd5226}.profile .profile__img{background-image:url(/static/media/profile-img.150a81f5f54730fe8cdf.svg);background-position:center 11rem;background-repeat:no-repeat}.banner .banner__project-1st,.banner .banner__project-2nd,.banner .banner__project-3rd,.banner .banner__project-4th,.banner .banner__project-5th,.banner .banner__project-6th,.projects__general{background-position:50%;background-repeat:no-repeat;background-size:cover}.banner{background-color:#000;display:grid;grid-template-columns:1fr 1fr 1.49fr 1.49fr;grid-template-rows:1fr 1fr;height:50rem;width:100%}.banner .banner__project-1st{background-image:url(/static/media/momentum.aa7fc6389c4ba19fc792.png);grid-column:1/3;grid-row:1/2}.banner .banner__project-2nd{background-image:url(/static/media/weather.c3f2c122ed6870ea8097.png);grid-column:3/4;grid-row:1/3}.banner .banner__project-3rd{background-image:url(/static/media/todo.f9682328734e36d0609d.png);grid-column:4/5;grid-row:1/2}.banner .banner__project-4th{background-image:url(/static/media/museum.04d0928cf257a52b64e5.png);grid-column:1/2;grid-row:2/3}.banner .banner__project-5th{background-image:url(/static/media/portfolio.8d08d535615ba423ab25.png);grid-column:2/3;grid-row:2/3}.banner .banner__project-6th{background-image:url(/static/media/sunny.8a9739793c99ff1da61e.png);grid-column:4/5;grid-row:2/3}.skills{background-color:#000;display:flex;flex-direction:column;font-family:Syne;height:44rem;justify-content:space-around;padding:2rem 15rem;width:100%}.skills h2{color:#f2f2f2;font-size:50px;margin-bottom:1rem;text-align:center}.skills .skills__grid{display:grid;grid-template-columns:repeat(4,1.2fr);grid-template-rows:repeat(4,1fr)}.skills .skills__grid .skills__box{align-items:center;background-color:#000;border:2px solid #fd5226;display:flex;flex-direction:column;padding:10px 0}.skills .skills__grid .skills__box img{height:50px;width:50px}.skills .skills__grid .skills__box h3{color:#f2f2f2}.skills .skills__grid .skills__box:first-child{border-left:none;border-top:none}.skills .skills__grid .skills__box:nth-child(2),.skills .skills__grid .skills__box:nth-child(3){border-top:none}.skills .skills__grid .skills__box:nth-child(4){border-right:none;border-top:none}.skills .skills__grid .skills__box:nth-child(5),.skills .skills__grid .skills__box:nth-child(9){border-left:none}.skills .skills__grid .skills__box:nth-child(12),.skills .skills__grid .skills__box:nth-child(8){border-right:none}.skills .skills__grid .skills__box:nth-child(13){border-bottom:none;border-left:none}.skills .skills__grid .skills__box:nth-child(14),.skills .skills__grid .skills__box:nth-child(15){border-bottom:none}.skills .skills__grid .skills__box:nth-child(16){border-right:none;bottom:none}.portfolio__container{background-color:#000;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;padding:0 15rem 100px;text-align:center;width:100%}.portfolio__container h2{color:#f2f2f2;font-family:syne;font-size:75px;padding:80px 0}.portfolio__container .portfolio__buttons{display:flex;justify-content:center;margin-bottom:3rem}.portfolio__container .portfolio__buttons button{background-color:#f2f2f2;border:none;border-radius:0;cursor:pointer;font-family:Syne;font-size:15px;height:40px;margin:5px;padding:8px 20px;text-transform:uppercase;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}.portfolio__container .portfolio__buttons button:first-child,.portfolio__container .portfolio__buttons button:hover{background-color:#fd5226}.portfolio__container .portfolio__buttons button:active{background-color:#ff0}.portfolio__container .portfolio__projects{grid-gap:.8rem;display:grid;gap:.8rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,470px)}.portfolio__container .portfolio__projects .portfolio__project-box{border:2px solid #fd5226;border-radius:2rem;display:flex;flex-direction:column;gap:1rem;padding:.8rem}.portfolio__container .portfolio__projects .portfolio__project-box .project__preview{border-top-left-radius:10px;border-top-right-radius:10px;height:133px;overflow-x:hidden;overflow-y:hidden}.portfolio__container .portfolio__projects .portfolio__project-box .project__preview img{flex-grow:1;height:100%;object-fit:cover;transition:all .3s ease-in-out;width:100%}.portfolio__container .portfolio__projects .portfolio__project-box .project__preview img:hover{transform:scale(1.1)}.portfolio__container .portfolio__projects .portfolio__project-box .project__title{color:#f2f2f2;font-size:20px}.portfolio__container .portfolio__projects .portfolio__project-box p{color:#f2f2f2}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons{align-items:center;display:flex;justify-content:space-around}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a{align-items:center;background-color:initial;border:none;color:#f2f2f2;display:flex;font-size:15px;justify-content:space-between;margin:auto 0;text-decoration:none;width:20%}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a button{background-color:initial;border:none}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a h3{margin-left:5px}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a #explorer{color:#1e90ff}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a #github{color:#ba55d3}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a:first-child h3:hover{color:#1e90ff}.portfolio__container .portfolio__projects .portfolio__project-box .portfolio__icons a:nth-child(2) h3:hover{color:#ba55d3}.portfolio__container .portfolio__projects .portfolio__project-box .Momentum-clone{grid-column:1/2;grid-row:1/2}.portfolio__container .portfolio__projects .portfolio__project-box .Todo{grid-column:2/3;grid-row:1/2}.portfolio__container .portfolio__projects .portfolio__project-box .Sunny{grid-column:3/4;grid-row:1/2}.portfolio__container .portfolio__projects .portfolio__project-box .Weather{grid-column:1/2;grid-row:2/4}.portfolio__container .portfolio__projects .portfolio__project-box .Portfolio{grid-column:3/4;grid-row:2/4}.portfolio__container .portfolio__projects .portfolio__project-box .Calculator{grid-column:2/3;grid-row:3/4}.projects-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,470px)}.projects-grid .project-card{border:2px solid #fd5226;border-radius:2rem;display:flex;flex-direction:column;gap:1rem;min-height:445px;min-width:420px;padding:.8rem}.projects-grid .project-card .project__preview{border-top-left-radius:10px;border-top-right-radius:10px;height:80%;overflow-x:hidden;overflow-y:hidden}.projects-grid .project-card .project__preview img{flex-grow:1;height:100%;object-fit:cover;transition:all .3s ease-in-out;width:100%}.projects-grid .project-card .project__preview img:hover{transform:scale(1.1)}.projects-grid .project-card .project__title{color:#f2f2f2}.projects-grid .StreamingNow{grid-column:1/3;grid-row:2/4}.projects-grid .Weather{grid-column:3/4;grid-row:1/3}.project-card{border:2px solid #fd5226;border-radius:2rem;display:flex;flex-direction:column;gap:1rem;height:100%;min-height:445px;min-width:420px;padding:.8rem;width:100%}.project-card .project__preview{border-top-left-radius:10px;border-top-right-radius:10px;height:320px;overflow-x:hidden;overflow-y:hidden}.project-card .project__preview img{flex-grow:1;height:100%;object-fit:cover;transition:all .3s ease-in-out;width:100%}.project-card .project__preview img:hover{transform:scale(1.1)}.project-card .project__title{color:#f2f2f2}.project-card.StreamingNow{grid-column:1/span 2;grid-row:2/span 2}.projects__icons{display:flex;justify-content:space-evenly}.projects__icons .project-btn button{border-radius:20px;height:40px;padding:0 10px}.projects__icons .project-btn #insights{background-color:#fd5226;border:2px solid #fd5226;color:#fd5226;color:#000}.projects__icons .project-btn #github{background-color:#ba55d3;border:2px solid #ba55d3;color:#ba55d3;color:#f2f2f2}.modal-overlay{align-items:center;background:#00000080;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}.modal{background-color:#000;border:2px solid #fd5226;border-radius:10px;color:#f2f2f2;padding:2rem;position:relative;width:350px}.modal h2{margin-right:20px;width:250px}.modal h2,.modal p{margin-bottom:20px}.modal h3{margin-bottom:10px}.modal ul{column-gap:1rem;display:flex;flex-wrap:wrap;list-style-type:none;row-gap:1rem}.modal ul li{background-color:#fd5226;border-radius:15px;padding:5px 10px}.modal-close{background:none;border:2px solid #fd5226;border-radius:50%;color:#fd5226;cursor:pointer;font-size:1.7rem;padding:3px 11px;position:absolute;right:1rem;top:1rem}.resume{align-items:center;background-color:#000;color:#f2f2f2;display:flex;flex-direction:column;justify-content:center;row-gap:20px}.resume .base ul,.resume .resume_education ul,.resume .resume_experience ul,.resume .resume_others ul{margin-left:22px}.resume .resume_section{width:40%}.resume .resume_section h4{text-align:center}.resume .experience_date{display:flex;justify-content:space-between}.resume h2{color:#fd5226;font-size:50px}.resume h3{border-bottom:2px solid #fd5226;color:#fd5226;font-size:24px;margin-bottom:4px}.resume h4{font-size:18px}.resume p{font-size:15px}.resume .resume_contact ul{display:flex;list-style:none}.resume .resume_contact ul li{margin-right:5px}.resume .resume_skills ul{list-style:none}.resume .resume_projects{border:1px solid red;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content}@media (max-width:480px){.nav__container{flex-direction:column;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;padding:0 0 5px}.nav__container .nav__text{display:flex;justify-content:space-between;padding:20px;width:100%}.nav__container .nav__text button{align-items:center;background:#f2f2f2;border:none;border-radius:50%;color:#000;display:flex;font-size:20px;height:42px;justify-content:center;width:42px}.nav__container .showNav-active{display:flex;flex-direction:column;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;width:100%}.nav__container .showNav-active li{align-items:center;border-bottom:2px solid #f2f2f2;border-top:2px solid #f2f2f2;display:flex;font-size:15px;min-height:80px;padding:20px}.nav__container .showNav-disable{display:none}.header__container{height:360px;padding:40px 20px 100px}.header__container h2{font-size:30px}.header__container .header-link{font-weight:700;height:46px;padding:12px 24px;width:144px}.profile{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);height:955px;padding:60px 20px 100px}.profile .profile__img{background-position:center 5rem;background-size:80%;grid-row:1/2}.profile .profile__text{grid-row:2/3;margin:0 auto;text-align:center}.profile .profile__text h2{font-size:28px;width:100%}.profile .profile__text p{font-size:15px;width:100%}.profile .profile__text .profile-link{height:46px;margin:0 auto;padding:12px 24px;width:193px}.banner{grid-template-columns:1fr;grid-template-rows:repeat(7,200px);height:1400px}.banner .banner__project-1st{grid-column:1/1;grid-row:1/2}.banner .banner__project-2nd{grid-column:1/1;grid-row:4/6}.banner .banner__project-3rd{grid-column:1/1;grid-row:2/3}.banner .banner__project-4th{grid-column:1/1;grid-row:3/4}.banner .banner__project-5th{background-position:center 5px;grid-column:1/1;grid-row:6/7}.banner .banner__project-6th{grid-column:1/1;grid-row:7/8}.skills{height:1040px;padding:100px 20px}.skills h2{font-size:28px}.skills .skills__grid{grid-template-columns:repeat(2,50%);grid-template-rows:repeat()}.skills .skills__grid .skills__box:nth-child(2){border-right:none;border-top:none}.skills .skills__grid .skills__box:nth-child(2n){border-right:none}.skills .skills__grid .skills__box:nth-child(odd){border-left:none}.contact__container{grid-template-columns:1fr;grid-template-rows:290px 390px 100px;height:800px;padding:100px 20px 80px}.contact__container .contact__info{height:290px}.contact__container .contact__info h2{font-size:28px}.contact__container .contact__info h3{font-size:18px}.contact__container .contact__developed{margin-top:20px}.contact__container .contact__developed li{margin:0 10px}.portfolio__container{height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;padding:40px 20px}.portfolio__container h2{font-size:30px}.portfolio__container .portfolio__projects,.portfolio__container .projects-grid{align-items:center;display:flex;flex-direction:column}.portfolio__container .portfolio__projects .portfolio__project-box,.portfolio__container .portfolio__projects .project-card,.portfolio__container .projects-grid .portfolio__project-box,.portfolio__container .projects-grid .project-card{border:2px solid #fd5226;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;min-width:90vw}.portfolio__container .portfolio__projects .projects-grid,.portfolio__container .projects-grid .projects-grid{align-items:center;display:flex;flex-direction:column}.portfolio__container .portfolio__buttons{flex-wrap:wrap;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin-bottom:80px;padding:40px 20px;width:370px;width:100%}.portfolio__container .portfolio__projects{gap:25px;grid-template-columns:repeat(1,1fr);grid-template-rows:repeat(8,190px);margin:0 auto;width:85%}.contact__container{padding:1rem 20px}.contact__container .contact__info{display:flex;flex-direction:column;grid-column:1/3;grid-row:1/2;justify-content:space-around}.contact__container .contact__form{grid-column:1/3;grid-row:2/3}}@media (min-width:481px) and (max-width:768px){.nav__container{flex-direction:column;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;padding:0 0 5px}.nav__container .nav__text{display:flex;justify-content:space-between;padding:20px;width:100%}.nav__container .nav__text button{align-items:center;background:#f2f2f2;border:none;border-radius:50%;color:#000;display:flex;font-size:20px;height:42px;justify-content:center;width:42px}.nav__container .showNav-active{display:flex;flex-direction:column;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;width:100%}.nav__container .showNav-active li{align-items:center;border-bottom:2px solid #f2f2f2;border-top:2px solid #f2f2f2;display:flex;font-size:15px;min-height:80px;padding:20px}.nav__container .showNav-disable{display:none}.header__container{height:450px;padding:40px 20px 100px}.header__container h2{font-size:50px}.header__container .header-link{font-weight:700;height:46px;padding:12px 24px;width:144px}.profile{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);height:955px;padding:60px 20px 100px}.profile .profile__img{background-position:center 5rem;background-size:80%;grid-row:1/2}.profile .profile__text{grid-row:2/3;margin:0 auto;text-align:center}.profile .profile__text h2{font-size:42px;width:100%}.profile .profile__text p{font-size:15px;width:100%}.profile .profile__text .profile-link{height:46px;margin:0 auto;padding:12px 24px;width:193px}.banner{grid-template-columns:1fr;grid-template-rows:repeat(7,200px);height:1400px}.banner .banner__project-1st{grid-column:1/1;grid-row:1/2}.banner .banner__project-2nd{grid-column:1/1;grid-row:4/6}.banner .banner__project-3rd{grid-column:1/1;grid-row:2/3}.banner .banner__project-4th{grid-column:1/1;grid-row:3/4}.banner .banner__project-5th{background-position:center 5px;grid-column:1/1;grid-row:6/7}.banner .banner__project-6th{grid-column:1/1;grid-row:7/8}.skills{display:flex;flex-direction:column;height:1040px;justify-content:center;padding:100px 20px}.skills h2{font-size:42px;margin-bottom:40px}.skills .skills__grid{grid-template-columns:repeat(2,50%);grid-template-rows:repeat(auto auto)}.skills .skills__grid .skills__box:nth-child(2){border-right:none;border-top:none}.skills .skills__grid .skills__box:nth-child(2n){border-right:none}.skills .skills__grid .skills__box:nth-child(odd){border-left:none}.portfolio__container{align-items:center;display:flex;flex-direction:column;max-height:-moz-fit-content;max-height:-webkit-fit-content;max-height:fit-content;min-height:1580px;padding:40px 20px 100px}.portfolio__container h2{font-size:30px}.portfolio__container .portfolio__projects{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,492px)}.portfolio__container .portfolio__buttons{flex-wrap:wrap;height:90px;margin-bottom:80px;width:80%}.portfolio__container .projects-grid{align-items:center;display:flex;flex-direction:column;gap:2rem;width:100%}.portfolio__container .projects-grid .project-card{width:100%}.contact__container{height:900px;padding:1rem 20px}.contact__container .contact__info{display:flex;flex-direction:column;grid-column:1/3;grid-row:1/2;justify-content:space-around}.contact__container .contact__form{grid-column:1/3;grid-row:2/3}}@media (min-width:769px){.nav__container{padding:0 30px}.header__container{padding:80px 30px}.profile,.skills{padding:0 30px}.contact__container{padding:100px 30px}.portfolio__container{padding:0 30px}.portfolio__container .portfolio__buttons{flex-wrap:wrap;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;padding:0 30px}.portfolio__container .portfolio__projects{padding-bottom:55px}.portfolio__container .portfolio__projects,.portfolio__container .portfolio__projects .portfolio__project-box{height:-moz-fit-content;height:-webkit-fit-content;height:fit-content}.portfolio__container .portfolio__projects .portfolio__project-box p{height:150px}}
/*# sourceMappingURL=main.76a1965c.css.map*/