*{margin:0;padding:0;box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}.app{transition:background-color 1s ease-in-out;min-height:100vh;color:#000;width:100%;overflow-x:hidden;gap:100px}.header-menu{display:flex;position:fixed;width:100%;justify-content:space-around;align-items:center;padding:10px;box-shadow:#00000026 1.95px 1.95px 2.6px;background-color:#ffffffe6;color:#000!important;z-index:10}.header-menu div:hover{cursor:pointer;color:#8b8a8a;transform:scale(1.1)}.active{color:#aaa;transform:scale(1.1)}.start-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 30px 0;color:#fff;min-height:100vh;width:100%;max-width:100vw;box-sizing:border-box}.typed-container{padding-top:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 1s ease-in-out;text-align:center}.typed-container.shrink{transform:translate(-50%,-150%) scale(.6)}.portfolio-title{opacity:0;animation:fadeIn 1.5s ease forwards 1s;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:20px}.portfolio-main-title{font-size:3rem;padding:20px}.arrow-icon{font-size:3rem;transition:all 1s ease-out}.arrow-icon:hover{transform:scale(1.2);cursor:pointer}.bounce-blink{animation:bounce 2s ease infinite,blink-effect 2s ease infinite}@keyframes fadeIn{to{opacity:1}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-4px)}}@keyframes blink-effect{0%,to{opacity:1}50%{opacity:.4}}.about-section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px;gap:30px;width:100%;max-width:100vw;box-sizing:border-box}.info{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:50px 30px;width:450px;border-radius:30px;box-shadow:#63636333 0 2px 8px}.info-item{display:flex;align-items:center;gap:20px}.link-style{text-decoration:none;color:#000;font-size:18px;font-weight:700}.link-style:hover{color:gray}@media(max-width:480px){.info{width:380px}}.skill-section{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;margin:400px 0;padding:100px 0;gap:60px}.skill-card{position:relative;max-width:100%;margin:50px 0}.skill-content{border:4px solid #4fc3f7;border-radius:20px;background-color:#0e1116;width:620px;max-width:100%;padding:40px;box-shadow:5px 8px 15px #44b0e24d;font-size:20px;display:flex;flex-direction:column;gap:20px}.skill-title{border:3px solid #4fc3f7;border-radius:5px;background-color:#0e1116;width:fit-content;padding:7px 18px;position:absolute;top:-20px;left:20px;transform:rotate(-5deg);font-weight:700;font-size:22px}.skill-content.oddNum{border:4px solid #14a51b;box-shadow:5px 8px 15px #29d3784d}.skill-title.oddNum{border:3px solid #14a51b;transform:rotate(5deg);left:auto;right:20px}.content-summary{color:#aaa;font-size:15px}@media(max-width:480px){.skill-content{width:390px}}.projects-section{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 0}.text-box{width:200px;height:200px;border:5px solid purple}.card-wrapper{width:620px;max-width:100%;min-height:200px;border-radius:20px;box-shadow:#32325d40 0 2px 5px -1px,#0000004d 0 1px 3px -1px;margin:30px;padding:30px 40px;display:flex;flex-direction:column}.project-card{width:100%;gap:20px;display:flex;justify-content:space-between;align-items:flex-start}.content{display:flex;width:100%;flex-direction:column;justify-content:space-between}.img-part{display:flex;align-items:center}.card-img{width:150px;object-fit:cover;border-radius:20px;border:2px solid gray}.card-img:hover{cursor:pointer;filter:brightness(.8);transform:scale(1.02)}.title-part{display:flex;flex-direction:column;gap:20px}.subtitle{color:#333;font-weight:500}.skill-part{display:flex;gap:8px;color:#333;font-weight:500;font-size:16px;margin-bottom:7px;flex-wrap:wrap}.button-area{display:flex;flex-direction:column;gap:8px}.button-area div{align-self:flex-start;padding:5px 10px;border-radius:20px;background-color:#f5e4dc;box-shadow:#32325d40 0 2px 5px -1px,#0000004d 0 1px 3px -1px}.button-area div:hover{background-color:#e5cab5;cursor:pointer;transform:scale(1.05)}.detail-btn{font-size:15px;text-align:center;display:flex;align-items:center;margin-top:10px;gap:3px;transform-origin:left center}.detail-btn:hover{cursor:pointer;color:#8b8a8a;transform:scale(1.05)}.detail-area{padding:10px 0;display:flex;flex-direction:column;gap:7px}.detail-area li{list-style-type:none}@media(max-width:480px){.card-wrapper{width:390px;padding:30px}.card-img{width:120px}.button-area{display:flex;flex-direction:row}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;justify-content:center;align-items:center;z-index:10;display:flex;flex-direction:column}.modal{width:600px;height:700px;min-height:600px;padding:30px;background-color:#e9e8e893;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;position:relative}.close-icon{display:none}.modal-top{width:100%;display:flex;justify-content:center;align-items:center;gap:15px}.modal-icon{font-size:40px;cursor:pointer}.modal-icon:hover{transform:scale(1.1)}.modal-main-img{height:550px}.modal-img-list{display:flex;gap:10px}.modal-project-img{height:80px;cursor:pointer}.modal-project-img.current{filter:brightness(.3);transform:scale(1.08)}@media(max-width:480px){.modal{width:400px}.modal-main-img{height:400px}.modal-icon{display:none}.close-icon{display:block;position:absolute;top:15px;right:20px;font-size:20px;color:#363535}}.footer-section{margin-top:100px}.footer{height:150px;background-color:#aaa;padding:10px;display:flex;justify-content:end;align-items:end}:root{--cat-height: 152px;--cat-width: 238px;--steps: 8}.cat-background{height:fit-content;width:100%;background-color:#fff;overflow-x:hidden}.cat-container-running{animation:cat-running 8s linear infinite normal;height:fit-content;width:fit-content}@keyframes cat-running{0%{transform:translate(calc(100vw + var(--cat-width)))}to{transform:translate(calc(var(--cat-width) * (-1)))}}.sprite-cat-vertical{height:calc(var(--cat-height) - 10px);width:var(--cat-width);background:url(https://raw.githubusercontent.com/6Fein/images/main/code-pen-running-cat-animation/cat-vertical.jpg) 0 0/cover no-repeat #fff;animation:sprite-cat-vertical calc(var(--steps) * .07s) steps(var(--steps)) infinite normal}@keyframes sprite-cat-vertical{0%{background-position:0 0}to{background-position:0 calc(var(--cat-height) * (-1) * var(--steps))}}.heart-icon{background-color:transparent;height:100%;width:100%}.cat-container-running:hover,.sprite-cat-vertical:hover{animation-play-state:paused}.heart-icon:hover{background:url(https://raw.githubusercontent.com/6Fein/images/main/code-pen-running-cat-animation/heart-icon.png) 100px 10px/20px no-repeat transparent}