/*
備註
light背景主題色：rgb(245, 252, 255)
dark背景主題色：rgb(11, 11, 11)
light背景漸層色1：rgb(213, 235, 255), rgb(235, 243, 255)
light背景漸層色2：rgb(213, 235, 255), rgb(245, 252, 255)
dark背景漸層色1：rgb(5,5,5), rgb(27, 27, 27)
dark背景漸層色2：rgb(5,5,5), rgb(11, 11, 11)
粉紅色：rgb(255, 0, 123)
*/

/*全局樣式*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;         
    font-size: 14px;
    letter-spacing:7px;
    border:none;
    user-select: none;
}
/*變數在這裡*/
:root{
    --transition-duration: 0.5s;
    --basic-size: 5px;
    --basic-text-color: black;
    --filter: invert(0);
    --background:rgb(245, 252, 255);
    --gradient-background:rgb(213, 235, 255), rgb(235, 243, 255);
    --gradient-background-2:rgb(213, 235, 255), rgb(245, 252, 255);
}

/*scrollbar樣式*/
::-webkit-scrollbar{
    height: 100%;
    width: 10px;
}
::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background-color:rgb(212, 212, 212);
}
::-webkit-scrollbar-thumb:hover{
    background-color:rgb(186, 186, 186);
}

::-webkit-scrollbar-track{
    background-color: grey;
}

/*html樣式*/
html{
    scroll-behavior: smooth;
}
/*body樣式*/
body{
    overflow-x: hidden;
    background-color: var(--background);
    transition: background-color 0.3s ease;
}

/*頁首*/
header{
    position: fixed;
    top:0;
    height: auto;
    width: 100vw;
    display: flex;
    gap:10rem;
    padding:1rem 2rem;
    align-items: center;
    justify-content: flex-start;
    z-index: 100;
    transform: translateY(-20vh);
    transition: 1s ease-in-out;
    transition-delay: 2.5s;
    opacity: 0;
    backdrop-filter: blur(10px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px); /* 支援 Safari */
}
/*logo在這*/
.logo{
    place-content: center;
}
.logo>a{
    flex:0;
    width: 100%;
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(4,1fr);
    gap:calc(var(--basic-size)*2);
}
.logo div{
    width: calc(var(--basic-size)*4);
    aspect-ratio: 1;
    background-color: var(--basic-text-color);
}
.cap-h{
    clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 100%, 50% 50%, 0% 100%);
}
.cap-a{
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%)
}
.cap-n{
    clip-path: polygon(0% 0%, 65% 100%, 65% 0%, 100% 0%, 100% 100%, 65% 100%, 0% 100%)
}
.cap-k{
    clip-path: polygon(0% 0%, 35% 0%, 35% 50%, 100% 0%, 100% 100%, 35% 50%, 35% 100%, 0% 100%)
}

/*頁首導航區*/
.header-nav{
    flex: 1;
}
.header-nav>ul{
    width: 100%;
    padding:0 10rem;
    display: flex;
    align-content: center;
    list-style: none;
    align-items: center;
    justify-content: center;
}

.header-nav>ul li{
    position: relative;
    text-align: center;
    flex: 1;
    width: auto;
    color: var(--basic-text-color);
    white-space: nowrap;
}

.header-nav>ul li a{
    text-decoration: none;
    color: inherit;
}

.header-nav li::before{
    content: '';
    position: absolute;
    bottom:-10px;
    left:0;
    width: 100%;
    height: 0.2rem;
    background-color: rgb(255, 0, 123);
    transform: scaleX(0%);
    transition: 0.5s ease;
}

.header-nav li:hover{
    color:rgb(255, 0, 123);
}
.header-nav li:hover::before{
    transform: scaleX(100%);
}

/*CTA樣式*/
.contact-me{
    cursor: pointer;
    position: relative;
    width: 10rem;
    height: 3rem;
    border-radius: 2rem;
    border: none;
    background-color: rgb(0, 136, 255);
    color: white;
    overflow: hidden;
}
.contact-me::before{
    content: '';
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/paper plane.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(0, 81, 255);
    transform: translateX(-100%);
    transition: 0.3s ease-in-out;
}
.contact-me:hover::before{
    transform: translateX(0%);
}

main{
    height: 100vh;
    width: 100vw;
    position: relative;
}
.greet{
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 15rem 10rem;
    color:var(--basic-text-color);
}
.greet h1{
    font-size: calc(var(--basic-size)*16);
}
.greet h3{
    font-size: calc(var(--basic-size)*5.5);
    font-weight: normal;
    white-space: nowrap;
}

.social{
    width: 50%;
    position: absolute;
    z-index: 11;
    bottom: 0;
    padding: 2rem;
    display: -webkit-flex;
    display: flex;
    gap:1rem;
    transform: translateY(20vh);
    transition: 1s ease-in-out;
    transition-delay: 3s;
    opacity: 0;
}
.button-container{
    width: auto;
    height: auto;
}
.social>button{
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    position: relative;
    background-color: lightgrey;
    transition: 0.5s ease-in-out;
    border: none;
}
@property --fill {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}
.social>button:hover{
    background-color: rgb(255, 0, 123);
    --fill: 100%;
}
.social>button::after{
    content: '';
    width: 3.5rem;
    height: 3.5rem;
    border-radius: inherit;
    position: absolute;
    z-index: -1;
    top:50%;
    left:50%;
    translate: -50% -50%;
    background: conic-gradient(rgb(255, 0, 123)var(--fill), transparent var(--fill));
    transition: --fill 0.6s ease-in-out;
}
.linkedin::before{
        content: '';
        width: inherit;
        height: inherit;
        border-radius: inherit;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-image: url('/images/linkedin.png');
        background-position: center;
        background-size: cover;
        filter: var(--filter);
}
.github::before{
        content: '';
        width: inherit;
        height: inherit;
        border-radius: inherit;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-image: url('/images/github.png');
        background-position: center;
        background-size: cover;
        filter: var(--filter);
}

/*區域導航樣式*/
.start{
    z-index:10;
    height: 5vh;
    position: absolute;
    width: 100%;
    bottom:0;
    display: grid;
    justify-content: center;
}
.start-circle{
    cursor: pointer;
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-0.5rem);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--basic-text-color);
    animation: circleBreath 1s infinite;
}
.start-line{
    width: calc(var(--basic-size)/2);
    height: 100%;
    background-color: var(--basic-text-color);
}

.start-circle::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--basic-text-color);
    transform: translate(-50%, -50%);
    animation: pulseEffect 2s ease-out infinite;
}

@keyframes pulseEffect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/*首頁3D模型*/
#main-spline-viewer{
    position: relative;
    height: 100%;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

/*載入畫面*/
#spline-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 999;
  }
  .spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

/*主題選擇按鈕*/
  .theme-selector{
    flex-shrink: 0;
    width: calc(10 * var(--basic-size));
    height: calc(6 * var(--basic-size));
    border-radius: calc(5 * var(--basic-size));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-duration) ease;
    cursor: pointer;
}
.light-theme-color{
    background-color: rgb(69, 171, 255);
}
.dark-theme-color{
    background-color: rgb(42, 60, 139);
}
.circle{
    width: calc(4 * var(--basic-size));
    height: calc(4 * var(--basic-size));
    border-radius: 50%;
    position: absolute;
    transition: transform var(--transition-duration) ease;
    left: calc(1 * var(--basic-size));
}
.sun{
    background-color: rgb(255, 255, 157);
    box-shadow: 0 0 calc(0.5 * var(--basic-size)) rgb(255, 255, 157);
}
.moon{
    background-color: rgb(238, 238, 238);
    box-shadow: 0 0 calc(0.5 * var(--basic-size)) rgb(217, 217, 217);
    transform-origin: center;
    transform: translateX(calc(4 * var(--basic-size))) rotate(180deg);
}
.moon-hole1, .moon-hole2, .moon-hole3{
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--transition-duration) ease;
    background-color: rgb(208, 208, 208);
}
.moon-hole1{
    top: calc(1 * var(--basic-size));
    left: calc(1 * var(--basic-size));
    width: calc(0.5 * var(--basic-size));
    height: calc(0.5 * var(--basic-size));
}
.moon-hole2{
    top: calc(3 * var(--basic-size));
    right: calc(1 * var(--basic-size));
    width: calc(0.5 * var(--basic-size));
    height: calc(0.5 * var(--basic-size));
}
.moon-hole3{
    width: calc(1.25 * var(--basic-size));
    height: calc(1.25 * var(--basic-size));
    top: calc(1 * var(--basic-size));
    left: calc(2 * var(--basic-size));
}
.cloud1-1, .cloud2-1, .cloud2-2, .cloud3-1, .cloud3-2{
    position: absolute;
    border-radius: 50%;
    background-color: rgb(224, 241, 255);
    transition: var(--transition-duration) ease;
}
.cloud1-1{
    top: calc(3 * var(--basic-size));
    right: calc(-1 * var(--basic-size));
    height: calc(3 * var(--basic-size));
    width: calc(3 * var(--basic-size));
}
.cloud2-1{
    top: calc(2.5 * var(--basic-size));
    right: calc(0.5 * var(--basic-size));
    height: calc(4 * var(--basic-size));
    width: calc(4 * var(--basic-size));
}
.cloud2-2{
    top: calc(4 * var(--basic-size));
    right: calc(2.5 * var(--basic-size));
    height: calc(3 * var(--basic-size));
    width: calc(3 * var(--basic-size));
}
.cloud3-1{
    background-color: rgb(139, 155, 200);
    height: calc(3 * var(--basic-size));
    width: calc(3 * var(--basic-size));
    top: calc(10 * var(--basic-size));
}
.cloud3-2{
    background-color: rgb(139, 155, 200);
    height: calc(2 * var(--basic-size));
    width: calc(2 * var(--basic-size));
    top: calc(10 * var(--basic-size));
}
.star1, .star2{
    position: absolute;
    width: calc(1 * var(--basic-size));
    height: calc(1 * var(--basic-size));
    background-color: rgb(146, 141, 183);
    clip-path: polygon(
        50% 0%,
        60% 40%,
        100% 50%,
        60% 60%,
        50% 100%,
        40% 60%,
        0% 50%,
        40% 40%
    );
    opacity: 0;
    transition: opacity var(--transition-duration) ease;
}
.star1{
    top: calc(1 * var(--basic-size));
    left: calc(2 * var(--basic-size));
}
.star2{
    top: calc(3 * var(--basic-size));
    left: calc(3 * var(--basic-size));
}

/*關於我段落*/
.about-me{
    height: 100vh;
    width: 100vw;
    background:linear-gradient(0deg, var(--gradient-background));
    position: relative;
    overflow: hidden;
    display: grid;
    transition: border-radius 0.3s ease-in-out;
    grid-template-columns: 1fr 3fr;
    align-content: center;
    padding: 10vh 10vw;
    column-gap: 5vw;
}
.photo-container{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.avatar{
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: url('/images/me1.jpg');
    background-position: center;
    background-size: cover;
}

.avatar::before{
    content: '';
    width: calc(var(--basic-size)*5);
    height: calc(var(--basic-size)*5);
    position: absolute;
    clip-path: polygon(35% 35%, 50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%);
    background-color: var(--basic-text-color);
    top: calc(var(--basic-size)*5);
    left: calc(var(--basic-size)*2.5);
    transition: 0.1s ease-in;
    transform: rotate(0deg)
        scale(0);
}

.avatar::after{
    content: '';
    width: calc(var(--basic-size)*5);
    height: calc(var(--basic-size)*5);
    position: absolute;
    clip-path: polygon(35% 35%, 50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%);
    background-color: var(--basic-text-color);
    bottom: calc(var(--basic-size)*5);
    right: calc(var(--basic-size)*7.5);
    transition: 0.1s ease-in;
    transform: rotate(0deg)
        scale(0);
}

.avatar:hover::before{
    animation: star-rotate 3s infinite;
    top: calc(var(--basic-size)*-2.5);
    left: calc(var(--basic-size)*-2.5);
}

.avatar:hover::after{
    animation: star-rotate 3s infinite;
    bottom: calc(var(--basic-size)*-1.75);
    right: calc(var(--basic-size)*-2);
}

@keyframes star-rotate{
    0%{
        transform: rotate(360deg) scale(1);
    }
    100%{
        transform: rotate(0) scale(1);
    }
}

.about-me-paragraph{
    position: relative;
    z-index: 3;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding:15vh 5vw;
    color:var(--basic-text-color);
}

.about-me-paragraph h2{
    font-size:  calc(var(--basic-size)*8.5);
    height: auto;
}
.about-me-paragraph h3{
    font-size: calc(var(--basic-size)*5);
    height: auto;
}
.about-me-paragraph p{
    font-size: calc(var(--basic-size)*3);
    height: auto;
    text-align: start;
    letter-spacing: calc(var(--basic-size)*1.5);
    line-height: calc(var(--basic-size)*5.5);
    padding-top: calc(var(--basic-size)*5);
}

.icons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.icon {
    position: absolute;
    width: 50px;
    aspect-ratio: 1;
    background-size: contain;
    background-repeat: no-repeat;
    filter:saturate(0) opacity(0.5);
    transition: transform 3s ease-in-out;
}

.icon1{
    background-image: url(/images/html.png);
}
.icon2{
    background-image: url(/images/CSS.png);
}
.icon3{
    background-image: url(/images/javascript.png);
}
.icon4{
    background-image: url(/images/jquery.png);
}
.icon5{
    background-image: url(/images/vue.png);
}
.icon6{
    background-image: url(/images/bootstrap.png);
}
.icon7{
    background-image: url(/images/wordpress.png);
}
.icon8{
    background-image: url(/images/figma.png);
}
.icon9{
    background-image: url(/images/git.png);
}
.icon9{
    background-image: url(/images/SASS.png);
}

/* .game-mode{
    cursor: pointer;
    color: var(--basic-text-color);
    position: absolute;
    bottom: 5vh;
    right:0;
    width: 5vw;
    aspect-ratio: 1;
    background-color: red;
    border-radius: 2vh;
    transition: 0.5s;
    z-index: 100;
    transform: translateX(4vw);
}
.game-mode:hover{
    transform: translateX(0);
}

#crosshair{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 3;
} */

/*作品展示區*/
.figure-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
    padding: 15vh 10vw 10vh 10vw;
    column-gap:calc(var(--basic-size)*6.5);
    color: var(--basic-text-color);
    background: linear-gradient(180deg, var(--gradient-background-2));
}

.figure-container h2 {
    grid-column: span 3;
    font-size: calc(var(--basic-size)*8.5);
}

.work {
    background: linear-gradient(180deg, var(--gradient-background));
    position: relative;
    width: 100%;
    border-radius: calc(var(--basic-size) * 6);
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    padding-top: calc(var(--basic-size) * 6.5);
    overflow: hidden;
    text-decoration: none;
    color: var(--basic-text-color);
    /*初始狀態*/
    opacity: 0;
    transform: translateY(50px);
}

/*進入視口的動畫*/
.work-visible {
    animation: fadeInMove 0.6s ease-out forwards;
}

.work1 { animation-delay: 0.3s; }
.work2 { animation-delay: 0.6s; }
.work3 { animation-delay: 0.9s; }

@keyframes fadeInMove {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.work::before {
    z-index: 3;
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.work:hover::before {
    opacity: 1;
    animation: glass-swipe 3s ease-in-out infinite;
}

@keyframes glass-swipe {
    0% {
        left: -200%;
    }
    100% {
        left: 200%;
    }
}

.figure-img {
    width: calc(var(--basic-size)*32);
    height: calc(var(--basic-size)*32);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: var(--filter);
}

.figure-game {
    background-image: url('/images/controller.png');
}

.figure-web {
    background-image: url('/images/code.png');
}

.figure-digital {
    background-image: url('/images/paint.png');
}

figcaption {
    text-align: center;
}

figcaption h3 {
    font-size: calc(var(--basic-size)*5);
    padding-bottom: 1rem;
}

figcaption p {
    font-size: calc(var(--basic-size)*2.5);
    opacity: 0.5;
}

.hidden-figcation {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 50%;
    bottom: -50%;
    transition: 0.5s ease;
    background: var(--background);
    color: var(--basic-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(var(--basic-size)*2.5);
    padding: calc(var(--basic-size)*2.5);
    pointer-events: none;
}

.work:hover .hidden-figcation {
    bottom: 0;
    transform: translateY(0);
}

@property --skill-percent {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

/*技能展示區*/
.skills{
    position: relative;
    height: auto;
    width: 100vw;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    color:var(--basic-text-color);
    padding: 15vh 10vw 10vh 10vw;
    column-gap:  calc(var(--basic-size)*2.5);
    row-gap:  calc(var(--basic-size)*10);
    align-content: center;
    justify-items: center;
}
.skills h2{
    font-size:  calc(var(--basic-size)*8.5);
    grid-column: span 4;
    text-align: center;
}

.skill{
    background-color: var(--background);
    position: relative;
    height: calc(var(--basic-size)*35);
    width: calc(var(--basic-size)*35);
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 50%;
    align-content: center;
    justify-items: center;
    gap:calc(var(--basic-size)*5);
}
.skill img{
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}
.skill figcaption{
    font-size: calc(var(--basic-size)*2.5);
    letter-spacing: calc(var(--basic-size)*0.5);
}

/*技能熟悉度*/
/*HTML*/
.skill1:hover{
    --skill-percent:90%;
}
/*CSS*/
.skill2:hover{
    --skill-percent:80%;
}
/*Sass*/
.skill3:hover{
    --skill-percent:70%;
}
/*JS*/
.skill4:hover{
    --skill-percent:80%;
}
/*JQ*/
.skill5:hover{
    --skill-percent:80%;
}
/*Vue*/
.skill6:hover{
    --skill-percent:60%;
}
/*Bootstrap*/
.skill7:hover{
    --skill-percent:50%;
}
/*WP*/
.skill8:hover{
    --skill-percent:50%;
}
/*Git*/
.skill9:hover{
    --skill-percent:50%;
}
/*Figma*/
.skill10:hover{
    --skill-percent:60%;
}
/*Spline*/
.skill11:hover{
    --skill-percent:60%;
}
/*AI*/
.skill12:hover{
    --skill-percent:90%;
}

.skill::before{
    content: '';
    width: calc(var(--basic-size)*40);
    height: calc(var(--basic-size)*40);
    border-radius: inherit;
    position: absolute;
    z-index: -1;
    top:50%;
    left:50%;
    translate: -50% -50%;
    background: conic-gradient(rgb(255, 0, 123)var(--skill-percent), transparent var(--skill-percent));
    transition: --skill-percent 0.6s ease-in-out;
}

/*頁尾*/
footer{
    height:20vh;
    width: 100vw;
    padding: 1vh 10vw;
    background-color: rgb(34, 34, 34);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:calc(var(--basic-size)*2.5)
}

footer p{
    opacity: 0.5;
    font-size: calc(var(--basic-size)*2.5);
    letter-spacing: calc(var(--basic-size)*0.5);
    line-height: calc(var(--basic-size)*3.5);
    text-align: center;
    font-weight: normal;
}

/*行動裝置 Hamburger Menu*/
.hamburger-menu {
    display: none;
    position: fixed;
    top: 1rem;
    right: 2rem;
    cursor: pointer;
    width: 5rem;
    height: 5rem;
    background-color: transparent;
    transition: 0.3s ease;
    border-radius: 10%;
    z-index: 1000;
}
.hamburger-menu div {
    height: 0.1rem;
    width: 2.5rem;
    background-color: var(--basic-text-color);
    position: absolute;
    top: 2.45rem;
    left: 1.25rem;
}
.hamburger-menu-toggle{
    background-color: var(--basic-text-color);
}
.bar1 {
    transform: translateY(-1rem);
    transition: 0.3s ease;
}
.bar2 {
    transition: 0.1s ease;
}
.bar3 {
    transform: translateY(1rem);
    transition: 0.3s ease;
}
.hamburger-menu div.bar1-click {
    background-color: var(--background);
    transform: translateY(0) rotate(45deg);
}
.bar2-click {
    transform: scale(0%);
}
.hamburger-menu div.bar3-click {
    background-color: var(--background);
    transform: translateY(0) rotate(-45deg);
}
.hamburger-nav{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 10rem;
    background-color: var(--background);
    color:var(--basic-text-color);
    z-index: 100;
    transition: 0.5s ease;
    transform: translateY(-100%);
    opacity: 0;
    box-shadow: 0px 0px 10px black;
}
.hamburger-nav ul{
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    list-style: none;
    display: grid;
    padding:0.5rem;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
}
.hamburger-nav li{
    width: auto;
    padding: 0;
}
.hamburger-nav li:hover{
    color: rgb(255, 0, 123);
}
.hamburger-nav ul li a{
    text-decoration: none;
    color: inherit
}
.hamburger-nav-toggle{
    transform: translateY(0%);
    opacity: 1;
}

/* 響應式斷點 1024px */
@media(max-width: 1024px) {
    body {
        width: 100dvw;
    }
    header {
        width: 100%;
        height: 10%;
    }
    main {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
    }
    .social {
        width: 100%;
    }
    .header-nav > ul {
        padding: 0 5rem;
    }
    .greet {
        padding: 10rem;
    }
    .greet h1 {
        font-size: calc(var(--basic-size) * 10);
    }
    .greet h3 {
        font-size: calc(var(--basic-size) * 4);
        font-weight: normal;
    }
    .start {
        display: none;
    }
    .about-me {
        width: 100%;
        max-width: 100%;
        height: auto;
        grid-template-columns: 1fr;
        padding: 5vh 5vw; /* 新增 padding 避免文字太貼近 */
    }
    .avatar {
        width: 50%;
        aspect-ratio: 1;
    }
    .about-me-paragraph {
        height: auto;
    }
    .figure-container h2 {
        grid-column: 1;
    }
    .figure-container {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--basic-size) * 5);
        padding: 5vh 5vw;
    }
    .work {
        width: 80vw;
        max-width: 80vw;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: calc(var(--basic-size) * 4);
        border-radius: calc(var(--basic-size) * 3);
        background: linear-gradient(180deg, var(--gradient-background));
    }
    .figure-img {
        width: 50%;
        max-height: 50%;
        aspect-ratio: 1;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    figcaption {
        font-size: calc(var(--basic-size) * 4);
        padding-top: calc(var(--basic-size) * 2);
    }
    .skills {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2,1fr) !important;
    }
    .skills h2 {
        grid-column: span 2;
    }
}

/* 響應式斷點 768px */
@media (max-width: 768px) {
    :root {
        --basic-size: 4.5px;
    }
    body {
        width: 100vw;
        overflow-x: hidden;
    }
    .start {
        display: none;
    }
    header {
        width: 100%;
        max-width: 100%;
        height: 10%;
        gap: 1.5rem;
    }
    .header-nav {
        display: none;
    }
    main {
        width: 100%;
        max-width: 100%;
    }
    .social {
        width: 100%;
    }
    #main-spline-viewer{
        display: none;
    }
    .greet {
        padding: 10rem 2.5rem;
    }
    .greet h1 {
        font-size: calc(var(--basic-size) * 5);
    }
    .greet h3 {
        font-size: calc(var(--basic-size) * 5);
        font-weight: normal;
    }
    .about-me {
        width: 100%;
        padding: 5vh 5vw; /* 新增 padding 避免內容過擠 */
    }
    .skills {
        width: 100vw !important;
        max-width: 100%;
        height: auto;
        grid-template-columns: repeat(2,1fr) !important;
    }
    .skill h2 {
        grid-column: span 2;
    }
    .work {
        max-width: 90vw; /* 避免超出小螢幕 */
    }
    footer {
        width: 100%;
        height: 30vh;
    }
    .hamburger-menu {
        display: block;
    }
}

/* 響應式斷點 480px */
@media (max-width: 480px) {
    body {
        width: 100dvw;
        overflow-x: hidden;
    }
    header{
        width: 100%;
        overflow-x: hidden;
    }
    .header-nav {
        display: none;
    }
    main {
        width: 100%;
        max-width: 100%;
    }
    .greet {
        padding:  10rem 1rem;
    }
    .greet h1 {
        font-size: calc(var(--basic-size) * 5);
    }
    .greet h3 {
        font-size: calc(var(--basic-size) * 4); /* 調整字體大小 */
        font-weight: normal;
    }
    .social {
        width: 100%;
    }
    .about-me {
        width: 100%;
        padding: 5vh 5vw; /* 增加 padding 讓內容更易讀 */
    }
    .about-me-paragraph p {
        letter-spacing: calc(var(--basic-size) * 1);
    }
    .skills {
        width: 100% !important;
        max-width: 100%;
        height: auto;
        grid-template-columns: 1fr !important;
    }
    .skill h2 {
        grid-column: span 1;
    }
    .work {
        max-width: 90vw; /* 確保不超出小螢幕 */
    }
    footer{
        width: 100%;
    }
}