:root{--color-primary: #6C9BCF;--color-danger: #FF0060;--color-success: #1B9C85;--color-warning: #F7D060;--color-white: #fff;--color-info-dark: #7d8da1;--color-dark: #1d1d1d;--color-light: rgba (132, 139, 200, .18);--color-dark-variant: #677483;--color-background: #f6f6f9;--card-border-radius: 2rem;--border-radius-1: .4rem;--border-radius-2: 1.2rem;--card-padding: 1.8rem;--padding-1: 1.2rem;--box-shadow: 0 2rem 3rem var(--color-light);--bg-color: #ffffff;--text-color: #000000;--bg: rgb(250, 250, 250)}*{margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease;margin:0}button{color:var(--text-color);padding:8px;border:none;border-radius:5px;font-size:1.2rem}button:hover{color:#7a7a7a}.kantumruy-bold{font-family:Kantumruy Pro,sans-serif;font-weight:700}.kantumruy{font-family:Kantumruy Pro,sans-serif}.battambang{font-family:Battambang,sans-serif}.my-navbar{display:flex;justify-content:center}.my-navbar .navbar-scroll{position:sticky;top:0}.social-icon{padding:20px 0;position:fixed;top:0;z-index:9999}.social-icon ul li{list-style:none;padding:10px 0}.gallery-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin:2rem auto;padding:1rem}.gallery-item{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:12px;box-shadow:0 4px 12px #0000001a;background-color:#e0e0e0}.gallery-item img{width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .3s ease}.gallery-item img.loaded{opacity:1}.gallery-item:hover img{transform:scale(1.05)}.modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000c;align-items:center;justify-content:center}.modal-content{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 20px #00000080}.close{position:absolute;top:20px;right:35px;color:#fff;font-size:40px;font-weight:700;cursor:pointer;transition:.3s}.close:hover{color:#bbb}#show-image{height:500px;display:block;margin-left:auto;margin-right:auto}.setting{padding:20px 0;position:fixed;bottom:0;z-index:9999}.setting ul li{list-style:none;padding:10px 0;color:#000}.setting ul li a{color:var(--color-dark)}.my-title{margin-top:350px;padding-left:200px}.my-title h1{font-family:Kantumruy Pro,sans-serif}.my-title .big-title{font-size:5rem;font-weight:600;line-height:8rem;font-family:Kantumruy Pro,sans-serif}.image-section{margin-top:80px;padding:80px 200px;background-color:#f3f3f3}.image-section .image-show{width:100%;display:block;margin-left:auto;margin-right:auto;border-radius:16px}.info-section{padding:80px 200px;font-family:Kantumruy Pro,sans-serif;font-size:1.2rem}.info-section .content{display:flex;gap:100px}.info-section .content .left-side{width:800px;text-align:justify}.info-section .content .left-side .icon-image{display:flex;gap:10px;align-items:center}.info-section .content .left-side .icon-image img{height:60px}.info-section .content .right-side ul{padding-left:0}.info-section .content .right-side ul li{list-style:none;font-size:1rem}.image-preview-2{background-color:var(--bg)}.image-preview{width:100%;display:block;margin-left:auto;margin-right:auto}.carousel-wrapper{width:100%;overflow:hidden;position:relative}.carousel{display:flex;gap:20px;animation:scroll 30s linear infinite}.carousel-reverse{display:flex;gap:20px;animation:scroll-reverse 30s linear infinite}.carousel img,.carousel-reverse img{height:300px;flex-shrink:0;border-radius:12px}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes scroll-reverse{0%{transform:translate(-50%)}to{transform:translate(0)}}.appear{animation:appear ease;animation-timeline:view();animation-range:entry 0% cover 40%}@keyframes appear{0%{opacity:0;scale:.3}to{opacity:1;scale:1}}.float-in{opacity:0;transform:translateY(-50px);animation:floatIn 1.2s ease-out forwards}@keyframes floatIn{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}a{text-decoration:none;color:var(--text-color);position:relative;padding:8px;font-family:Kantumruy Pro}#work-timeline{display:block;margin-left:auto;margin-right:auto;height:600px}.tag{border:1px solid var(--text-color);padding:0 10px}.dynamic-island{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:var(--bg-color);border-radius:40px;padding:0 20px;opacity:0;pointer-events:none;display:flex;align-items:center;gap:12px;box-shadow:0 1px 20px #0003;transition:opacity .3s ease;z-index:1000}.dynamic-island.show{opacity:1;pointer-events:auto;animation:bounceInTop .6s ease forwards}.dynamic-island span a:hover{color:#aaa}.close-btn{background:transparent;border:none;color:var(--text-color);font-size:20px;cursor:pointer;transition:color .2s}.close-btn:hover{color:#aaa}@keyframes bounceInTop{0%{transform:translate(-50%) translateY(-100px);opacity:0}60%{transform:translate(-50%) translateY(20px);opacity:1}80%{transform:translate(-50%) translateY(-10px)}to{transform:translate(-50%) translateY(0)}}#skills{background-color:#fbf6ff}.id-card{width:220px;overflow:hidden;animation:sway 3s infinite ease-in-out;transform-origin:top center;transition:transform .2s ease}.id-card:hover{transform:rotate(2deg) scale(1.03)}@keyframes sway{0%,to{transform:rotate(0)}50%{transform:rotate(2deg)}}.my-id{position:absolute;top:0;right:100px}.social-icon-mobile{display:none}.link:hover{color:#00f}@media (max-width: 768px){.gallery-container{grid-template-columns:repeat(2,1fr)}.social-icon{display:none}.my-id{position:static!important}.my-title{margin-top:50px;padding:0 80px}.my-title h1{font-size:24px}.my-title .big-title{font-size:38px;line-height:normal}.info-section{padding:80px}.info-section .content{display:block;width:100%}.info-section .content .left-side{width:100%;text-align:left;margin-bottom:40px}.info-section .content .left-side .icon-image img{height:40px}.tag{font-size:14px}.image-section{padding:20px}.image-section .image-show{border-radius:8px}.carousel img,.carousel-reverse img{height:180px}.social-icon-mobile{display:flex;justify-content:center}.social-icon-mobile span{font-size:24px;margin:0 10px}.social-icon-mobile span a:hover{color:#aaa}}@media (max-width: 480px){.gallery-container{grid-template-columns:1fr}}