@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;text-decoration: none;border: none;outline: none;font-family: "Poppins", sans-serif;}:root {--bg-color: #1f242d;--second-bg-color: #323946;--main-color: #7cf03d;--white-color: #fff;--disabled-color: #fff3;}html {font-size: 62.5%;}body {color: var(--white-color);}header {position: fixed;top: 0;left: 0;width: 100%;padding: 2rem 9%;background: var(--bg-color);display: flex;justify-content: space-between;align-items: center;z-index: 100;visibility: hidden;opacity: 0;}header.active {animation: show-header .8s linear forwards;animation-delay: .5s;}@keyframes show-header {100% {visibility: visible;opacity: 1;}}.logo {font-size: 3rem;color: var(--white-color);font-weight: 700;}nav a {font-size: 2rem;color: var(--white-color);font-weight: 500;margin-left: 3.5rem;transition: .3s;}nav a:hover, nav a.active {color: var(--main-color);}#menu-icon {font-size: 4rem;display: none;}.bars-box {position: absolute;width: 100%;height: 100%;display: flex;}.bars-box .bar {width: 100%;height: 100%;background: var(--bg-color);animation: hide-bars .15s ease-in-out both;animation-delay: calc(.1s * var(--i));}@keyframes hide-bars {0% {transform: translateY(0);}100% {transform: translateY(-100%);}}.bars-box.active .bar {animation: show-bars .15s ease-in-out both;animation-delay: calc(.1s * var(--i));}@keyframes show-bars {0% {transform: translateY(-100%);}100% {transform: translateY(0);}}section {position: absolute;width: 100%;height: 100%;padding: 10rem 9% 2rem;visibility: hidden;opacity: 0;overflow: hidden;}section.active {animation: show-content .8s linear forwards;animation-delay: 1s;}@keyframes show-content {100% {visibility: visible;opacity: 1;overflow: auto;}}.home {display: flex;align-items: center;gap: 5rem;}.home-detail h1 {font-size: clamp(3.5rem, 10vw, 5.5rem);}.home-detail h2 {display: inline-block;font-size: 3.2rem;margin-top: -1rem;}.home-detail h2 span {position: relative;display: inline-block;color: transparent;-webkit-text-stroke: .07rem var(--main-color);animation: display-text 12s linear infinite;animation-delay: calc(-3s * var(--i));}@keyframes display-text {25%, 100% {display: none;}}.home-detail h2 span::before {content: attr(data-text);position: absolute;width: 0;border-right: .2rem solid var(--main-color);color: var(--main-color);white-space: nowrap;overflow: hidden;animation: fill-text 3s linear infinite;}@keyframes fill-text {10%, 100% {width: 0;}70%, 90% {width: 100%;}}.home-detail p {font-size: 1.6rem;margin: 1rem 0 2.5rem;}.home-detail .btn-sci {display: flex;align-items: center;}.btn {display: inline-block;padding: 1rem 3rem;background: var(--main-color);border: .2rem solid var(--main-color);border-radius: 4rem;box-shadow: 0 0 1rem var(--main-color);font-size: 1.6rem;color: var(--bg-color);font-weight: 500;transition: .3s;}.btn:hover {background: transparent;color: var(--main-color);box-shadow: none;}.home-detail .btn-sci .sci {margin-left: 2rem;}.home-detail .btn-sci .sci a {display: inline-flex;padding: .8rem;border: .2rem solid var(--main-color);border-radius: 50%;font-size: 2rem;color: var(--main-color);margin: 0 .8rem;transition: .3s;}.home-detail .btn-sci .sci a:hover {background: var(--main-color);color: var(--bg-color);box-shadow: 0 0 1rem var(--main-color);}.home-img .img-box {position: relative;width: 32vw;height: 32vw;border-radius: 50%;padding: .5rem;display: flex;justify-content: center;align-items: center;overflow: hidden;}.home-img .img-box::before, .home-img .img-box::after {content: '';position: absolute;width: 50rem;height: 50rem;background: conic-gradient(transparent, transparent, transparent, var(--main-color));transform: rotate(0deg);animation: rotate-border 10s linear infinite;}.home-img .img-box::after {animation-delay: -5s;}@keyframes rotate-border {100% {transform: rotate(360deg);}}.home-img .img-box .img-item {position: relative;width: 100%;height: 100%;background: var(--bg-color);border-radius: 50%;border: .01rem solid var(--bg-color);display: flex;justify-content: center;z-index: 1;overflow: hidden;}.home-img .img-box .img-item img {position: absolute;top: 3rem;display: block;width: 85%;object-fit: cover;mix-blend-mode: lighten;}.heading {font-size: 4.5rem;text-align: center;margin-bottom: 2rem;}.heading span {color: var(--main-color);}.services-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));gap: 2rem;}.services-container .services-box {padding: 3rem 2.5rem;background: var(--second-bg-color);border: .2rem solid var(--second-bg-color);border-radius: 1rem;transition: .3s;}.services-container .services-box:hover {border-color: var(--main-color);transform: scale(1.02);}.services-box .icon {display: flex;justify-content: space-between;align-items: center;}.services-box .icon i {font-size: 4.5rem;transition: .3s;}.services-box:hover .icon :not(a i) {color: var(--main-color);}.services-box .icon a {display: inline-flex;background: var(--white-color);border-radius: 50%;padding: 1rem;transition: .3s;}.services-box:hover .icon a {background: var(--main-color);}.services-box .icon a i {font-size: 3rem;color: var(--bg-color);transform: rotate(225deg);}.services-box .icon a:hover i {transform: rotate(180deg);}.services-box h3 {font-size: 3rem;margin: .5rem 0 2rem;transition: .3s;}.services-box:hover h3 {color: var(--main-color);}.services-box p {font-size: 1.6rem;}.resume-container {display: grid;grid-template-columns: 1fr 2fr;gap: 5rem;}.resume-box h2 {font-size: 4.5rem;}.resume-box p {font-size: 1.6rem;}.resume-box .desc {margin: 2rem 0 2.5rem;}.resume-box .resume-btn {width: 100%;height: 5.3rem;background: var(--second-bg-color);border: .2rem solid var(--second-bg-color);font-size: 1.6rem;color: var(--white-color);font-weight: 500;margin-bottom: 2rem;border-radius: .8rem;cursor: pointer;}.resume-box .resume-btn.active {border-color: var(--main-color);color: var(--main-color);}.resume-detail {display: none;}.resume-detail.active {display: block;}.resume-box .heading {font-size: 3.5rem;text-align: left;}.resume-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));gap: 2rem;height: 45rem;overflow: auto;}.resume-list::-webkit-scrollbar {width: .7rem;}.resume-list::-webkit-scrollbar-thumb {background: transparent;border-radius: 1rem;}.resume-list:hover::-webkit-scrollbar-thumb {background: var(--main-color);}.resume-list .resume-item {background: var(--second-bg-color);border-radius: .8rem;padding: 3rem 2.5rem;height: calc((45rem - 2rem) / 2);display: flex;flex-direction: column;justify-content: center;}.resume-item .year {color: var(--main-color);}.resume-item h3 {font-size: 2.2rem;}.resume-item .company {position: relative;margin-left: 2rem;margin-bottom: 2rem;}.resume-item .company::before {content: '';position: absolute;top: 50%;transform: translateY(-50%);padding: .5rem;background: var(--main-color);border-radius: 50%;margin-left: -2rem;}.resume-detail.skills .resume-list {grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));height: auto;overflow: visible;}.resume-detail.skills .resume-item {position: relative;align-items: center;height: auto;}.resume-detail.skills .resume-item i {font-size: 8.5rem;transition: .3s;}.resume-detail.skills .resume-item:hover i {color: var(--main-color);}.resume-detail.skills .resume-item span {position: absolute;top: -20%;background: var(--white-color);color: var(--bg-color);font-size: 1.6rem;padding: .5rem 1rem;border-radius: .6rem;pointer-events: none;opacity: 0;transform: scale(.9);transition: .1s;}.resume-detail.skills .resume-item:hover span {top: -25%;opacity: 1;transform: scale(1);}.resume-detail.about .resume-list {height: auto;grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));}.resume-detail.about .resume-item {height: auto;padding: 0 0 .5rem;background: transparent;}.resume-detail.about .resume-item p {color: var(--main-color);}.resume-detail.about .resume-item p span {color: var(--white-color);margin-left: 1rem;font-size: 1.8rem;}.portfolio-container {display: grid;grid-template-columns: repeat(2, 1fr);gap: 3rem;}.portfolio-detail {display: none;}.portfolio-detail.active {display: block;}.portfolio-box .numb {font-size: 8rem;-webkit-text-stroke: .07rem var(--white-color);color: transparent;line-height: 1;}.portfolio-box h3 {font-size: 3.5rem;margin: .8rem 0 2rem;}.portfolio-box p {font-size: 1.6rem;}.portfolio-box .tech {margin: 2rem 0;color: var(--main-color);border-bottom: .1rem solid var(--white-color);padding-bottom: 2rem;}.portfolio-box .live-github a {position: relative;display: inline-flex;padding: 1.3rem;font-size: 3rem;color: var(--white-color);border-radius: 50%;background: var(--second-bg-color);transition: .3s;}.portfolio-box .live-github a:hover {color: var(--main-color);}.portfolio-box .live-github a:first-child {margin-right: 1.5rem;}.portfolio-box .live-github a span {position: absolute;top: -60%;left: 50%;transform: translateX(-50%) scale(.9);font-size: 1.6rem;white-space: nowrap;padding: .5rem 1rem;border-radius: .6rem;pointer-events: none;background: var(--white-color);color: var(--bg-color);opacity: 0;transition: .1s;}.portfolio-box .live-github a:hover span {top: -70%;opacity: 1;transform: translateX(-50%) scale(1);}.portfolio-box .portfolio-carousel {width: 100%;height: 45rem;border-radius: 1rem;overflow: hidden;}.portfolio-carousel .img-slide {display: grid;grid-auto-flow: column;grid-auto-columns: 100%;gap: 2rem;height: inherit;transition: .3s;}.portfolio-carousel .img-item {height: inherit;}.portfolio-carousel .img-item img {display: block;width: 100%;height: 100%;object-fit: contain;border-radius: 1rem;}.portfolio-box .navigation {text-align: right;margin-top: 2rem;}.portfolio-box .navigation button {display: inline-flex;padding: .4rem;background: var(--second-bg-color);border: .2rem solid var(--main-color);border-radius: .6rem;font-size: 4rem;color: var(--main-color);cursor: pointer;}.portfolio-box .navigation button.disabled {border-color: var(--second-bg-color);color: var(--disabled-color);}.portfolio-box .navigation .arrow-right {margin-left: 1.5rem;}.contact-container {display: grid;grid-template-columns: 1fr 1.3fr;gap: 3rem;}.contact-container .contact-box:first-child {align-self: center;}.contact-box h2 {font-size: 4.5rem;}.contact-box p {font-size: 1.6rem;}.contact-box .desc {margin: 1.5rem 0 2.5rem;}.contact-box .contact-detail {display: flex;align-items: center;margin: 2rem 0;}.contact-detail i {display: inline-flex;background: var(--second-bg-color);color: var(--main-color);font-size: 3rem;padding: 1.2rem;border-radius: .6rem;margin-right: 1.5rem;}.contact-detail .detail p:first-child {color: var(--main-color);}.contact-box form {background: var(--second-bg-color);padding: 2.5rem 3.5rem 3.5rem;border-radius: 1rem;text-align: center;}.contact-box .heading {font-size: 3.5rem;}.contact-box .field-box {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;}.contact-box .field-box input, .contact-box .field-box textarea {padding: 1.5rem;background: var(--bg-color);border: .15rem solid var(--bg-color);border-radius: .6rem;font-size: 1.6rem;color: var(--white-color);}.contact-box .field-box textarea {grid-column: 1 / -1;height: 26rem;resize: none;}.contact-box .field-box input:focus, .contact-box .field-box textarea:focus {border-color: var(--main-color);}.contact-box .btn {margin-top: 2rem;cursor: pointer;}@media screen and (max-width: 1200px) {html {font-size: 55%;}}@media screen and (max-width: 992px) {header {padding: 2rem 4%;}section {padding: 10rem 4% 2rem;}}@media screen and (max-width: 810px) {.contact-box .field-box {grid-template-columns: 1fr;}}@media screen and (max-width: 768px) {#menu-icon {display: block;}nav {position: absolute;top: 100%;left: 0;width: 100%;padding: 1rem 0;background: var(--bg-color);border-top: .1rem solid rgba(0, 0, 0, .2);box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);text-align: center;display: none;}nav.active {display: block;}nav a {display: block;margin: 4rem 0;}.home {flex-direction: column-reverse;justify-content: center;gap: 2rem;}.home-img .img-box {width: 35rem;height: 35rem;}.resume-container, .portfolio-container, .contact-container {grid-template-columns: 1fr;}.resume-container {gap: 3rem;}.portfolio-container .portfolio-box:first-child {order: 1;}.contact-box .field-box {grid-template-columns: repeat(2, 1fr);}}@media screen and (max-width: 600px) {.home-img .img-box {width: 30rem;height: 30rem;}.contact-box .field-box {grid-template-columns: 1fr;}}@media screen and (max-width: 450px) {html {font-size: 50%;}}@media screen and (max-width: 400px) {.home-detail, .resume-box h2, .resume-box .heading, .resume-box .desc, .resume-detail.about .resume-item {text-align: center;}.home-detail .btn-sci {flex-direction: column-reverse;}.home-detail .btn-sci .sci {margin-left: 0;margin-bottom: 2rem;}.contact-box form {padding: 2.5rem 3rem 3.5rem;}.contact-box h2 {font-size: 3.5rem;}}.modal {top: 0;display: none;position: fixed;width: 100vw;height: 100vh;background-color: #323946;align-items: center;justify-content: center;z-index: 9999;}.modal.active {display: flex;}.modal-content {background: #323946;color: #fff;width: 500px;height: 250px;overflow: hidden;position: relative;box-shadow: 0 0.75em 1em #0b0c0e4d;border-radius: 1em;}.modal-content::before {background-color: #f656567a;border-radius: 50%;content: '';filter: blur(60px);opacity: .15;position: absolute;top: -8px;right: -15em;width: 25em;height: 25em;z-index: 0;transition: background-color .3s;}.close-icon {position: absolute;right: 20px;top: 20px;color: #abafba;cursor: pointer;transition: .3s;font-size: 20px;}.closeIcon:hover {color: #c7cad1;}.modal-body {display: flex;flex-direction: row;align-items: center;justify-content: center;height: 100%;padding: 20px;}span.icon {font-size: 50px;color: #f65656;}.right-items {margin-left: 30px;}button#okBtn {padding: 8px 15px;font-size: 18px;background: transparent;color: #fff;border: 1px solid #f65656;border-radius: 2px;cursor: pointer;position: absolute;right: 20px;bottom: 20px;}button#okBtn:hover {background: #323946;}