@import"https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{font-size:62.5%;--blue: #4C9DB0;--light-blue: #7BB8C7;--yellow: #FFEBAF;--heading-blue: #2C5F6B;--text-gray: #2C3E50;--cream: #FFF8E1;--white: #FFFFFF;--heading: "Inknut Antiqua", serif;--body: "Poppins", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif}body{font-family:var(--body);color:var(--text-gray);background-color:var(--cream)}h1,h2,h3,h4,h5,h6{font-family:var(--heading);color:var(--heading-blue)}p{font-family:var(--body);color:var(--text-gray)}.hero{min-height:100vh;background:linear-gradient(165deg,var(--blue) 0%,var(--light-blue) 80%);display:flex;flex-direction:column;align-items:start;justify-content:flex-start;position:relative}.hero:before,.hero:after{content:"";position:absolute;inset:0;background-repeat:repeat;pointer-events:none}.hero:before{background-image:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="20" cy="80" r="0.8" fill="%23ffffff" opacity="0.8"/> <circle cx="60" cy="50" r="1.0" fill="%23ffffff" opacity="0.6"/> <polygon points="40,20 41,22 43,22 41.5,23.5 42,25 40,24 38,25 38.5,23.5 37,22 39,22" fill="%23fff3cc" opacity="0.7"/> </svg>');animation:star-rise-fore 60s linear infinite;opacity:.5;background-size:280px 280px;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to top,#000 30%,#0000)}.hero:after{background-image:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="15" cy="70" r="0.6" fill="%23ffffff" opacity="0.4"/> <circle cx="80" cy="40" r="0.7" fill="%23fff3cc" opacity="0.35"/> </svg>');animation:star-rise-back 120s linear infinite;background-size:400px 400px;opacity:.65;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to top,#000 45%,#0000)}h1{color:var(--white);font-size:5rem;font-weight:700}p{color:var(--yellow);font-family:var(--heading);font-size:2rem;font-weight:600}.content{margin:5% 0 0 10%}.id{position:absolute;background-image:url(/assets/id_bg-D0T3g2C2.jpg);background:no-repeat cover;bottom:15%;right:5%;width:52rem;height:25rem;border:var(--yellow) .3rem solid;border-radius:1rem;box-shadow:0 0 20px #ffffff80;display:grid;grid-template-columns:1fr 2fr;align-items:stretch;box-sizing:border-box;transform-style:preserve-3d}.id .left-col{display:flex;align-items:center;justify-content:center;padding:1rem}.id .right-col{display:flex;flex-direction:column}.id p{color:var(--text-grey)!important}.id img{width:80%}.info-grid{display:grid;grid-template-columns:1fr 1fr}.info-grid .head{font-size:1.2rem}.info-grid .text{font-size:1.5rem}.id-icons{display:flex;gap:2rem}.line{position:absolute;bottom:0;left:0;background:var(--yellow);height:10%;width:100%}@keyframes star-rise-fore{0%{background-position:0 100%;opacity:.5;transform:translateZ(0)}to{background-position:0 0%;opacity:.2;transform:translateZ(0)}}@keyframes star-rise-back{0%{background-position:0 100%;opacity:.6;transform:translateZ(0)}to{background-position:0 0%;opacity:.1;transform:translateZ(0)}}@media (max-width: 600px){.content{margin:3% 1.5rem 0;text-align:center;width:calc(100% - 3rem);margin:10rem 0 20rem}h1{font-size:3rem;line-height:1.05}p{font-size:1.6rem}.id{bottom:0;left:50%;transform:translate(-50%);margin:4rem auto;max-width:400px;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:0;padding-bottom:.5rem;box-shadow:0 0 18px #ffffff26}.id .left-col{order:2;padding:1rem;align-items:center;justify-content:center}.id img{width:80%;height:auto;object-fit:cover;border-radius:.5rem}.id .right-col{order:1;padding:.8rem 1rem}.id .right-col .myname{font-size:1.5rem}.info-grid{display:grid;grid-template-columns:1fr;gap:.5rem}.info-grid .head{font-size:1rem}.info-grid .text{font-size:1.15rem}.id p{color:var(--text-grey)!important;font-size:1rem}.id-icons{gap:1rem}.id-icons svg{width:20px;height:20px}.line{height:6%}}@media (max-width: 400px){.id{width:360px;margin:2rem auto}}nav{background:transparent;margin-left:10%}ul{display:flex;flex-direction:row;gap:6rem}nav ul li{list-style:none}nav ul li a{list-style:none;font-family:var(--heading);font-weight:200;font-size:2rem;color:var(--yellow);text-decoration:none;position:relative}nav ul li a:after{content:"";position:absolute;left:0;bottom:-.1rem;width:0;height:.3rem;background-color:var(--yellow);transition:width .3s ease-in-out}nav ul li a:hover:after{width:100%}@media (max-width: 600px){nav{display:none}}.container{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:2rem}.left{position:relative}.star1,.star2,.smallstar1,.smallstar2,.smallstar3{position:absolute}.star1{top:5%;left:15%}.star2{top:0%;right:20%;width:9rem}.smallstar1{top:-8%;left:40%}.smallstar2{top:15%;left:47%}.smallstar3{top:35%;right:15%}.slider{overflow:hidden;position:relative;width:100%;height:80vh;padding-left:5rem;margin:0 auto}.slider img{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:50%;max-width:100%;object-fit:cover;object-position:center;opacity:0;animation:slide 3s ease-in-out infinite}.slider img:nth-child(1){animation-delay:0s}.slider img:nth-child(2){animation-delay:1s}.slider img:nth-child(3){animation-delay:2s}.slider:hover img{animation-play-state:paused}.right{display:flex;flex-direction:column;align-items:center;opacity:0}.right.visible{animation:fade-in 2s ease-out forwards}.right h2{font-size:4.5rem;font-weight:600;position:relative;margin-bottom:5rem}.right h2:after{content:"";position:absolute;left:20%;bottom:-.5rem;transform:translate(-50);width:15rem;height:.5rem;background-color:var(--yellow)}.right p{font-size:2rem;font-weight:300;font-family:var(--body);color:var(--text-dark)}.right button{font-family:var(--heading);font-size:2rem;background-color:var(--yellow);border:transparent;border-radius:1.5rem;padding:0rem 8rem;margin-top:5rem}.right button a{text-decoration:none;color:var(--blue)}@keyframes slide{0%{opacity:0}5%{opacity:1}30%{opacity:1}35%{opacity:0}to{opacity:0}}@media (max-width: 1024px){.container{grid-template-columns:2fr 3fr}.slider{padding-left:0}.slider img{width:45rem}.star1{top:35%;left:10%}.smallstar1{top:0%;left:10%}}@media (max-width: 600px){.container{grid-template-columns:1fr;padding:1rem;min-height:auto;margin-bottom:5rem}.left{order:0;margin:1.5rem 2rem}.right{order:1;padding:0 .25rem}.slider{height:50vh;padding-left:0}.slider img{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80%;max-width:420px;height:auto}.star1,.star2,.smallstar2,.smallstar3{display:none}.smallstar1{top:5%;left:50%;transform:translate(-50%);width:2.4rem}.right h2{font-size:2.2rem;margin-bottom:1.5rem}.right h2:after{width:8rem;height:.35rem;bottom:-.4rem}.right p{font-size:1.05rem;max-width:100%;padding:0 .5rem}.right button{font-size:1.4rem;padding:.6rem 2.2rem;border-radius:1rem;margin-top:1.5rem}}.skill-cont{background-color:var(--white);border-radius:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}.skill-cont h2{font-size:4.5rem;font-weight:600;position:relative;margin-bottom:2rem}.skill-cont h2:after{content:"";position:absolute;left:35%;bottom:-.5rem;transform:translate(-50);width:15rem;height:.5rem;background-color:var(--yellow)}.cards{display:grid;grid-template-columns:repeat(6,1fr);width:80%;padding:1rem;position:relative;transition:transform .15s ease-out}@media (max-width: 800px){.cards{grid-template-columns:repeat(4,1fr)}}@media (max-width: 600px){.cards{grid-template-columns:repeat(2,1fr)}.skill-cont h2{font-size:2.2rem}.skill-cont h2:after{left:20%}}.card-cont{position:relative;display:flex;align-items:center;justify-content:center;width:10rem;height:10rem;margin:1rem}.card-cont .bg{position:absolute;inset:0;z-index:0;object-fit:cover;width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}.scard{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}.circle{border-radius:50%;width:9rem;height:9rem;background-color:var(--yellow);display:flex;align-items:center;justify-content:center}.proj-cont{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:2rem 0 5rem;opacity:0}.proj-cont.visible{animation:fade-in 2s ease-out forwards}.proj-cont h2{font-size:4.5rem;font-weight:600;position:relative;margin-bottom:2rem}.proj-cont h2:after{content:"";position:absolute;left:20%;bottom:-.5rem;transform:translate(-50);width:15rem;height:.5rem;background-color:var(--yellow)}.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15rem}.proj-inner{position:relative;width:35rem;height:30rem;transition:transform .6s;transform-style:preserve-3d}.proj-card:hover .proj-inner{transform:rotateY(180deg)}.proj-front,.proj-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;padding:1rem;border-radius:1.5rem;border:var(--blue) .5rem solid}.proj-front{background-color:var(--white);width:100%;justify-content:space-between}.proj-front .name{font-size:1.8rem}.proj-front .type{color:var(--white);font-weight:500;font-style:var(--body);font-size:1.5rem}.type-cont{background-color:var(--blue);height:2rem;width:10rem;display:flex;justify-content:center;align-items:center;border-radius:10rem;position:absolute;top:25%;right:5%}.proj-front .summary{font-size:1.3rem}.proj-back{background-color:var(--yellow);transform:rotateY(180deg)}.proj-back h3{text-align:center;font-size:2rem}.proj-back button{position:absolute;bottom:3%;right:2%;padding:.1rem 2rem;border-radius:10rem;border:transparent .3rem solid;background-color:var(--blue)}.proj-back button:hover{transform:translateY(2px)}.proj-back a{text-decoration:none;color:var(--white);font-size:1.6rem}.tech-grid{display:grid;grid-template-columns:repeat(2,1fr)}.tech-grid p{color:var(--blue);font-family:var(--body);font-weight:600;font-size:1.5rem;padding:2rem}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1024px){.proj-cont{margin:2rem 0 4rem;width:90%}.proj-grid{grid-template-columns:repeat(2,1fr);gap:3rem;width:90%}.proj-inner{width:100%;height:28rem}.proj-front .name{font-size:1.6rem}.proj-front .type{font-size:1.3rem}.type-cont{width:8rem;height:1.8rem;font-size:1.1rem;top:2%;right:3%}.proj-front .summary{font-size:1.15rem}.proj-back h3{font-size:1.6rem}.proj-back button{padding:.2rem 1.5rem;font-size:1.1rem;bottom:2%;right:2%}.tech-grid{grid-template-columns:1fr;gap:.5rem}.tech-grid p{font-size:1.2rem;padding:.5rem 0}}@media (max-width: 600px){.proj-cont h2{font-size:2.5rem}.proj-cont h2:after{width:8rem;bottom:-.3rem}.proj-grid{grid-template-columns:1fr;gap:3rem;width:90%}.proj-inner{width:100%;height:auto}.proj-front,.proj-back{position:relative;width:100%;height:auto;transform:none;backface-visibility:visible;padding:1rem}.proj-card:hover .proj-inner{transform:none}.proj-front .name{font-size:1.5rem}.proj-front .type{font-size:1.2rem}.type-cont{height:1.5rem;width:8rem;font-size:1rem;top:5%;right:2%}.proj-front .summary{font-size:1.1rem}.proj-back h3{font-size:1.5rem}.proj-back button{bottom:2%;right:2%;padding:.3rem 1.5rem;font-size:1rem}.tech-grid{grid-template-columns:1fr;gap:.5rem}.tech-grid p{font-size:1.2rem;padding:.5rem 0}}.footer{height:25vh;background-color:var(--blue);padding:1rem}.foot-cont{display:flex;justify-content:space-between;margin:0 1.5rem}h4{font-size:2rem;color:var(--white);font-weight:400}.foot-sum,.navi,.links{width:25rem}.foot-sum p{font-size:1.3rem;font-weight:400;font-family:var(--body)}.navi-grid{display:flex;flex-direction:column;gap:.5rem;width:40rem}.navi-grid li{font-size:1.3rem;list-style:none}.navi-grid li a{color:var(--yellow);text-decoration:none}.navi-grid li a:hover{text-decoration:underline}.icons{display:flex;gap:2rem}@media (max-width: 600px){.footer{height:auto;padding:1rem}.foot-cont{flex-direction:column;align-items:center;justify-content:center;margin:.5rem;gap:1.5rem}.foot-sum,.navi,.links{width:100%;text-align:center}.foot-sum p{font-size:1rem}h4{font-size:1.2rem}.navi-grid{width:100%;gap:.5rem}.navi-grid li{font-size:1rem}.icons{justify-content:center;gap:1rem}}