@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Oswald:wght@200..700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;scroll-behavior:smooth;font-family:"Oswald",sans-serif}

:root{
  --white-color:#fff;
  --navy-color:#176B87;
  --mint-color:#64CCC5;
  --darkblue-color:#001C30;
}

html{font-size:62.5%;overflow-x:hidden}
body{background:var(--white-color);color:var(--darkblue-color)}
section{min-height:100vh;padding:10rem 9% 2rem}

/* Header */
.header{
    position:fixed;inset-block-start:0;inset-inline:0;
    z-index:1000;display:flex;align-items:center;justify-content:space-between;
    padding:2rem 5%;background:var(--darkblue-color);backdrop-filter:blur(10px);
    transition:all .5s ease;
}
.logo{font-size:3rem;color:var(--white-color);font-weight:700;cursor:pointer;transition:.3s}
.logo:hover{transform:scale(1.05)}

.navbar{display:flex;gap:4rem}
.navbar a{font-size:1.9rem;color:var(--white-color);font-weight:700;transition:.3s}
.navbar a:hover,.navbar a.active{color:var(--mint-color)}

.menu-toggle{
    display:none;
    background:transparent;border:0;color:#fff;cursor:pointer;
    font-size:3.2rem;line-height:1;padding:.4rem;border-radius:.8rem;
}   
.menu-toggle:focus-visible{outline:2px dashed var(--mint-color);outline-offset:4px}

/* Home */
.home{display:flex;justify-content:center;align-items:center;gap:5rem}
.home-img img{
    width:25vw;border-radius:50%;box-shadow:0 0 25px var(--darkblue-color);
    cursor:pointer;animation:floatImage 4s ease-in-out infinite;transition:.4s
}
.home-img img:hover{
    box-shadow:0 0 25px var(--darkblue-color),0 0 35px var(--darkblue-color),0 0 45px var(--darkblue-color)
}
@keyframes floatImage{0%{transform:translateY(0)}50%{transform:translateY(-2.4rem)}100%{transform:translateY(0)}}

.home-content{max-width:700px}
.home-content h3{font-size:3.7rem;font-weight:700}
span{color:var(--mint-color)}
.home-content h1{font-size:6rem;font-weight:700;line-height:1.2}
.home-content p{font-size:1.6rem}

.social-media a{
    display:inline-flex;justify-content:center;align-items:center;
    width:42px;height:42px;background:transparent;border:.2rem solid var(--darkblue-color);
    border-radius:50%;font-size:2rem;color:var(--darkblue-color);margin:3rem 1.5rem 3rem 0;transition:.3s
}
.social-media a:hover{transform:scale(1.2) translateY(-10px);background:var(--darkblue-color);color:#fff;box-shadow:0 0 25px var(--navy-color)}
.btn{display:inline-block;padding:1rem 2.8rem;background:var(--darkblue-color);border-radius:4rem;font-size:1.6rem;color:#fff;letter-spacing:.1rem;font-weight:600;transition:.3s}
.btn:hover{box-shadow:0 0 1.6rem var(--navy-color)}

/* About */
.about{display:flex;align-items:center;justify-content:center;gap:4rem;background:var(--white-color)}
.about-img img{width:25vw;min-width:240px;border-radius:50%;box-shadow:0 0 25px var(--darkblue-color);cursor:pointer;transition:.4s}
.about-img img:hover{box-shadow:0 0 25px var(--darkblue-color),0 0 35px var(--darkblue-color),0 0 45px var(--darkblue-color)}
.heading{font-size:6rem;text-align:left}
.about-content{padding:0 0}
.about-content h2{text-align:left;line-height:1.2}
.about-content h3{font-size:3rem}
.about-content p{font-size:1.6rem;margin:2rem 0 3rem}

.about-softskills { display: flex; justify-content: left; flex-wrap: wrap; gap: 3rem; margin: 0 0 0 1rem; }
.about-softskills a { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin: 5rem 0 3rem 0; }
.about-softskills a i {
    display: inline-flex;
    justify-content: center;
    align-items: center; width: 42px;
    height: 42px;
    background: transparent;
    border: 0.2rem solid var(--darkblue-color);
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    margin: -1rem;
    transition: 0.3s ease; }
    .about-softskills a i:hover {
        transform: scale(1.2) translateY(-10px);
        background-color: var(--darkblue-color);
        color: var(--white-color);
        box-shadow: 0 0 25px var(--darkblue-color);
    }
    .about-softskills a .icon-title {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(50px);
        opacity: 0;
        visibility: hidden;
        font-size: 2rem;
        font-weight: 500;
        align-items: center;
        justify-content: center;
        margin: 0 0 3rem 0;
        color: var(--main-color);
        white-space: nowrap;
        transition: opacity 0.3s ease,
        transform 0.3s ease; pointer-events: none;
    }
.about-softskills a:hover .icon-title { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Skills */
.skills{background:var(--white-color)}
.skills-box{display:flex;flex-direction:column;align-items:center}
.skills .heading{margin-bottom:5rem}
.skills-box img{width:10rem}

.wrapper{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:3rem
}
.skills-item{
    min-height:200px;max-width:220px;width:100%;
    box-shadow:0 0 10px var(--darkblue-color);background:#fff;border-radius:2rem;
    margin:0 auto;padding:20px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;
    color:var(--darkblue-color);transition:.3s
}
.skills-item:hover{box-shadow:0 0 30px var(--darkblue-color);transform:scale(1.02)}
.skills-item h2{font-size:2rem}
.skills-item p{font-size:1.5rem;text-align:center}
#star{color:gold;font-size:2rem}
#none-star{color:gainsboro;font-size:2rem}

/* Projects */
.projects h2{text-align:center;margin-bottom:5rem}
.projects-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem
}
.projects-container .projects-box{
    background:#fff;padding:6rem 2rem;border-radius:2rem;text-align:center;border:.3rem solid var(--darkblue-color);
    transition:.3s
}
.projects-container .projects-box:hover{box-shadow:0 0 20px var(--darkblue-color);transform:scale(1.02)}
.projects-box i{font-size:7rem;color:var(--darkblue-color)}
.projects-box h3{font-size:2.6rem}
.projects-box p{font-size:1.6rem;margin:1rem 0 1rem}

/* ---------------------- Responsive ---------------------- */
/* <= 1200px */
@media (max-width:1200px){
    html{font-size:58%}
    .wrapper{grid-template-columns:repeat(4,1fr)}
    .projects-container{grid-template-columns:repeat(2,1fr)}
}

/* <= 992px (Tablet) */
@media (max-width:992px) {
    .header{padding:2rem 3%}
    section{padding:10rem 4% 2rem}

    .home{flex-direction:column;gap:3rem;text-align:center}
    .home-img img{width:45vw;max-width:360px}
    .home-content{max-width:800px}
    
    /* About: ซ้อนกันบนมือถือ */
    .about{flex-direction:column-reverse;text-align:center}
    .about-img img{width:45vw;max-width:360px}
    .heading{text-align:center}

    /* Skills */
    .wrapper{grid-template-columns:repeat(2,1fr)}
    .skills-item{max-width:100%}

    /* Projects */
    .projects-container{grid-template-columns:repeat(2,1fr)}
}

/* <= 768px (Large Mobile) */
@media (max-width:768px) {
    html{font-size:55%}

    /* Hamburger on */
    .menu-toggle{display:block}
    .navbar{
        position:fixed;top:72px;right:-100%;
        width:min(85vw,320px);height:calc(100vh - 72px);
        background:var(--darkblue-color);
        display:flex;flex-direction:column;gap:0;
        padding:1.2rem 0;
        transition:transform .4s ease,right .4s ease;
    }
    .navbar a{display:block;padding:1.6rem 2rem;font-size:2.2rem;color:#fff}
    .navbar.active{right:0}

    /* Skills grid 2 คอลัมน์ */
    .wrapper{grid-template-columns:repeat(2,1fr)}
    .projects-container{grid-template-columns:1fr}
}