*{font-family:Montserrat,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0}html{min-height:100vh;margin:auto;display:flex;flex-direction:column;background-color:#111113}@media (max-width: 1440px){html{padding:0 50px}}@media (max-width: 1024px){html{padding:0 20px}}@media (max-width: 768px){html{padding:0 10px}}@media (max-width: 480px){html{padding:0}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width: 768px){body{padding-top:20px}}#root{display:flex;flex-direction:column;min-height:100vh}main{margin:0 auto;max-width:1440px}h2{font-size:44px;font-weight:700;text-align:center;color:#eeeef0;margin-bottom:20px}@media (max-width: 1024px){h2{font-size:32px}}@media (max-width: 480px){h2{font-size:24px}}.div__banner{margin:0 auto;position:relative}.div__banner img{width:100%;max-height:300px;object-fit:cover}.div__banner .Typewriter{position:absolute;width:100%;margin:0 auto;text-align:center;left:50%;top:50%;transform:translate(-50%,-50%)}.div__banner .Typewriter .span__union,.div__banner .Typewriter .Typewriter__wrapper,.div__banner .Typewriter .Typewriter__cursor{font-size:44px;color:orange}@media (max-width: 1024px){.div__banner .Typewriter .span__union,.div__banner .Typewriter .Typewriter__wrapper,.div__banner .Typewriter .Typewriter__cursor{font-size:36px}}@media (max-width: 480px){.div__banner .Typewriter .span__union,.div__banner .Typewriter .Typewriter__wrapper,.div__banner .Typewriter .Typewriter__cursor{font-size:28px}}@media (max-width: 1024px){.div__banner .Typewriter .span__union{display:none}}@media (min-width: 1024px){.div__banner .Typewriter .span__crlf{display:none}}.div__banner .Typewriter__wrapper{background-color:#0000004d;text-shadow:1px 1px 0px white;font-family:Source Code Pro,monospace}.div__banner .Typewriter__cursor{left:50%;top:50%;transform:translate(-50%,-50%);background-color:orange}.navbar{display:flex;flex-direction:column;align-items:center}.navbar__burgerIcon{display:none;align-self:flex-end;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background-color:#3d63dd;color:#eeeef0;border:1px solid #393A40;border-radius:5px;cursor:pointer}.navbar__burgerIcon:hover{background-color:#243974}.navbar__burgerIcon:hover div{background-color:#b2b3bd}@media (max-width: 1024px){.navbar__burgerIcon{display:flex}}.navbar__burgerIcon .burger-bar{width:32px;height:4px;background-color:#eeeef0;border-radius:2px}.navbar__burgerIcon .burger-bar:nth-child(1){transform:translateY(10px) rotate(45deg);transition:ease-out .5s}.navbar__burgerIcon .burger-bar:nth-child(2){transform:scale(.1);transition:ease-out .5s}.navbar__burgerIcon .burger-bar:nth-child(3){transform:translateY(-10px) rotate(135deg);transition:ease-out .5s}.navbar__burgerIcon .burger-bar.close{transform:rotate(0) translate(0);transition:cubic-bezier(.175,.885,.32,1.275) .5s}.navbar__links{margin:0 auto;height:50px;display:flex;flex-direction:row;justify-content:center;align-items:center;position:sticky;top:0;background-color:#111113}@media (max-width: 1024px){.navbar__links{flex-direction:column;position:relative;height:auto}.navbar__links-close{display:none}}.navbar__links .link{text-align:center;text-decoration:none;font-size:18px;padding:10px 20px;color:#b2b3bd;border-bottom:.5px solid #303136}@media (max-width: 1024px){.navbar__links .link{width:100%}}.navbar__links .link:hover{animation:fadeColor_navbar .5s forwards;color:#eeeef0}.navbar__links .active{color:#fff;font-weight:700;border-bottom:3px solid #3D63DD}@keyframes fadeColor_navbar{to{background-color:#405eb2;color:#fff}}.div__introduction{margin:50px 0;padding:20px;background-color:#19191b;text-align:center;border-radius:10px;box-shadow:0 0 15px #00000026;background-image:url(/assets/images/screen_code.webp);height:auto;background-position:center;background-size:cover}@media (max-width: 1024px){.div__introduction{margin:0}}.div__introduction p{color:#b2b3bd;font-family:Gowun Dodum,cursive;font-size:20px}.modal_window{z-index:999;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;opacity:0;transition:opacity .5s ease}.modal_window.modal-enter{opacity:1}.modal_window.modal-exit{opacity:0}.modal_container{display:flex;flex-direction:column;align-items:center;border:1px solid #46484F;border-radius:20px;padding:0 10px;max-width:60vw;height:80vh}@media (max-width: 1024px){.modal_container{max-width:75vw}}@media (max-width: 768px){.modal_container{max-width:90vw}}.modal_header{background-color:#243974;width:100%;padding:10px;color:#fff;display:flex;justify-content:flex-end;align-items:center;border-radius:20px 20px 0 0;position:relative}.modal_header-name{position:absolute;left:50%;transform:translate(-50%);font-size:18px;font-weight:700}@media (max-width: 768px){.modal_header-name{font-size:16px;left:15px;transform:none}}.modal_header-links{display:flex;flex-direction:row;gap:10px}.modal_content{display:flex;flex-direction:column;align-items:center;background-color:#111113;padding:20px;overflow:auto}.modal_text{background-color:#eeeef0;color:#000;padding:10px 15px;margin-bottom:20px;border:1px solid #5F606A;border-radius:5px;line-height:1.6}.modal_text *{font-size:16px}@media (max-width: 768px){.modal_text *{font-size:14px}}.modal_text b{font-weight:700}.modal_skills{display:flex;justify-content:center;margin-top:10px;gap:15px}.modal_skills .img__tag{opacity:0;animation:fadeInGlow 3s forwards}@keyframes fadeInGlow{0%{opacity:0;filter:brightness(0%)}25%{opacity:.25;filter:brightness(50%)}50%{opacity:.5;filter:brightness(100%)}80%{opacity:1;filter:brightness(200%)}to{opacity:1;filter:brightness(100%)}}.modal_img{border:1px solid #5F606A;border-radius:5px}.modal_img img{width:100%;height:auto;object-fit:cover;border-radius:5px}.modal_github,.modal_website{cursor:pointer}.modal_github:hover,.modal_website:hover{color:#93b4ff}.modal_github a,.modal_website a{color:inherit;text-decoration:none}.modal_close{margin-right:20px;align-self:flex-end;cursor:pointer}.modal_close:hover{color:red}.div__creation{margin:20px 0;padding:15px 30px;background-color:#172448;box-shadow:0 3px 15px #0000001a;border-radius:20px}@media (max-width: 768px){.div__creation{padding:10px 20px;border-radius:10px}}.div__creation h3{font-size:20px;font-weight:700;text-align:center;color:#b2b3bd;margin-bottom:25px}@media (max-width: 1440px){.div__creation h3{font-size:16px}}@media (max-width: 768px){.div__creation h3{margin-bottom:15px}}.div__creation .tags{margin:15px 0 5px;display:flex;flex-direction:row;justify-content:center;gap:10px}.div__creation .img__tag{height:40px}.div__creation .img__creation{width:100%;height:200px;object-fit:cover;border:2px solid #B2B3BD;border-radius:5px}.div__cards{position:relative;transform-style:preserve-3d;transition:transform .6s;height:200px}.div__creation:hover .div__cards{transform:rotateY(180deg)}.card__front{width:100%;height:200px;position:absolute;backface-visibility:hidden}.card__back{display:flex;flex-direction:column;position:absolute;backface-visibility:hidden;height:180px;padding:10px;border-radius:5px;background-color:#0c111c;color:#b2b3bd;border:1px solid #B2B3BD;transform:rotateY(180deg)}.card__back-title{font-size:14px;font-weight:700;color:#eeeef0;margin-bottom:5px}.card__back-buttons{margin-top:auto;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:10px}.card__back-buttons a{cursor:pointer;color:inherit;text-decoration:none}.card__back-buttons a:hover{color:#3d63dd}.card__back-button-open{width:32px;height:32px;border-radius:16px;background-color:#3d63dd;color:#fff;text-align:center;align-content:center}.card__back-button-open:hover{cursor:pointer;background-color:#172448;color:#93b4ff}.div__creations{margin:20px 0;padding:20px;display:flex;flex-direction:column}@media (max-width: 768px){.div__creations{padding:0}}.div__projects{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;width:auto;gap:20px}.grid_column{background-clip:padding-box}.div__skill{margin:10px;padding:0 10px;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}@media (max-width: 1024px){.div__skill{margin-bottom:20px;justify-content:center}}.div__skill-img{width:40px;display:flex;justify-content:center}.div__skill img{height:36px}.div__skill-name{width:120px;text-align:left;margin:0 20px;color:#b2b3bd;font-family:Michroma;font-size:14px}@media (max-width: 1024px){.div__skill-name{width:80px;font-size:12px}}.div__skill-ratings{display:flex;flex-direction:row}@media (max-width: 480px){.div__skill-ratings{border:1px solid #303136}}.div__skill .rating{width:14px;height:14px;background-color:#172448;border-radius:7px;margin:0 2px}@media (max-width: 1024px){.div__skill .rating{width:12px;height:12px;margin:0 1px}}@media (max-width: 480px){.div__skill .rating{width:10px;height:10px;margin:0;border-radius:0}}.div__skill .active{background-color:#3f5cb0}.div__skills{position:relative;margin:50px 0;padding:20px;background-color:#19191b;text-align:center;border-radius:10px;box-shadow:0 0 15px #00000026;height:auto;background-position:center;background-size:cover;z-index:-1}.div__skills-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}@media (max-width: 768px){.div__skills{margin:10px 0}}.div__skills-categories{display:flex;justify-content:center;gap:50px}@media (max-width: 1024px){.div__skills-categories{flex-direction:column;gap:20px}}.article__category{z-index:90;width:45%;border:1px solid #292A2E;border-radius:10px;background-color:#111113cc}@media (max-width: 1440px){.article__category{width:49%}}@media (max-width: 1024px){.article__category{width:100%;margin:0 auto}}.article__category h3{background-color:#172448;color:#eeeef0;font-size:18px;font-weight:600;padding:10px;margin-bottom:10px}@media (max-width: 1024px){.article__category h3{font-size:16px}}.div__step{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px}@media (max-width: 1024px){.div__step{flex-direction:column;gap:5px}}.div__step h3{width:350px;color:#eeeef0;font-family:Michroma;font-size:16px;font-weight:700;text-align:right;order:0}@media (max-width: 1024px){.div__step h3{text-align:center}}@media (max-width: 480px){.div__step h3{width:280px}}.div__step .titleDisplayRight{order:2;text-align:left}@media (max-width: 1024px){.div__step .titleDisplayRight{text-align:center;order:0}}.div__step-img{display:flex;justify-content:center;align-items:center;width:160px;height:160px;background-color:#1d2e61;border-radius:80px;order:1}@media (max-width: 1024px){.div__step-img{order:3}}.div__step-img .img__step{width:80%}.div__step-text{width:350px;text-align:left;color:#b2b3bd;font-size:14px;order:2}@media (max-width: 1024px){.div__step-text{text-align:center}}@media (max-width: 480px){.div__step-text{width:280px;white-space:normal;overflow-wrap:break-word}}.div__step .textDisplayLeft{order:0;text-align:right}@media (max-width: 1024px){.div__step .textDisplayLeft{text-align:center;order:2}}.div__education{display:flex;flex-direction:column;justify-content:center;margin-bottom:20px}.div__education-steps{display:flex;flex-direction:column;align-items:center}.div__education-line{background-color:#b2b3bd;width:2px;height:100px;margin:10px;position:relative}.self_education{width:200px;height:200px;background-color:red}.div__contact{margin:50px 0;padding:20px;background-color:#19191b;display:flex;flex-direction:column;align-items:center;border-radius:10px;box-shadow:0 0 15px #00000026;background-image:url(/assets/images/world_is_code.webp);height:auto;background-position:center;background-size:cover}.div__contact p{text-align:center;color:#eeeef0;font-size:20px;margin-bottom:30px}@media (max-width: 1024px){.div__contact p{font-size:18px}}@media (max-width: 480px){.div__contact p{font-size:16px}}@media (min-width: 1440px){.div__contact .span__crlf{display:none}}.div__contact form{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;width:100%;max-width:800px}.div__contact label{color:#fff;font-size:14px;align-self:flex-start}.div__contact input,.div__contact textarea{height:40px;padding:5px 10px;margin:0 15px 20px;border-radius:5px;background-color:#172448;border:1px solid #46484F;color:#eeeef0;font-size:14px}.div__contact textarea{height:80px}.div__contact button{display:flex;align-items:center;gap:10px;height:40px;padding:5px 10px;border-radius:5px;background-color:#3d63dd;border:1px solid #46484F;color:#eeeef0;font-size:14px;font-weight:700;align-self:center}.div__contact button:hover{cursor:pointer;background-color:#172448;color:#93b4ff}.div__contact button:hover .iconEmail{color:#b2b3bd;animation:shake-rotation .5s ease-in-out infinite}.emailSent{display:flex;gap:10px;background-color:#d5e2ff;color:#000;font-weight:700;margin-top:15px;padding:10px;border-radius:5px;align-items:center}@keyframes shake-rotation{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.section__navbar{z-index:99;position:sticky;top:0}@media (max-width: 1024px){.section__navbar{position:relative}}.__section{margin-top:100px}@media (max-width: 1024px){.__section{margin-top:10px}}@media (max-width: 768px){.__section{margin-top:10px}}.container__error{display:flex;flex-direction:column;align-items:center;padding:0 30px}.container__error h1{font-size:288px;color:#93b4ff;margin:80px auto}@media (max-width: 768px){.container__error h1{font-size:96px}}@media (min-width: 768px) and (max-width: 1024px){.container__error h1{font-size:192px}}.container__error h2{font-size:36px;color:#d5e2ff;margin:0 auto;text-align:center;font-weight:500;line-height:26px}@media (max-width: 768px){.container__error h2{font-size:18px}}@media (min-width: 768px) and (max-width: 1024px){.container__error h2{font-size:24px}}.container__error-link{font-size:18px;color:#93b4ff;text-decoration:underline;text-align:center;margin:120px auto 100px}@media (max-width: 768px){.container__error-link{font-size:14px}}@media (min-width: 768px) and (max-width: 1024px){.container__error-link{font-size:16px}}footer{margin-top:auto;text-align:center;padding:20px 30px;background-color:#000}footer p{color:#fff;font-size:12px;font-weight:500;text-align:center}@media (min-width: 768px) and (max-width: 1024px){footer p{font-size:10px}}