diff --git a/A_star.gif b/A_star.gif
new file mode 100644
index 000000000..dd08b4f80
Binary files /dev/null and b/A_star.gif differ
diff --git a/CNAME b/CNAME
deleted file mode 100644
index 360fbed5c..000000000
--- a/CNAME
+++ /dev/null
@@ -1 +0,0 @@
-stanleychueh.com
\ No newline at end of file
diff --git a/Hybrid_a_star.gif b/Hybrid_a_star.gif
new file mode 100644
index 000000000..3577adab5
Binary files /dev/null and b/Hybrid_a_star.gif differ
diff --git a/asset-manifest.json b/asset-manifest.json
index 074f9d9b9..c9012636a 100644
--- a/asset-manifest.json
+++ b/asset-manifest.json
@@ -1,15 +1,15 @@
{
"files": {
- "main.css": "/static/css/main.cc719a99.css",
- "main.js": "/static/js/main.9d1877c9.js",
+ "main.css": "/static/css/main.9c8bd7ce.css",
+ "main.js": "/static/js/main.f5b29c60.js",
"static/js/453.362c3327.chunk.js": "/static/js/453.362c3327.chunk.js",
"index.html": "/index.html",
- "main.cc719a99.css.map": "/static/css/main.cc719a99.css.map",
- "main.9d1877c9.js.map": "/static/js/main.9d1877c9.js.map",
+ "main.9c8bd7ce.css.map": "/static/css/main.9c8bd7ce.css.map",
+ "main.f5b29c60.js.map": "/static/js/main.f5b29c60.js.map",
"453.362c3327.chunk.js.map": "/static/js/453.362c3327.chunk.js.map"
},
"entrypoints": [
- "static/css/main.cc719a99.css",
- "static/js/main.9d1877c9.js"
+ "static/css/main.9c8bd7ce.css",
+ "static/js/main.f5b29c60.js"
]
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 62223770c..07cae8d6c 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-Stanley Chueh Portfolio
\ No newline at end of file
+Stanley Chueh Portfolio
\ No newline at end of file
diff --git a/static/css/main.cc719a99.css b/static/css/main.9c8bd7ce.css
similarity index 88%
rename from static/css/main.cc719a99.css
rename to static/css/main.9c8bd7ce.css
index 428767a5f..55051ef05 100644
--- a/static/css/main.cc719a99.css
+++ b/static/css/main.9c8bd7ce.css
@@ -1,2 +1,2 @@
-*{box-sizing:border-box;margin:0;padding:0}body,html{height:auto;min-height:100vh;overflow-x:hidden}section{box-sizing:border-box;padding:50px 20px}h1,h2,h3,h4,h5,h6,p{word-wrap:break-word;line-height:1.5;margin:0}.navbar{align-items:center;background-color:#111;display:flex;justify-content:space-between;padding:15px 10px;position:fixed;top:0;width:100%;z-index:1000}.sc-logo{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#ffc107,#ff5722);-webkit-background-clip:text;cursor:pointer;font-size:1.2rem;font-weight:700}.nav-links{display:flex;gap:20px;list-style:none;margin:0;padding:0}.nav-links li a{color:#ffc107;font-size:1rem;font-weight:700;text-decoration:none;transition:color .3s ease}.nav-links li a:hover{color:#fff}.menu-icon{cursor:pointer;display:none;flex-direction:column;gap:5px}.menu-line{background-color:#ffc107;height:3px;width:25px}@media (max-width:768px){.nav-links{background-color:#111;border-radius:5px;display:none;flex-direction:column;gap:10px;padding:10px;position:absolute;right:10px;top:60px}.menu-icon,.nav-links.open{display:flex}}.home-container{align-items:center;background-color:#121212;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center;padding:20px;text-align:center}.greeting{color:#ffc107;font-size:2.5rem;margin-bottom:10px}.wave{animation:wave-animation 2s infinite;display:inline-block;transform-origin:70% 80%}@keyframes wave-animation{0%{transform:rotate(0deg)}25%{transform:rotate(15deg)}50%{transform:rotate(0deg)}}.name{color:#ffc107;font-size:2.8rem;font-weight:700;line-height:1;margin-bottom:15px}.name,.typewriter{white-space:nowrap}.typewriter{color:#a9f0d1;font-size:1.5rem;font-weight:500;margin-top:10px;overflow:hidden;text-overflow:ellipsis}.cursor{animation:blink .7s step-end infinite}@keyframes blink{0%{border-color:#0000}to{border-color:#a9f0d1}}@media (max-width:768px){.greeting{font-size:2rem}.name{font-size:2.4rem}.typewriter{font-size:1.2rem}.home-container{padding:15px}}@media (max-width:480px){.greeting{font-size:1.8rem}.name{font-size:2rem}.typewriter{font-size:1rem}.home-container{padding:10px}}.about-section{background-color:#121212;color:#fff;max-width:100%;padding:2rem}.about-section h2{word-wrap:break-word;color:#ffc107;font-size:2.5rem;line-height:1.2;overflow-wrap:break-word;white-space:normal}.about-intro,.about-section h2{margin-bottom:1.5rem;text-align:center}.about-intro{color:#eaeaea}.intro-box{background-color:#1a1a1a;border-radius:10px;color:#ffc107;padding:1.5rem}.intro-box,.skills{margin-bottom:1.5rem}.skills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.skill-tag{background-color:#ffc107;border-radius:5px;color:#121212;font-size:1rem;font-weight:700;margin:.5rem;padding:6px 12px}.journey-tabs{align-items:center;display:flex;justify-content:space-around;margin:20px 0}.journey-tabs button{align-items:center;background-color:#ffc107;border:none;border-radius:8px;color:#000;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:10px;padding:10px 20px;transition:transform .2s ease}.journey-tabs button.active{box-shadow:0 4px 10px #0000004d;transform:scale(1.1)}.journey-tabs button:hover{transform:scale(1.05)}.journey-tabs button svg{font-size:1.5rem}.timeline-container{background-color:#1a1a1a;border-radius:10px;display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem;padding:1.5rem}.timeline-item{align-items:center;display:flex;flex-direction:column;text-align:center}.timeline-item .circle{background-color:#ffc107;border-radius:50%;height:15px;margin-bottom:10px;width:15px}.timeline-item .content h4{color:#ffc107;font-size:1.2rem;margin-bottom:.5rem}.timeline-item span{color:#eaeaea;font-size:.9rem}@media (max-width:768px){.about-section{padding:1rem}.about-section h2{word-wrap:break-word;color:#ffc107;font-size:2.5rem;line-height:1.2;margin-bottom:1.5rem;overflow-wrap:break-word;text-align:center;white-space:normal}.skills{gap:5px}.skill-tag{font-size:.9rem;padding:5px 10px}.journey-tabs{gap:10px}.journey-tabs button{font-size:1rem;height:auto;max-width:150px;padding:8px 12px}.journey-tabs button svg{font-size:1.5rem}.timeline-container{gap:1rem;padding:1rem}.timeline-item .content h4{font-size:1.1rem}.timeline-item span{font-size:.8rem}}@media (max-width:480px){.about-section h2{word-wrap:break-word;color:#ffc107;font-size:2.5rem;line-height:1.5;margin-bottom:1.5rem;overflow-wrap:break-word;text-align:center;white-space:normal}.skills{flex-direction:column;gap:5px}.skill-tag{font-size:.8rem;padding:4px 8px}.journey-tabs{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.journey-tabs,.journey-tabs button{align-items:center;justify-content:center}.journey-tabs button{background-color:#ffc107;border:none;border-radius:8px;color:#000;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:8px;height:50px;text-align:center;transition:transform .2s ease;width:130px}.journey-tabs button:hover{transform:scale(1.05)}.journey-tabs button svg{font-size:1.2rem}.journey-tabs button:nth-child(3){grid-column:1/span 2;justify-self:center}.timeline-container{padding:.8rem}.timeline-item .content h4{font-size:1rem}.timeline-item span{font-size:.7rem}}.skills-title{color:#ffc107;font-size:2.5rem;margin-bottom:40px;text-align:center}.skills-container{grid-gap:20px;box-sizing:border-box;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(1000px,1fr));padding:20px;width:100%}.skills-category{background:#1e1e2f;border-left:5px solid;border-radius:10px;box-shadow:0 4px 15px #0003;padding:20px;transition:transform .3s ease}.category-header{align-items:center;display:flex;gap:10px;margin-bottom:20px}.category-icon{color:inherit;font-size:2rem}.category-title{color:#ffc107;font-size:1.8rem;margin-bottom:10px;text-align:center}.skills-list{display:flex;flex-direction:column;gap:15px}.skill-item{gap:15px;justify-content:space-between}.skill-item,.skill-label{align-items:center;display:flex}.skill-label{color:#ddd;flex:1 1;font-weight:700;gap:10px}.progress-bar-container{background:#333;border-radius:10px;box-shadow:inset 0 0 5px #00000080;flex:3 1;height:10px;overflow:hidden}.progress-bar{border-radius:10px;height:100%}.skill-percentage{color:#ddd;flex:1 1;font-weight:700;text-align:right}.skill-item:hover .progress-bar{transform:scale(1.02);transition:transform .3s ease}@media (max-width:768px){.skills-container{gap:20px;padding:10px}.skills-category{border-left-width:3px;padding:15px}.category-title{font-size:1.5rem}.skill-item{align-items:center;flex-direction:row;gap:10px;justify-content:space-between}.skill-label{font-size:.9rem}.progress-bar-container{height:8px}.skill-percentage{color:#ffc107;margin-left:10px;text-align:left}}#portfolio{background:#0b1120;color:#f8f9fa;padding:30px 10px}h2{color:#ffc107;font-size:1.8rem;margin-bottom:15px;text-align:center}.category-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}.category-button{background-color:#112240;border:2px solid #ffc107;border-radius:20px;color:#fff;cursor:pointer;font-size:1rem;padding:10px 18px;transition:transform .2s,background-color .3s}.category-button:hover{background-color:#ffc107;color:#121212}.category-button.active{background-color:#ffae00;color:#fff;transform:scale(1.1)}.project-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr}.project-card{background:#112240;border-radius:10px;box-shadow:0 4px 12px #0000004d;padding:20px;transition:transform .2s,box-shadow .2s;width:100%}.project-card:hover{box-shadow:0 8px 16px #ffc1074d;transform:translateY(-8px)}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.tag{background:#ffc107;border-radius:6px;color:#121212;font-size:.9rem;font-weight:700;padding:6px 10px;transition:transform .2s,background-color .3s}.tag:hover{background:#ffdd57;transform:scale(1.1)}.filter-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.filter-buttons button{background-color:#ffc107;border:none;border-radius:25px;color:#121212;cursor:pointer;font-size:1rem;padding:10px 20px;transition:transform .2s ease-in-out,background-color .3s ease-in-out}.filter-buttons button:hover{background-color:#ffdd57;transform:scale(1.05)}.filter-buttons button.active{background-color:#ffae00;color:#fff}@media (max-width:480px){h2{font-size:1.4rem}.category-button{font-size:.8rem;padding:8px 12px}.project-card{font-size:.9rem;padding:15px}.tag{font-size:.7rem;padding:4px 8px}}.resume-section{background:linear-gradient(135deg,#1e1e2f,#252542);color:#ffc107;min-height:100vh;padding:2rem 1rem;text-align:center}.resume-section h2{font-size:2.5rem;margin-bottom:1rem}.resume-section p{color:#fff;font-size:1.2rem;margin-bottom:2rem}.resume-category{margin:2rem 0;text-align:left}.resume-category h3{align-items:center;color:#ffc107;display:flex;font-size:1.8rem;gap:.5rem;margin-bottom:1rem}.resume-card{background:#1e1e2f;border:2px solid #ffc107;border-radius:8px;margin-bottom:1rem;padding:1rem}.resume-card h4{font-size:1.5rem;margin-bottom:.5rem}.resume-card span{color:#ccc;font-size:1rem}.resume-card p{color:#fff;font-size:1rem}.skills-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.skills-grid span{background:#252542;border-radius:5px;color:#ffc107;font-size:1rem;padding:.5rem 1rem;transition:all .3s}.skills-grid span:hover{background:#ffc107;color:#252542;transform:scale(1.1)}.download-resume{margin-top:2rem}.download-button{align-items:center;background:#ffc107;border-radius:5px;color:#252542;display:inline-flex;font-size:1.2rem;font-weight:700;gap:.5rem;padding:.8rem 1.5rem;text-decoration:none;transition:all .3s}.download-button:hover{background:#fff;color:#252542;transform:scale(1.05)}@media (max-width:768px){.resume-section h2{font-size:2rem}.resume-section p{font-size:1rem}.resume-card{padding:.8rem}.resume-card h4{font-size:1.3rem}.resume-card p,.resume-card span{font-size:.9rem}.skills-grid span{font-size:.9rem;padding:.4rem .8rem}.download-button{font-size:1rem;padding:.6rem 1rem}}@media (max-width:480px){.resume-section h2{font-size:1.8rem}.resume-card{padding:.6rem}.resume-card h4{font-size:1.2rem}.resume-card p,.resume-card span{font-size:.8rem}.skills-grid span{font-size:.8rem;padding:.3rem .6rem}.download-button{font-size:.9rem;padding:.5rem .8rem}}.contact-section{background:linear-gradient(135deg,#1e1e2f,#252542);color:#ffc107;min-height:100vh;padding:2rem;text-align:center}.contact-section h2{font-size:2.5rem;margin-bottom:1rem}.contact-section p{color:#fff;font-size:1.2rem;margin-bottom:2rem}.contact-form{align-items:center;display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.form-input,.form-textarea{background:#1e1e2f;border:2px solid #ffc107;border-radius:5px;color:#fff;font-size:1rem;max-width:500px;outline:none;padding:1rem;transition:.3s;width:80%}.form-input:focus,.form-textarea:focus{background:#252542;border-color:#fff}.form-textarea{height:150px;resize:none}.send-button{align-items:center;background:#ffc107;border:none;border-radius:5px;color:#252542;cursor:pointer;display:flex;font-size:1.2rem;font-weight:700;gap:.5rem;padding:.8rem 1.5rem;transition:all .3s}.send-button:hover{background:#fff;color:#252542;transform:scale(1.05)}.contact-info{color:#fff;margin-top:2rem;text-align:center}.contact-info h3{font-size:1.5rem;margin-bottom:1rem}.contact-link{align-items:center;color:#ffc107;display:flex;font-size:1.1rem;gap:.5rem;justify-content:center;text-decoration:none;transition:color .3s}.contact-link:hover{color:#fff}.contact-info p{font-size:1rem}.connect-with-me{margin-bottom:2rem}.connect-icons,.connect-with-me{align-items:center;display:flex;flex-direction:column;justify-content:center}.connect-icons{gap:.5rem}.image-video-container{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:20px 0}.image-container-left{display:flex;flex:1 1;justify-content:center}.video-image-container{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:20px 0}.video-container-right{display:flex;flex:1 1;justify-content:center}.video-image-container-left{align-items:center;display:flex;gap:20px;justify-content:flex-start;margin:20px 0}.video-image-container-left iframe{width:60%}.video-image-container-left iframe,.video-image-container-left img{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:800px}.video-image-container-left img{width:48%}.amcl-image{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:500px;transition:transform .3s ease,box-shadow .3s ease;width:100%}.amcl-image:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-container-center{align-items:center;display:flex;justify-content:center;margin:20px auto}.video-container-center iframe{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:1000px;width:80%}.image-container-above{display:flex;justify-content:center;margin-bottom:20px}.image-container-above img{aspect-ratio:auto;max-width:800px;width:80%}.image-container-above img,.video-iframe{border-radius:10px;box-shadow:0 4px 10px #00000080}.video-iframe{aspect-ratio:16/9;max-width:500px;transition:transform .3s ease,box-shadow .3s ease;width:100%}.video-iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-image-container iframe,.video-image-container img{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:800px;width:48%}.video-container iframe{aspect-ratio:16/9;display:block;margin:0 auto;max-width:800px;transition:transform .3s ease,box-shadow .3s ease;width:60%}.video-container iframe:hover,.videos-container iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05);transition:transform .3s ease,box-shadow .3s ease}.video-container-center iframe{transition:transform .3s ease,box-shadow .3s ease}.video-container-center iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-container{margin-top:20px;text-align:center}.videos-container iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-section-center{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:20px auto;text-align:center}.video-section-center iframe{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;display:block;margin:0 auto;max-width:1000px;width:80%}.videos-container{gap:10px;justify-content:space-between}.videos-container iframe{transition:transform .3s ease,box-shadow .3s ease}@media (max-width:768px){.content-header h2{word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.content-header h2,.section-container .content-header h2{font-size:24px!important;text-align:center}.section-container .content-header p{font-size:18px!important;text-align:left}.content-header p{font-size:16px;line-height:1.6;text-align:left}.gallery-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.gif{margin:0 auto;width:90%}.responsive-iframe{height:auto;margin-bottom:15px;max-width:100%}.subtitle-container h3{font-size:1.2rem}.videos-container{flex-wrap:nowrap;justify-content:space-evenly}.videos-container iframe{max-width:45%;width:45%}.section-container{padding:10px}}@media (max-width:480px){.content-header h2{word-wrap:break-word;font-size:24px!important;overflow-wrap:break-word;text-align:center;white-space:normal}.content-header p{font-size:14px;line-height:1.5;text-align:match-parent}.gif-container{align-items:center;flex-direction:column;gap:15px}.gif{max-width:350px;width:100%}.video-container iframe{height:250px;width:100%}.videos-container{flex-wrap:nowrap;gap:5px;justify-content:space-evenly}.videos-container iframe{max-width:45%;width:45%}.subtitle-container h3{font-size:1rem}.section-container{padding:5px}}.section-container{margin:40px auto;max-width:1200px;text-align:left}.section-container .content-header h2{font-size:32px}.content-header h2{word-wrap:break-word;line-height:1.9;overflow-wrap:break-word;white-space:normal}.gif-container{flex-wrap:wrap;gap:10px;margin-bottom:20px}@media (max-width:480px){.content-header h2{font-size:18px;text-align:center}.content-header p{font-size:14px;line-height:1.5;text-align:match-parent}.gif-container{align-items:center;flex-direction:column;gap:15px}.gif{max-width:350px;width:100%}.video-container iframe{height:250px;width:100%}.subtitle-container h3{font-size:1rem}.section-container{padding:5px}}.section-container{align-items:center;justify-content:center;margin:0 auto}.section-container .content-header h2{font-size:34px}.section-container .content-header p{font-size:22px}.content-header{margin-bottom:20px}.content-header h2{color:#ffc107;font-size:32px;font-weight:700;margin-bottom:15px;text-align:center}.content-header p{color:#eaeaea;font-size:20px;line-height:1.8;margin-bottom:1em;text-align:justify}.main-image-container{margin:20px 0;text-align:center}.image-container{display:flex;justify-content:center;margin:20px 0}.single-image{height:auto;max-width:100%}.main-image,.single-image{border-radius:10px;box-shadow:0 4px 10px #00000080}.main-image{margin:0 auto;max-width:400px;width:100%}.main-image:hover{transform:scale(1.05)}.gallery-container{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:20px}.gallery-image{border-radius:10px;box-shadow:0 4px 10px #00000080;max-height:250px;object-fit:cover;transition:transform .3s;width:100%}.gallery-image:hover{transform:scale(1.05)}.responsive-iframe{aspect-ratio:16/9;border:none;max-width:48%;width:100%}.gif-below-container{display:flex;justify-content:center;margin-top:20px}.gif-below{aspect-ratio:auto;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:800px;width:80%}.top-gif-container{justify-content:center;margin:20px 0;text-align:center}.top-gif{border-radius:10px;box-shadow:0 4px 10px #00000080;justify-content:center;max-width:800px;width:80%}.image-description{color:#eaeaea;font-size:18px;margin:15px 0;text-align:center}.gif-container{display:flex;gap:20px;justify-content:center;margin:20px 0}.gif{width:45%}.bottom-gif-container{margin:30px 0;text-align:center}.bottom-gif{border-radius:10px;max-width:800px;width:80%}.bottom-gif,.gif{box-shadow:0 4px 10px #00000080}.gif{border-radius:5px;width:48%}.gif:hover{transform:scale(1.05)}.video-container iframe{display:block;margin:20px auto;max-width:1200px;width:80%}.video-container iframe,.videos-container iframe{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080}.videos-container iframe{max-width:600px;width:48%}.videos-container{align-items:center;display:flex;flex-wrap:nowrap;gap:20px;justify-content:space-around;margin-top:20px}.subtitle-container{margin:20px 0;text-align:center}.subtitle-container h3{color:#fc0;font-size:1.3rem!important;margin-bottom:15px}@media (max-width:768px){.section-container .content-header h2{font-size:24px!important;text-align:center}.section-container .content-header p{font-size:18px!important;text-align:left}.gallery-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.gif{margin:0 auto;width:90%}.responsive-iframe{height:auto;margin-bottom:15px;max-width:100%}.subtitle-container h3{font-size:1.2rem}.videos-container{align-items:center;flex-direction:column;flex-wrap:wrap}.videos-container iframe{margin-bottom:20px;max-width:100%;width:90%}.section-container{padding:10px}}@media (max-width:480px){.section-container .content-header h2{font-size:24px!important;text-align:center}.section-container .content-header p{font-size:18px!important;text-align:left}.gif-container{align-items:center;flex-direction:column;gap:15px}.gif{max-width:350px;width:100%}.video-container iframe{height:250px;width:100%}.subtitle-container h3{font-size:1rem}.section-container{padding:5px}}body{background-color:#111;margin:0;min-height:100vh;overflow-y:auto;padding:0}html{height:auto}.content-wrapper{overflow:visible}.content-wrapper,.section-container{display:flex;flex:1 1;flex-direction:column;padding:20px}.section-container{box-sizing:border-box;min-height:calc(100vh - 80px);overflow-x:hidden;overflow-y:auto}
-/*# sourceMappingURL=main.cc719a99.css.map*/
\ No newline at end of file
+*{box-sizing:border-box;margin:0;padding:0}body,html{height:auto;min-height:100vh;overflow-x:hidden}section{box-sizing:border-box;padding:50px 20px}h1,h2,h3,h4,h5,h6,p{word-wrap:break-word;line-height:1.5;margin:0}.navbar{align-items:center;background-color:#111;display:flex;justify-content:space-between;padding:15px 10px;position:fixed;top:0;width:100%;z-index:1000}.sc-logo{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#ffc107,#ff5722);-webkit-background-clip:text;cursor:pointer;font-size:1.2rem;font-weight:700}.nav-links{display:flex;gap:20px;list-style:none;margin:0;padding:0}.nav-links li a{color:#ffc107;font-size:1rem;font-weight:700;text-decoration:none;transition:color .3s ease}.nav-links li a:hover{color:#fff}.menu-icon{cursor:pointer;display:none;flex-direction:column;gap:5px}.menu-line{background-color:#ffc107;height:3px;width:25px}@media (max-width:768px){.nav-links{background-color:#111;border-radius:5px;display:none;flex-direction:column;gap:10px;padding:10px;position:absolute;right:10px;top:60px}.menu-icon,.nav-links.open{display:flex}}.home-container{align-items:center;background-color:#121212;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center;padding:20px;text-align:center}.greeting{color:#ffc107;font-size:2.5rem;margin-bottom:10px}.wave{animation:wave-animation 2s infinite;display:inline-block;transform-origin:70% 80%}@keyframes wave-animation{0%{transform:rotate(0deg)}25%{transform:rotate(15deg)}50%{transform:rotate(0deg)}}.name{color:#ffc107;font-size:2.8rem;font-weight:700;line-height:1;margin-bottom:15px}.name,.typewriter{white-space:nowrap}.typewriter{color:#a9f0d1;font-size:1.5rem;font-weight:500;margin-top:10px;overflow:hidden;text-overflow:ellipsis}.cursor{animation:blink .7s step-end infinite}@keyframes blink{0%{border-color:#0000}to{border-color:#a9f0d1}}@media (max-width:768px){.greeting{font-size:2rem}.name{font-size:2.4rem}.typewriter{font-size:1.2rem}.home-container{padding:15px}}@media (max-width:480px){.greeting{font-size:1.8rem}.name{font-size:2rem}.typewriter{font-size:1rem}.home-container{padding:10px}}.about-section{background-color:#121212;color:#fff;max-width:100%;padding:2rem}.about-section h2{word-wrap:break-word;color:#ffc107;font-size:2.5rem;line-height:1.2;overflow-wrap:break-word;white-space:normal}.about-intro,.about-section h2{margin-bottom:1.5rem;text-align:center}.about-intro{color:#eaeaea}.intro-box{background-color:#1a1a1a;border-radius:10px;color:#ffc107;padding:1.5rem}.intro-box,.skills{margin-bottom:1.5rem}.skills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.skill-tag{background-color:#ffc107;border-radius:5px;color:#121212;font-size:1rem;font-weight:700;margin:.5rem;padding:6px 12px}.journey-tabs{align-items:center;display:flex;justify-content:space-around;margin:20px 0}.journey-tabs button{align-items:center;background-color:#ffc107;border:none;border-radius:8px;color:#000;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:10px;padding:10px 20px;transition:transform .2s ease}.journey-tabs button.active{box-shadow:0 4px 10px #0000004d;transform:scale(1.1)}.journey-tabs button:hover{transform:scale(1.05)}.journey-tabs button svg{font-size:1.5rem}.timeline-container{background-color:#1a1a1a;border-radius:10px;display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem;padding:1.5rem}.timeline-item{align-items:center;display:flex;flex-direction:column;text-align:center}.timeline-item .circle{background-color:#ffc107;border-radius:50%;height:15px;margin-bottom:10px;width:15px}.timeline-item .content h4{color:#ffc107;font-size:1.2rem;margin-bottom:.5rem}.timeline-item span{color:#eaeaea;font-size:.9rem}@media (max-width:768px){.about-section{padding:1rem}.about-section h2{word-wrap:break-word;color:#ffc107;font-size:2.5rem;line-height:1.2;margin-bottom:1.5rem;overflow-wrap:break-word;text-align:center;white-space:normal}.skills{gap:5px}.skill-tag{font-size:.9rem;padding:5px 10px}.journey-tabs{gap:10px}.journey-tabs button{font-size:1rem;height:auto;max-width:150px;padding:8px 12px}.journey-tabs button svg{font-size:1.5rem}.timeline-container{gap:1rem;padding:1rem}.timeline-item .content h4{font-size:1.1rem}.timeline-item span{font-size:.8rem}}@media (max-width:480px){.about-section h2{word-wrap:break-word;color:#ffc107;font-size:2.5rem;line-height:1.5;margin-bottom:1.5rem;overflow-wrap:break-word;text-align:center;white-space:normal}.skills{flex-direction:column;gap:5px}.skill-tag{font-size:.8rem;padding:4px 8px}.journey-tabs{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.journey-tabs,.journey-tabs button{align-items:center;justify-content:center}.journey-tabs button{background-color:#ffc107;border:none;border-radius:8px;color:#000;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:8px;height:50px;text-align:center;transition:transform .2s ease;width:130px}.journey-tabs button:hover{transform:scale(1.05)}.journey-tabs button svg{font-size:1.2rem}.journey-tabs button:nth-child(3){grid-column:1/span 2;justify-self:center}.timeline-container{padding:.8rem}.timeline-item .content h4{font-size:1rem}.timeline-item span{font-size:.7rem}}.skills-title{color:#ffc107;font-size:2.5rem;margin-bottom:40px;text-align:center}.skills-container{grid-gap:20px;box-sizing:border-box;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(1000px,1fr));padding:20px;width:100%}.skills-category{background:#1e1e2f;border-left:5px solid;border-radius:10px;box-shadow:0 4px 15px #0003;padding:20px;transition:transform .3s ease}.category-header{align-items:center;display:flex;gap:10px;margin-bottom:20px}.category-icon{color:inherit;font-size:2rem}.category-title{color:#ffc107;font-size:1.8rem;margin-bottom:10px;text-align:center}.skills-list{display:flex;flex-direction:column;gap:15px}.skill-item{gap:15px;justify-content:space-between}.skill-item,.skill-label{align-items:center;display:flex}.skill-label{color:#ddd;flex:1 1;font-weight:700;gap:10px}.progress-bar-container{background:#333;border-radius:10px;box-shadow:inset 0 0 5px #00000080;flex:3 1;height:10px;overflow:hidden}.progress-bar{border-radius:10px;height:100%}.skill-percentage{color:#ddd;flex:1 1;font-weight:700;text-align:right}.skill-item:hover .progress-bar{transform:scale(1.02);transition:transform .3s ease}@media (max-width:768px){.skills-container{gap:20px;padding:10px}.skills-category{border-left-width:3px;padding:15px}.category-title{font-size:1.5rem}.skill-item{align-items:center;flex-direction:row;gap:10px;justify-content:space-between}.skill-label{font-size:.9rem}.progress-bar-container{height:8px}.skill-percentage{color:#ffc107;margin-left:10px;text-align:left}}#portfolio{background:#0b1120;color:#f8f9fa;padding:30px 10px}h2{color:#ffc107;font-size:1.8rem;margin-bottom:15px;text-align:center}.category-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}.category-button{background-color:#112240;border:2px solid #ffc107;border-radius:20px;color:#fff;cursor:pointer;font-size:1rem;padding:10px 18px;transition:transform .2s,background-color .3s}.category-button:hover{background-color:#ffc107;color:#121212}.category-button.active{background-color:#ffae00;color:#fff;transform:scale(1.1)}.project-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr}.project-card{background:#112240;border-radius:10px;box-shadow:0 4px 12px #0000004d;padding:20px;transition:transform .2s,box-shadow .2s;width:100%}.project-card:hover{box-shadow:0 8px 16px #ffc1074d;transform:translateY(-8px)}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.tag{background:#ffc107;border-radius:6px;color:#121212;font-size:.9rem;font-weight:700;padding:6px 10px;transition:transform .2s,background-color .3s}.tag:hover{background:#ffdd57;transform:scale(1.1)}.filter-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.filter-buttons button{background-color:#ffc107;border:none;border-radius:25px;color:#121212;cursor:pointer;font-size:1rem;padding:10px 20px;transition:transform .2s ease-in-out,background-color .3s ease-in-out}.filter-buttons button:hover{background-color:#ffdd57;transform:scale(1.05)}.filter-buttons button.active{background-color:#ffae00;color:#fff}@media (max-width:480px){h2{font-size:1.4rem}.category-button{font-size:.8rem;padding:8px 12px}.project-card{font-size:.9rem;padding:15px}.tag{font-size:.7rem;padding:4px 8px}}.resume-section{background:linear-gradient(135deg,#1e1e2f,#252542);color:#ffc107;min-height:100vh;padding:2rem 1rem;text-align:center}.resume-section h2{font-size:2.5rem;margin-bottom:1rem}.resume-section p{color:#fff;font-size:1.2rem;margin-bottom:2rem}.resume-category{margin:2rem 0;text-align:left}.resume-category h3{align-items:center;color:#ffc107;display:flex;font-size:1.8rem;gap:.5rem;margin-bottom:1rem}.resume-card{background:#1e1e2f;border:2px solid #ffc107;border-radius:8px;margin-bottom:1rem;padding:1rem}.resume-card h4{font-size:1.5rem;margin-bottom:.5rem}.resume-card span{color:#ccc;font-size:1rem}.resume-card p{color:#fff;font-size:1rem}.skills-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.skills-grid span{background:#252542;border-radius:5px;color:#ffc107;font-size:1rem;padding:.5rem 1rem;transition:all .3s}.skills-grid span:hover{background:#ffc107;color:#252542;transform:scale(1.1)}.download-resume{margin-top:2rem}.download-button{align-items:center;background:#ffc107;border-radius:5px;color:#252542;display:inline-flex;font-size:1.2rem;font-weight:700;gap:.5rem;padding:.8rem 1.5rem;text-decoration:none;transition:all .3s}.download-button:hover{background:#fff;color:#252542;transform:scale(1.05)}@media (max-width:768px){.resume-section h2{font-size:2rem}.resume-section p{font-size:1rem}.resume-card{padding:.8rem}.resume-card h4{font-size:1.3rem}.resume-card p,.resume-card span{font-size:.9rem}.skills-grid span{font-size:.9rem;padding:.4rem .8rem}.download-button{font-size:1rem;padding:.6rem 1rem}}@media (max-width:480px){.resume-section h2{font-size:1.8rem}.resume-card{padding:.6rem}.resume-card h4{font-size:1.2rem}.resume-card p,.resume-card span{font-size:.8rem}.skills-grid span{font-size:.8rem;padding:.3rem .6rem}.download-button{font-size:.9rem;padding:.5rem .8rem}}.contact-section{background:linear-gradient(135deg,#1e1e2f,#252542);color:#ffc107;min-height:100vh;padding:2rem;text-align:center}.contact-section h2{font-size:2.5rem;margin-bottom:1rem}.contact-section p{color:#fff;font-size:1.2rem;margin-bottom:2rem}.contact-form{align-items:center;display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.form-input,.form-textarea{background:#1e1e2f;border:2px solid #ffc107;border-radius:5px;color:#fff;font-size:1rem;max-width:500px;outline:none;padding:1rem;transition:.3s;width:80%}.form-input:focus,.form-textarea:focus{background:#252542;border-color:#fff}.form-textarea{height:150px;resize:none}.send-button{align-items:center;background:#ffc107;border:none;border-radius:5px;color:#252542;cursor:pointer;display:flex;font-size:1.2rem;font-weight:700;gap:.5rem;padding:.8rem 1.5rem;transition:all .3s}.send-button:hover{background:#fff;color:#252542;transform:scale(1.05)}.contact-info{color:#fff;margin-top:2rem;text-align:center}.contact-info h3{font-size:1.5rem;margin-bottom:1rem}.contact-link{align-items:center;color:#ffc107;display:flex;font-size:1.1rem;gap:.5rem;justify-content:center;text-decoration:none;transition:color .3s}.contact-link:hover{color:#fff}.contact-info p{font-size:1rem}.connect-with-me{margin-bottom:2rem}.connect-icons,.connect-with-me{align-items:center;display:flex;flex-direction:column;justify-content:center}.connect-icons{gap:.5rem}.image-video-container{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:20px 0}.image-container-left{display:flex;flex:1 1;justify-content:center}.video-image-container{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:20px 0}.video-container-right{display:flex;flex:1 1;justify-content:center}.video-image-container-left{align-items:center;display:flex;gap:20px;justify-content:flex-start;margin:20px 0}.video-image-container-left iframe{width:60%}.video-image-container-left iframe,.video-image-container-left img{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:800px}.video-image-container-left img{width:48%}.amcl-image{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:500px;transition:transform .3s ease,box-shadow .3s ease;width:100%}.amcl-image:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-container-center{align-items:center;display:flex;justify-content:center;margin:20px auto}.video-container-center iframe{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:1000px;width:80%}.image-container-above{display:flex;justify-content:center;margin-bottom:20px}.image-container-above img{aspect-ratio:auto;max-width:800px;width:80%}.image-container-above img,.video-iframe{border-radius:10px;box-shadow:0 4px 10px #00000080}.video-iframe{aspect-ratio:16/9;max-width:500px;transition:transform .3s ease,box-shadow .3s ease;width:100%}.video-iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-image-container iframe,.video-image-container img{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:800px;width:48%}.video-container iframe{aspect-ratio:16/9;display:block;margin:0 auto;max-width:800px;transition:transform .3s ease,box-shadow .3s ease;width:60%}.video-container iframe:hover,.videos-container iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05);transition:transform .3s ease,box-shadow .3s ease}.video-container-center iframe{transition:transform .3s ease,box-shadow .3s ease}.video-container-center iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-container{margin-top:20px;text-align:center}.videos-container iframe:hover{box-shadow:0 8px 20px #000000b3;transform:scale(1.05)}.video-section-center{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:20px auto;text-align:center}.video-section-center iframe{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080;display:block;margin:0 auto;max-width:1000px;width:80%}.videos-container{gap:10px;justify-content:space-between}.videos-container iframe{transition:transform .3s ease,box-shadow .3s ease}@media (max-width:768px){.content-header h2{word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.content-header h2,.section-container .content-header h2{font-size:24px!important;text-align:center}.section-container .content-header p{font-size:18px!important;text-align:left}.content-header p{font-size:16px;line-height:1.6;text-align:left}.gallery-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.gif{margin:0 auto;width:90%}.responsive-iframe{height:auto;margin-bottom:15px;max-width:100%}.subtitle-container h3{font-size:1.2rem}.videos-container{flex-wrap:nowrap;justify-content:space-evenly}.videos-container iframe{max-width:45%;width:45%}.section-container{padding:10px}}@media (max-width:480px){.content-header h2{word-wrap:break-word;font-size:24px!important;overflow-wrap:break-word;text-align:center;white-space:normal}.content-header p{font-size:14px;line-height:1.5;text-align:match-parent}.gif-container{align-items:center;flex-direction:column;gap:15px}.gif{max-width:350px;width:100%}.video-container iframe{height:250px;width:100%}.videos-container{flex-wrap:nowrap;gap:5px;justify-content:space-evenly}.videos-container iframe{max-width:45%;width:45%}.subtitle-container h3{font-size:1rem}.section-container{padding:5px}}.section-container{margin:40px auto;max-width:1200px;text-align:left}.section-container .content-header h2{font-size:32px}.content-header h2{word-wrap:break-word;line-height:1.9;overflow-wrap:break-word;white-space:normal}.gif-container{flex-wrap:wrap;gap:10px;margin-bottom:20px}@media (max-width:480px){.content-header h2{font-size:18px;text-align:center}.content-header p{font-size:14px;line-height:1.5;text-align:match-parent}.gif-container{align-items:center;flex-direction:column;gap:15px}.gif{max-width:350px;width:100%}.video-container iframe{height:250px;width:100%}.subtitle-container h3{font-size:1rem}.section-container{padding:5px}}.section-container{align-items:center;justify-content:center;margin:0 auto}.section-container .content-header h2{font-size:34px}.section-container .content-header p{font-size:22px}.content-header{margin-bottom:20px}.content-header h2{color:#ffc107;font-size:32px;font-weight:700;margin-bottom:15px;text-align:center}.content-header p{color:#eaeaea;font-size:20px;line-height:1.8;margin-bottom:1em;text-align:justify}.main-image-container{margin:20px 0;text-align:center}.image-container{display:flex;justify-content:center;margin:20px 0}.single-image{height:auto;max-width:100%}.main-image,.single-image{border-radius:10px;box-shadow:0 4px 10px #00000080}.main-image{margin:0 auto;max-width:400px;width:100%}.main-image:hover{transform:scale(1.05)}.gallery-container{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:20px}.gallery-image{border-radius:10px;box-shadow:0 4px 10px #00000080;max-height:250px;object-fit:cover;transition:transform .3s;width:100%}.gallery-image:hover{transform:scale(1.05)}.responsive-iframe{aspect-ratio:16/9;border:none;max-width:48%;width:100%}.gif-below-container{display:flex;justify-content:center;margin-top:20px}.gif-below{aspect-ratio:auto;border-radius:10px;box-shadow:0 4px 10px #00000080;max-width:800px;width:80%}.top-gif-container{justify-content:center;margin:20px 0;text-align:center}.top-gif{border-radius:10px;box-shadow:0 4px 10px #00000080;justify-content:center;max-width:800px;width:80%}.image-description{color:#eaeaea;font-size:18px;margin:15px 0;text-align:center}.gif-container{display:flex;gap:20px;justify-content:center;margin:20px 0}.gif{width:45%}.bottom-gif-container{margin:30px 0;text-align:center}.bottom-gif{max-width:800px;width:80%}.bottom-gif,.gif,.single-image,.top-gif{border-radius:10px;box-shadow:0 4px 10px #00000080}.gif,.single-image,.top-gif{transition:transform .3s ease,box-shadow .3s ease}.gif:hover,.single-image:hover,.top-gif:hover{box-shadow:0 8px 20px #000000b3;filter:brightness(1.2);transform:scale(1.05)}.gif{border-radius:5px;box-shadow:0 4px 10px #00000080;width:48%}.gif:hover{box-shadow:0 8px 20px #000000b3;filter:brightness(1.2);transform:scale(1.05)}.video-container iframe{display:block;margin:20px auto;max-width:1200px;width:80%}.video-container iframe,.videos-container iframe{aspect-ratio:16/9;border-radius:10px;box-shadow:0 4px 10px #00000080}.videos-container iframe{max-width:600px;width:48%}.videos-container{align-items:center;display:flex;flex-wrap:nowrap;gap:20px;justify-content:space-around;margin-top:20px}.subtitle-container{margin:20px 0;text-align:center}.subtitle-container h3{color:#fc0;font-size:1.3rem!important;margin-bottom:15px}@media (max-width:768px){.section-container .content-header h2{font-size:24px!important;text-align:center}.section-container .content-header p{font-size:18px!important;text-align:left}.gallery-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.gif{margin:0 auto;width:90%}.responsive-iframe{height:auto;margin-bottom:15px;max-width:100%}.subtitle-container h3{font-size:1.2rem}.videos-container{align-items:center;flex-direction:column;flex-wrap:wrap}.videos-container iframe{margin-bottom:20px;max-width:100%;width:90%}.section-container{padding:10px}}@media (max-width:480px){.section-container .content-header h2{font-size:24px!important;text-align:center}.section-container .content-header p{font-size:18px!important;text-align:left}.gif-container{align-items:center;flex-direction:column;gap:15px}.gif{max-width:350px;width:100%}.video-container iframe{height:250px;width:100%}.subtitle-container h3{font-size:1rem}.section-container{padding:5px}}body{background-color:#111;margin:0;min-height:100vh;overflow-y:auto;padding:0}html{height:auto}.content-wrapper{overflow:visible}.content-wrapper,.section-container{display:flex;flex:1 1;flex-direction:column;padding:20px}.section-container{box-sizing:border-box;min-height:calc(100vh - 80px);overflow-x:hidden;overflow-y:auto}
+/*# sourceMappingURL=main.9c8bd7ce.css.map*/
\ No newline at end of file
diff --git a/static/css/main.9c8bd7ce.css.map b/static/css/main.9c8bd7ce.css.map
new file mode 100644
index 000000000..0473a64f4
--- /dev/null
+++ b/static/css/main.9c8bd7ce.css.map
@@ -0,0 +1 @@
+{"version":3,"file":"static/css/main.9c8bd7ce.css","mappings":"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","sources":["style.css","styles/Navbar.css","styles/Home.css","styles/About.css","styles/Skills.css","styles/Portfolio.css","styles/Resume.css","styles/Contact.css","styles/MultiMapNavigation.css","styles/RoboticVision.css","styles/RobotNavigationStudy.css","styles/App.css"],"sourcesContent":["* {\n margin: 0;\n padding: 0;\n box-sizing: border-box; /* Include padding in element dimensions */\n }\n \n body, html {\n height: auto; /* Allow the document to grow with content */\n min-height: 100vh; /* Ensure full viewport height */\n overflow-x: hidden; /* Prevent horizontal scrolling */\n }\n \n section {\n padding: 50px 20px; /* Add consistent padding to all sections */\n box-sizing: border-box; /* Ensure padding doesn't cause overflow */\n }\n \n h1, h2, h3, h4, h5, h6, p {\n margin: 0; /* Remove default margins */\n line-height: 1.5; /* Set consistent line height */\n word-wrap: break-word; /* Prevent long words from breaking layout */\n }\n ","/* Navbar Container */\n.navbar {\n background-color: #111;\n padding: 15px 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n/* Logo Styling */\n.sc-logo {\n font-size: 1.2rem;\n font-weight: bold;\n background: linear-gradient(to right, #FFC107, #FF5722);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n cursor: pointer;\n}\n\n/* Nav Links */\n.nav-links {\n list-style: none;\n display: flex;\n gap: 20px;\n margin: 0;\n padding: 0;\n}\n\n.nav-links li a {\n color: #ffc107;\n font-size: 1rem;\n font-weight: bold;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links li a:hover {\n color: #fff;\n}\n\n/* Menu Icon Styling */\n.menu-icon {\n display: none;\n cursor: pointer;\n flex-direction: column;\n gap: 5px;\n}\n\n.menu-line {\n width: 25px;\n height: 3px;\n background-color: #ffc107;\n}\n\n/* Responsive Styles */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n flex-direction: column;\n gap: 10px;\n background-color: #111;\n position: absolute;\n top: 60px;\n right: 10px;\n padding: 10px;\n border-radius: 5px;\n }\n\n .nav-links.open {\n display: flex;\n }\n\n .menu-icon {\n display: flex;\n }\n}\n","/* General Container Styling */\n.home-container {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background-color: #121212; /* Dark background */\n color: #fff; /* White text */\n padding: 20px; /* Add padding for smaller screens */\n box-sizing: border-box; /* Ensure padding doesn't affect width */\n}\n\n/* First Line (Greeting) */\n.greeting {\n font-size: 2.5rem;\n color: #ffc107; /* Yellow color */\n margin-bottom: 10px;\n}\n\n/* Waving Hand Animation */\n.wave {\n display: inline-block;\n transform-origin: 70% 80%; /* Set the bottom of the hand as the pivot point */\n animation: wave-animation 2s infinite;\n}\n\n@keyframes wave-animation {\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: rotate(15deg);\n }\n 50% {\n transform: rotate(0deg);\n }\n}\n\n/* Second Line (Name) */\n.name {\n font-size: 2.8rem;\n font-weight: bold;\n color: #ffc107; /* Yellow */\n margin-bottom: 15px;\n line-height: 1; /* Adjust line height to fit in one row */\n white-space: nowrap; /* Prevent wrapping */\n}\n\n.typewriter {\n font-size: 1.5rem;\n font-weight: 500;\n color: #a9f0d1; /* Aqua green */\n margin-top: 10px;\n white-space: nowrap; /* Prevent typewriter text from wrapping */\n overflow: hidden; /* Ensure text stays within bounds */\n text-overflow: ellipsis; /* Add ellipsis if text overflows */\n}\n\n/* Optional Cursor Blink Styling */\n.cursor {\n animation: blink 0.7s step-end infinite;\n}\n\n@keyframes blink {\n from {\n border-color: transparent;\n }\n to {\n border-color: #a9f0d1;\n }\n}\n\n@media (max-width: 768px) {\n .greeting {\n font-size: 2rem; /* Smaller greeting font size for tablets and smaller devices */\n }\n\n .name {\n font-size: 2.4rem; /* Reduce font size for better fit */\n }\n\n .typewriter {\n font-size: 1.2rem; /* Adjust typewriter font size */\n }\n .home-container {\n padding: 15px; /* Add padding for smaller screens */\n }\n}\n\n@media (max-width: 480px) {\n .greeting {\n font-size: 1.8rem; /* Further reduce for mobile phones */\n }\n\n .name {\n font-size: 2rem;\n }\n\n .typewriter {\n font-size: 1rem;\n }\n .home-container {\n padding: 10px; /* Further reduce padding for smaller devices */\n }\n}\n","/* General About Section Styling */\n.about-section {\n padding: 2rem; /* 預設內距 */\n background-color: #121212; /* 深色背景 */\n color: #fff; /* 白色文字 */\n max-width: 100%; /* 確保容器寬度自適應 */\n}\n\n\n/* Section Heading */\n.about-section h2 {\n font-size: 2.5rem; /* 預設字體大小 */\n color: #ffc107;\n text-align: center;\n margin-bottom: 1.5rem;\n word-wrap: break-word; /* 確保換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器 */\n white-space: normal; /* 允許換行 */\n line-height: 1.2; /* 增加行高避免擁擠 */\n}\n\n/* About Intro */\n.about-intro {\n text-align: center;\n color: #eaeaea; /* Softer white for intro text */\n margin-bottom: 1.5rem;\n}\n\n.intro-box {\n padding: 1.5rem;\n background-color: #1a1a1a; /* Subtle background for intro box */\n border-radius: 10px; /* Rounded corners */\n color: #ffc107; /* Contrast for text inside the box */\n margin-bottom: 1.5rem;\n}\n\n/* Skill Tags */\n.skills {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px; /* Space between skill tags */\n margin-bottom: 1.5rem;\n}\n\n.skill-tag {\n margin: 0.5rem;\n font-size: 1rem; /* Standard font size */\n background-color: #ffc107; /* Yellow background for skill tags */\n color: #121212; /* Text color for contrast */\n border-radius: 5px; /* Rounded corners for styling */\n padding: 6px 12px; /* Add padding for better appearance */\n font-weight: bold; /* Emphasize skill text */\n}\n\n/* Journey Tabs */\n.journey-tabs {\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin: 20px 0;\n}\n\n.journey-tabs button {\n background-color: #ffc107;\n border: none;\n border-radius: 8px;\n padding: 10px 20px;\n color: #000;\n font-size: 1rem;\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.journey-tabs button.active {\n transform: scale(1.1);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n}\n.journey-tabs button:hover {\n transform: scale(1.05);\n}\n\n.journey-tabs button svg {\n font-size: 1.5rem;\n}\n\n/* Timeline Container */\n.timeline-container {\n display: flex;\n flex-direction: column;\n gap: 1.5rem; /* Space between timeline items */\n background-color: #1a1a1a; /* Dark background for timeline */\n padding: 1.5rem;\n border-radius: 10px; /* Rounded corners */\n margin-top: 2rem; /* Add spacing from other sections */\n}\n\n.timeline-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.timeline-item .circle {\n width: 15px;\n height: 15px;\n background-color: #ffc107; /* Yellow for timeline dot */\n border-radius: 50%;\n margin-bottom: 10px;\n}\n\n.timeline-item .content h4 {\n font-size: 1.2rem;\n color: #ffc107; /* Yellow color for headings */\n margin-bottom: 0.5rem;\n}\n\n.timeline-item span {\n font-size: 0.9rem;\n color: #eaeaea; /* Softer white for details */\n}\n\n/* Responsive Styles */\n\n/* For medium screens */\n@media (max-width: 768px) {\n .about-section {\n padding: 1rem;\n }\n\n .about-section h2 {\n font-size: 2.5rem; /* 預設字體大小 */\n color: #ffc107;\n text-align: center;\n margin-bottom: 1.5rem;\n word-wrap: break-word; /* 確保換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器 */\n white-space: normal; /* 允許換行 */\n line-height: 1.2; /* 增加行高避免擁擠 */\n }\n \n\n .skills {\n gap: 5px;\n }\n\n .skill-tag {\n font-size: 0.9rem;\n padding: 5px 10px;\n }\n\n .journey-tabs {\n gap: 10px;\n }\n\n .journey-tabs button {\n font-size: 1rem;\n padding: 8px 12px;\n max-width: 150px;\n height: auto;\n }\n\n .journey-tabs button svg {\n font-size: 1.5rem; /* Slightly larger icons for tablets */\n }\n\n .timeline-container {\n padding: 1rem;\n gap: 1rem;\n }\n\n .timeline-item .content h4 {\n font-size: 1.1rem;\n }\n\n .timeline-item span {\n font-size: 0.8rem;\n }\n}\n\n/* For small screens */\n@media (max-width: 480px) {\n .about-section h2 {\n font-size: 2.5rem; /* 預設字體大小 */\n color: #ffc107;\n text-align: center;\n margin-bottom: 1.5rem;\n word-wrap: break-word; /* 確保換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器 */\n white-space: normal; /* 允許換行 */\n line-height: 1.5; /* 增加行高避免擁擠 */\n }\n \n\n .skills {\n flex-direction: column; /* Stack skill tags */\n gap: 5px;\n }\n\n .skill-tag {\n font-size: 0.8rem;\n padding: 4px 8px;\n }\n\n .journey-tabs {\n display: grid; /* Use grid layout for buttons */\n grid-template-columns: repeat(2, 1fr); /* Two equal columns for buttons */\n gap: 12px; /* Space between buttons */\n justify-content: center; /* Center the grid horizontally */\n align-items: center; /* Align buttons vertically */\n }\n\n .journey-tabs button {\n font-size: 1rem; /* Standard readable text size */\n width: 130px; /* Fixed button width */\n height: 50px; /* Fixed button height */\n display: flex; /* Align icon and text within the button */\n justify-content: center; /* Center align both icon and text */\n align-items: center; /* Vertically center icon and text */\n gap: 8px; /* Space between icon and text */\n text-align: center; /* Center align text */\n background-color: #ffc107; /* Button background color */\n border-radius: 8px; /* Rounded corners */\n border: none; /* Remove border */\n color: #000; /* Button text color */\n font-weight: bold; /* Bold text for emphasis */\n cursor: pointer; /* Pointer cursor on hover */\n transition: transform 0.2s ease;\n }\n\n .journey-tabs button:hover {\n transform: scale(1.05); /* Slight zoom effect on hover */\n }\n\n .journey-tabs button svg {\n font-size: 1.2rem; /* Icon size adjusted for proper scaling */\n }\n\n .journey-tabs button:nth-child(3) {\n grid-column: 1 / span 2; /* Make the third button span both columns */\n justify-self: center; /* Center align the third button horizontally */\n }\n\n .timeline-container {\n padding: 0.8rem;\n }\n\n .timeline-item .content h4 {\n font-size: 1rem;\n }\n\n .timeline-item span {\n font-size: 0.7rem;\n }\n}\n",".skills-title {\n text-align: center;\n font-size: 2.5rem;\n color: #ffc107;\n margin-bottom: 40px;\n }\n \n .skills-container {\n display: grid; /* 改為使用網格布局 */\n grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr)); /* 自動適配區塊寬度 */\n gap: 20px; /* 增加區塊間距 */\n width: 100%; /* 確保填滿父容器 */\n padding: 20px; /* 增加內距讓區塊有呼吸空間 */\n box-sizing: border-box; /* 確保內距計入總寬度 */\n}\n \n .skills-category {\n background: #1e1e2f;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n border-left: 5px solid;\n transition: transform 0.3s ease;\n }\n \n .category-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 20px;\n }\n \n .category-icon {\n font-size: 2rem;\n color: inherit;\n }\n \n .category-title {\n font-size: 1.8rem;\n color: #ffc107;\n margin-bottom: 10px;\n text-align: center;\n }\n \n .skills-list {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .skill-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 15px;\n }\n \n .skill-label {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n color: #ddd;\n font-weight: bold;\n }\n \n .progress-bar-container {\n flex: 3;\n background: #333;\n height: 10px;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n }\n \n .progress-bar {\n height: 100%;\n border-radius: 10px;\n }\n \n .skill-percentage {\n flex: 1;\n text-align: right;\n color: #ddd;\n font-weight: bold;\n }\n \n .skill-item:hover .progress-bar {\n transform: scale(1.02);\n transition: transform 0.3s ease;\n }\n \n /* Responsive Styles for Mobile Devices */\n@media (max-width: 768px) {\n .skills-container {\n gap: 20px;\n padding: 10px;\n }\n\n .skills-category {\n padding: 15px;\n border-left-width: 3px; /* Reduced border width for a cleaner look */\n }\n\n .category-title {\n font-size: 1.5rem;\n }\n\n .skill-item {\n flex-direction: row;\n align-items: center;\n gap: 10px;\n justify-content: space-between; /* Maintain consistent alignment */\n }\n\n .skill-label {\n font-size: 0.9rem; /* Adjust font size for smaller screens */\n }\n\n .progress-bar-container {\n height: 8px; /* Reduced height for better proportion */\n }\n\n .skill-percentage {\n text-align: left;\n margin-left: 10px; /* Added margin to align with the label */\n color: #ffc107; /* Adjusted color for better visibility */\n }\n}\n","/* Portfolio Container */\n#portfolio {\n padding: 30px 10px; /* Reduced padding for smaller devices */\n background: #0b1120;\n color: #f8f9fa;\n}\n\n/* Header Styling */\nh2 {\n text-align: center;\n font-size: 1.8rem; /* Adjust font size for mobile */\n color: #ffc107;\n margin-bottom: 15px;\n}\n\n/* Category Buttons */\n/* Category Buttons */\n.category-buttons {\n display: flex;\n flex-wrap: wrap; /* Allow buttons to wrap */\n justify-content: center;\n gap: 10px; /* Add spacing between buttons */\n margin-bottom: 20px;\n}\n\n.category-button {\n padding: 10px 18px; /* Slightly larger padding for better tap area */\n font-size: 1rem; /* Keep font size readable */\n background-color: #112240; /* Dark background for buttons */\n color: #fff; /* White text */\n border: 2px solid #ffc107; /* Add border for better visibility */\n border-radius: 20px; /* Rounded corners */\n cursor: pointer;\n transition: transform 0.2s, background-color 0.3s;\n}\n\n.category-button:hover {\n background-color: #ffc107; /* Bright yellow on hover */\n color: #121212; /* Dark text on hover */\n}\n\n.category-button.active {\n background-color: #ffae00; /* Highlight active button */\n color: #fff; /* White text for active button */\n transform: scale(1.1); /* Slight zoom to indicate focus */\n}\n\n/* Project Grid */\n/* Project Grid */\n.project-grid {\n display: grid;\n grid-template-columns: 1fr; /* Stacked layout for mobile */\n gap: 15px; /* Reduce spacing for mobile view */\n}\n\n/* Project Card */\n.project-card {\n width: 100%; /* Full width on mobile */\n background: #112240; /* Dark card background */\n border-radius: 10px;\n padding: 20px; /* Slightly larger padding for better readability */\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow */\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.project-card:hover {\n transform: translateY(-8px); /* Lift effect on hover */\n box-shadow: 0px 8px 16px rgba(255, 193, 7, 0.3); /* Highlight shadow */\n}\n\n\n/* Tags */\n.tags {\n margin-top: 15px; /* Add spacing above tags */\n display: flex;\n flex-wrap: wrap; /* Wrap tags for small screens */\n gap: 8px; /* Add spacing between tags */\n}\n\n.tag {\n background: #ffc107; /* Yellow background for tags */\n color: #121212; /* Dark text */\n padding: 6px 10px; /* Slightly larger padding for better visibility */\n border-radius: 6px; /* Rounded corners for tags */\n font-size: 0.9rem; /* Maintain readability */\n font-weight: bold; /* Emphasize tags */\n transition: transform 0.2s, background-color 0.3s;\n}\n\n.tag:hover {\n background: #ffdd57; /* Lighter yellow on hover */\n transform: scale(1.1); /* Slight zoom effect */\n}\n\n/* Filter Buttons Container */\n.filter-buttons {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n/* Individual Filter Button Styles */\n.filter-buttons button {\n background-color: #ffc107; /* Bright yellow background */\n color: #121212; /* Dark text for contrast */\n font-size: 1rem; /* Adjust text size */\n padding: 10px 20px; /* Spacing inside the button */\n border: none;\n border-radius: 25px; /* Rounded corners */\n cursor: pointer;\n transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;\n}\n\n/* Hover Effect */\n.filter-buttons button:hover {\n background-color: #ffdd57; /* Slightly lighter yellow */\n transform: scale(1.05); /* Slight zoom effect */\n}\n\n/* Active Button State */\n.filter-buttons button.active {\n background-color: #ffae00; /* Orange to highlight active button */\n color: #fff; /* White text for better contrast */\n}\n\n/* Responsive Adjustments */\n@media (max-width: 480px) {\n h2 {\n font-size: 1.4rem; /* Adjust font size for very small screens */\n }\n\n .category-button {\n padding: 8px 12px; /* Compact button size for mobile */\n font-size: 0.8rem; /* Smaller text */\n }\n\n .project-card {\n padding: 15px; /* Reduce padding for compact view */\n font-size: 0.9rem; /* Slightly smaller text size */\n }\n\n .tag {\n font-size: 0.7rem; /* Smaller tags for extra-small screens */\n padding: 4px 8px; /* Compact padding */\n }\n}\n",".resume-section {\n background: linear-gradient(135deg, #1e1e2f, #252542);\n color: #ffc107;\n text-align: center;\n padding: 2rem 1rem;\n min-height: 100vh;\n}\n\n.resume-section h2 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.resume-section p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n color: #fff;\n}\n\n.resume-category {\n margin: 2rem 0;\n text-align: left;\n}\n\n.resume-category h3 {\n font-size: 1.8rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 1rem;\n color: #ffc107;\n}\n\n.resume-card {\n background: #1e1e2f;\n padding: 1rem;\n border: 2px solid #ffc107;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n.resume-card h4 {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n}\n\n.resume-card span {\n font-size: 1rem;\n color: #ccc;\n}\n\n.resume-card p {\n font-size: 1rem;\n color: #fff;\n}\n\n.skills-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n margin-top: 1rem;\n}\n\n.skills-grid span {\n background: #252542;\n color: #ffc107;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n font-size: 1rem;\n transition: all 0.3s;\n}\n\n.skills-grid span:hover {\n background: #ffc107;\n color: #252542;\n transform: scale(1.1);\n}\n\n.download-resume {\n margin-top: 2rem;\n}\n\n.download-button {\n background: #ffc107;\n color: #252542;\n padding: 0.8rem 1.5rem;\n border-radius: 5px;\n font-size: 1.2rem;\n font-weight: bold;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n transition: all 0.3s;\n}\n\n.download-button:hover {\n background: #fff;\n color: #252542;\n transform: scale(1.05);\n}\n\n/* Responsive Adjustments for Medium Screens */\n@media (max-width: 768px) {\n .resume-section h2 {\n font-size: 2rem;\n }\n\n .resume-section p {\n font-size: 1rem;\n }\n\n .resume-card {\n padding: 0.8rem;\n }\n\n .resume-card h4 {\n font-size: 1.3rem;\n }\n\n .resume-card p, .resume-card span {\n font-size: 0.9rem;\n }\n\n .skills-grid span {\n font-size: 0.9rem;\n padding: 0.4rem 0.8rem;\n }\n\n .download-button {\n font-size: 1rem;\n padding: 0.6rem 1rem;\n }\n}\n\n/* Responsive Adjustments for Small Screens */\n@media (max-width: 480px) {\n .resume-section h2 {\n font-size: 1.8rem;\n }\n\n .resume-card {\n padding: 0.6rem;\n }\n\n .resume-card h4 {\n font-size: 1.2rem;\n }\n\n .resume-card p, .resume-card span {\n font-size: 0.8rem;\n }\n\n .skills-grid span {\n font-size: 0.8rem;\n padding: 0.3rem 0.6rem;\n }\n\n .download-button {\n font-size: 0.9rem;\n padding: 0.5rem 0.8rem;\n }\n}\n",".contact-section {\n background: linear-gradient(135deg, #1e1e2f, #252542);\n color: #ffc107;\n padding: 2rem;\n text-align: center;\n min-height: 100vh;\n }\n \n .contact-section h2 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n }\n \n .contact-section p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n color: #fff;\n }\n \n .contact-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n \n .form-input, .form-textarea {\n width: 80%;\n max-width: 500px;\n padding: 1rem;\n border: 2px solid #ffc107;\n border-radius: 5px;\n background: #1e1e2f;\n color: #fff;\n font-size: 1rem;\n outline: none;\n transition: 0.3s;\n }\n \n .form-input:focus, .form-textarea:focus {\n border-color: #fff;\n background: #252542;\n }\n \n .form-textarea {\n height: 150px;\n resize: none;\n }\n \n .send-button {\n background: #ffc107;\n color: #252542;\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 5px;\n font-size: 1.2rem;\n font-weight: bold;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: all 0.3s;\n }\n \n .send-button:hover {\n background: #fff;\n color: #252542;\n transform: scale(1.05);\n }\n \n .contact-info {\n color: #fff;\n margin-top: 2rem;\n text-align: center; /* Ensures the text is centered */\n }\n \n .contact-info h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n }\n \n .contact-link {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* Adds spacing between the icon and text */\n justify-content: center; /* Ensures everything is centered horizontally */\n font-size: 1.1rem;\n color: #ffc107;\n text-decoration: none;\n transition: color 0.3s;\n }\n \n .contact-link:hover {\n color: #fff;\n }\n \n .contact-info p {\n font-size: 1rem;\n }\n \n .connect-with-me {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-bottom: 2rem; /* Add spacing between the section and Location */\n }\n \n .connect-icons {\n display: flex;\n flex-direction: column;\n align-items: center; /* Center align items within the container */\n justify-content: center; /* Center align vertically */\n gap: 0.5rem; /* Adds spacing between items */\n }\n ","/* Section Container */\n.section-container {\n margin: 40px auto;\n padding: 20px;\n max-width: 1200px; /* Centralize the content */\n text-align: left;\n}\n\n.section-container .content-header h2 {\n font-size: 32px;\n}\n\n.section-container .content-header p {\n font-size: 22px;\n}\n\n/* Header Styling */\n.content-header {\n margin-bottom: 20px;\n}\n\n.content-header h2 {\n font-size: 32px; /* 可以調整此字型大小以適配較小螢幕 */\n margin-bottom: 15px;\n color: #ffc107;\n font-weight: bold;\n text-align: center;\n word-wrap: break-word; /* 確保長文字自動換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器的文字換行 */\n white-space: normal; /* 禁止文字一行顯示，允許換行 */\n line-height: 1.9; /* 調整行高以防止文字擁擠 */\n}\n\n.content-header p {\n font-size: 20px;\n line-height: 1.8;\n color: #eaeaea;\n margin-bottom: 1em;\n text-align: justify; /* Align text for better readability */\n}\n\n/* Main Image Section */\n.main-image-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.image-video-container {\n display: flex; /* Arrange items in a row */\n align-items: center; /* Align items vertically */\n justify-content: space-between; /* Add space between image and video */\n gap: 20px; /* Space between the image and video */\n margin: 20px 0; /* Add space above and below */\n}\n\n.image-container-left {\n flex: 1; /* Allow the image to take up equal space */\n display: flex;\n justify-content: center; /* Center the image horizontally */\n}\n\n.image-container {\n display: flex;\n justify-content: center; /* Center the image horizontally */\n margin: 20px 0; /* Add some spacing */\n}\n\n.single-image {\n max-width: 100%; /* Ensure the image scales to fit its container */\n height: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow effect */\n}\n\n.main-image {\n width: 100%;\n max-width: 400px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n margin: 0 auto;\n}\n\n.main-image:hover {\n transform: scale(1.05);\n}\n\n/* Gallery Section */\n.gallery-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.gallery-image {\n width: 100%;\n max-height: 250px;\n object-fit: cover;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s;\n}\n\n.gallery-image:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Iframe */\n.responsive-iframe {\n width: 100%;\n max-width: 48%; /* Side-by-side on desktop */\n aspect-ratio: 16 / 9;\n border: none;\n}\n\n/* GIF Container */\n.gif-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center; /* Ensure proper alignment on all screens */\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.gif {\n width: 48%; /* Consistent width */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.gif:hover {\n transform: scale(1.05);\n}\n\n/* Video Container */\n.video-image-container {\n display: flex; /* Use flexbox for side-by-side layout */\n justify-content: space-between; /* Evenly space video and image */\n align-items: center; /* Vertically align video and image */\n gap: 20px; /* Add space between video and image */\n margin: 20px 0; /* Add space above and below */\n}\n\n/* Video container */\n.video-container-right {\n flex: 1; /* Allow the video to take up equal space */\n display: flex;\n justify-content: center; /* Center the video horizontally */\n}\n\n.video-image-container-left {\n display: flex; /* Flexbox for alignment */\n justify-content: flex-start; /* Align to the left */\n align-items: center; /* Center vertically */\n gap: 20px; /* Space between video and image */\n margin: 20px 0; /* Add spacing above and below */\n}\n\n.video-image-container-left iframe {\n width: 60%; /* Increase video size */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 800px; /* Ensure it doesn’t exceed container width */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.video-image-container-left img {\n width: 48%; /* Equal size for both video and image */\n aspect-ratio: 16 / 9; /* Maintain aspect ratio */\n max-width: 800px; /* Prevent elements from being too large */\n border-radius: 10px; /* Optional: Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.amcl-image {\n width: 100%; /* Image takes full width of its container */\n max-width: 500px; /* Limit the maximum size */\n aspect-ratio: 16 / 9; /* Maintain aspect ratio */\n border-radius: 10px; /* Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow */\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */\n}\n\n.amcl-image:hover {\n transform: scale(1.05); /* Slightly enlarge the image on hover */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */\n}\n\n.video-container-center {\n display: flex; /* Flexbox for alignment */\n justify-content: center; /* Center horizontally */\n align-items: center; /* Center vertically */\n margin: 20px auto; /* Add spacing */\n}\n\n.video-container-center iframe {\n width: 80%; /* Increase video size */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 1000px; /* Maximum width for larger screens */\n border-radius: 10px; /* Optional: Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.image-container-above {\n display: flex; /* Flexbox for alignment */\n justify-content: center; /* Center the image horizontally */\n margin-bottom: 20px; /* Add spacing below the image */\n}\n\n.image-container-above img {\n width: 80%; /* Set image width */\n max-width: 800px; /* Prevent it from being too large */\n aspect-ratio: auto; /* Maintain the image's aspect ratio */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.video-iframe {\n width: 100%; /* Video takes full width of its container */\n max-width: 500px; /* Limit the maximum size */\n aspect-ratio: 16 / 9; /* Maintain aspect ratio */\n border-radius: 10px; /* Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow */\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */\n}\n\n.video-iframe:hover {\n transform: scale(1.05); /* Slightly enlarge the video on hover */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */\n}\n\n.video-image-container iframe,\n.video-image-container img {\n width: 48%; /* Same width for both video and image */\n aspect-ratio: 16 / 9; /* Maintain consistent aspect ratio */\n max-width: 800px; /* Prevent elements from being too large */\n border-radius: 10px; /* Optional: Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.video-container iframe {\n width: 80%; /* Use 80% of the container width for better centering */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 1200px; /* Prevent videos from being too wide */\n margin: 20px auto; /* Center the video with spacing */\n display: block;\n border-radius: 10px; /* Add slight rounding for a polished look */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.video-container iframe,\n.video-container iframe {\n width: 60%; /* Adjust width for consistent size */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 ratio */\n max-width: 800px; /* Prevent video from being too large */\n margin: 0 auto; /* Center horizontally */\n display: block; /* Ensure block display for centering */\n transition: transform 0.3s ease, box-shadow 0.3s ease; \n}\n\n.video-container iframe:hover,\n.videos-container iframe:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.video-container-center iframe {\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */\n}\n\n.video-container-center iframe:hover {\n transform: scale(1.05); /* Slightly enlarge the video */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */\n}\n\n.video-container {\n text-align: center; /* Center the container content */\n margin-top: 20px; /* Add space above the video */\n}\n\n.videos-container iframe {\n width: 48%; /* Make each video take up 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 600px; /* Limit the width of each video */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.videos-container iframe:hover {\n transform: scale(1.05); /* Slightly enlarge the video on hover */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow effect on hover */\n}\n\n/* Center the video for \"How about make it autonomously?\" */\n.video-section-center {\n display: flex; /* Flexbox for alignment */\n flex-direction: column; /* Stack subtitle and video vertically */\n justify-content: center; /* Center horizontally */\n align-items: center; /* Center vertically */\n margin: 20px auto; /* Add spacing */\n text-align: center; /* Center align the text */\n}\n.video-section-center iframe {\n width: 80%; /* Increase width to make the video larger */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 1000px; /* Maximum width for larger screens */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n margin: 0 auto; /* Center horizontally */\n display: block; /* Ensure block-level display */\n}\n\n.videos-container {\n display: flex; /* Arrange videos in a row */\n justify-content: space-between; /* Space out the videos evenly */\n align-items: center; /* Vertically align videos */\n gap: 10px; /* Add space between videos */\n flex-wrap: nowrap; /* Prevent videos from wrapping */\n margin-top: 20px; /* Add space above the container */\n}\n\n.videos-container iframe {\n width: 48%; /* Each video takes 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 600px; /* Limit the width of each video */\n border-radius: 10px; /* Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow effect */\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n/* Subtitle Container */\n.subtitle-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.subtitle-container h3 {\n font-size: 1.3rem !important; /* Reduced size */\n color: #ffcc00;\n margin-bottom: 15px;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n }\n\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n\n .content-header p {\n text-align: left; /* Change from justify to left-align */\n font-size: 16px;\n line-height: 1.6;\n }\n\n .gallery-container {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n\n .gif {\n width: 90%; /* Reduced width for smaller screens */\n margin: 0 auto; /* Center align */\n }\n\n .responsive-iframe {\n max-width: 100%;\n height: auto; /* Adjust height dynamically */\n margin-bottom: 15px;\n }\n\n .subtitle-container h3 {\n font-size: 1.2rem;\n }\n\n .videos-container {\n justify-content: space-evenly; \n flex-wrap: nowrap; /* Ensure side-by-side layout persists */\n }\n\n .videos-container iframe {\n width: 45%; /* Adjust the width to fit smaller screens */\n max-width: 45%; \n }\n\n .section-container {\n padding: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n }\n\n .content-header p {\n text-align: match-parent; /* Ensure consistent alignment */\n font-size: 14px;\n line-height: 1.5;\n }\n\n .gif-container {\n flex-direction: column; /* Stack GIFs vertically */\n align-items: center;\n gap: 15px;\n }\n\n .gif {\n width: 100%; /* Full width for very small screens */\n max-width: 350px;\n }\n\n .video-container iframe {\n width: 100%; /* Full width for phones */\n height: 250px; /* Adjust height for smaller screens */\n }\n\n .videos-container {\n flex-wrap: nowrap; /* Keep videos side by side */\n justify-content: space-evenly;\n gap: 5px; /* Adjust spacing for very small screens */\n }\n\n .videos-container iframe {\n width: 45%; /* Reduce width further for small devices */\n max-width: 45%; /* Ensure consistent size */\n }\n .subtitle-container h3 {\n font-size: 1rem;\n }\n\n .section-container {\n padding: 5px;\n }\n}\n","/* Section Container */\n.section-container {\n margin: 40px auto;\n padding: 20px;\n max-width: 1200px; /* Centralize the content */\n text-align: left;\n}\n\n.section-container .content-header h2 {\n font-size: 32px;\n}\n\n.section-container .content-header p {\n font-size: 22px;\n}\n\n/* Header Styling */\n.content-header {\n margin-bottom: 20px;\n}\n\n.content-header h2 {\n font-size: 32px; /* 可以調整此字型大小以適配較小螢幕 */\n margin-bottom: 15px;\n color: #ffc107;\n font-weight: bold;\n text-align: center;\n word-wrap: break-word; /* 確保長文字自動換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器的文字換行 */\n white-space: normal; /* 禁止文字一行顯示，允許換行 */\n line-height: 1.9; /* 調整行高以防止文字擁擠 */\n}\n\n.content-header p {\n font-size: 20px;\n line-height: 1.8;\n color: #eaeaea;\n margin-bottom: 1em;\n text-align: justify; /* Align text for better readability */\n}\n\n/* Main Image Section */\n.main-image-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.image-container {\n display: flex;\n justify-content: center; /* Center the image horizontally */\n margin: 20px 0; /* Add some spacing */\n}\n\n.single-image {\n max-width: 100%; /* Ensure the image scales to fit its container */\n height: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow effect */\n}\n\n.main-image {\n width: 100%;\n max-width: 400px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n margin: 0 auto;\n}\n\n.main-image:hover {\n transform: scale(1.05);\n}\n\n/* Gallery Section */\n.gallery-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.gallery-image {\n width: 100%;\n max-height: 250px;\n object-fit: cover;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s;\n}\n\n.gallery-image:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Iframe */\n.responsive-iframe {\n width: 100%;\n max-width: 48%; /* Side-by-side on desktop */\n aspect-ratio: 16 / 9;\n border: none;\n}\n\n/* GIF Container */\n.gif-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center; /* Ensure proper alignment on all screens */\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.gif {\n width: 48%; /* Consistent width */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.gif:hover {\n transform: scale(1.05);\n}\n\n/* Video Container */\n.video-container iframe {\n width: 80%; /* Use 80% of the container width for better centering */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 1200px; /* Prevent videos from being too wide */\n margin: 20px auto; /* Center the video with spacing */\n display: block;\n border-radius: 10px; /* Add slight rounding for a polished look */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container iframe {\n width: 48%; /* Each video takes 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */\n max-width: 600px; /* Limit maximum width for consistency */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container {\n display: flex; /* Align videos side by side */\n justify-content: space-around; /* Space out the videos evenly */\n align-items: center; /* Align videos vertically */\n gap: 20px; /* Add space between the videos */\n flex-wrap: nowrap; /* Prevent wrapping to the next line */\n margin-top: 20px; /* Add spacing above the videos */\n}\n\n/* Subtitle Container */\n.subtitle-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.subtitle-container h3 {\n font-size: 1.3rem !important; /* Reduced size */\n color: #ffcc00;\n margin-bottom: 15px;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n\n .gallery-container {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n\n .gif {\n width: 90%; /* Reduced width for smaller screens */\n margin: 0 auto; /* Center align */\n }\n\n .responsive-iframe {\n max-width: 100%;\n height: auto; /* Adjust height dynamically */\n margin-bottom: 15px;\n }\n\n .subtitle-container h3 {\n font-size: 1.2rem;\n }\n\n .videos-container {\n flex-wrap: wrap; /* Allow videos to stack vertically */\n flex-direction: column; /* Stack videos top to bottom */\n align-items: center; /* Center the videos */\n }\n\n .videos-container iframe {\n width: 90%; /* Use 90% of the container width for better spacing */\n max-width: 100%; /* Ensure it doesn’t exceed the container */\n margin-bottom: 20px; /* Add spacing between the videos */\n }\n\n .section-container {\n padding: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .content-header h2 {\n font-size: 18px;\n text-align: center;\n }\n\n .content-header p {\n text-align: match-parent; /* Ensure consistent alignment */\n font-size: 14px;\n line-height: 1.5;\n }\n\n .gif-container {\n flex-direction: column; /* Stack GIFs vertically */\n align-items: center;\n gap: 15px;\n }\n\n .gif {\n width: 100%; /* Full width for very small screens */\n max-width: 350px;\n }\n\n .video-container iframe {\n width: 100%; /* Full width for phones */\n height: 250px; /* Adjust height for smaller screens */\n }\n\n .subtitle-container h3 {\n font-size: 1rem;\n }\n\n .section-container {\n padding: 5px;\n }\n}\n","/* Section Container */\n.section-container {\n display: flex;\n flex-direction: column;\n align-items: center; /* Horizontally center */\n justify-content: center; /* Vertically center */\n margin: 0 auto;\n}\n\n.section-container .content-header h2 {\n font-size: 34px;\n}\n\n.section-container .content-header p {\n font-size: 22px;\n}\n\n/* Header Styling */\n.content-header {\n margin-bottom: 20px;\n}\n\n.content-header h2 {\n font-size: 32px;\n margin-bottom: 15px;\n color: #ffc107;\n font-weight: bold;\n text-align: center;\n}\n\n.content-header p {\n font-size: 20px;\n line-height: 1.8;\n color: #eaeaea;\n margin-bottom: 1em;\n text-align: justify; /* Align text for better readability */\n}\n\n/* Main Image Section */\n.main-image-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.image-container {\n display: flex;\n justify-content: center; /* Center the image horizontally */\n margin: 20px 0; /* Add some spacing */\n}\n\n.single-image {\n max-width: 100%; /* Ensure the image scales to fit its container */\n height: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow effect */\n}\n\n.main-image {\n width: 100%;\n max-width: 400px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n margin: 0 auto;\n}\n\n.main-image:hover {\n transform: scale(1.05);\n}\n\n/* Gallery Section */\n.gallery-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.gallery-image {\n width: 100%;\n max-height: 250px;\n object-fit: cover;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s;\n}\n\n.gallery-image:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Iframe */\n.responsive-iframe {\n width: 100%;\n max-width: 48%; /* Side-by-side on desktop */\n aspect-ratio: 16 / 9;\n border: none;\n}\n\n/* GIF Container */\n.gif-container {\n display: flex;\n justify-content: center; /* Horizontally center */\n gap: 20px; /* Add spacing between GIFs */\n margin: 20px 0;\n}\n\n.gif-below-container {\n display: flex; /* Flexbox for alignment */\n justify-content: center; /* Center the GIF horizontally */\n margin-top: 20px; /* Add space above the GIF */\n}\n\n.gif-below {\n width: 80%; /* Set the width of the GIF */\n max-width: 800px; /* Prevent it from being too large */\n aspect-ratio: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n\n/* Top GIF styling */\n.top-gif-container {\n text-align: center;\n margin: 20px 0;\n justify-content: center; \n}\n\n.top-gif {\n width: 80%;\n max-width: 800px;\n justify-content: center; \n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.image-description {\n text-align: center;\n font-size: 18px;\n color: #eaeaea;\n margin: 15px 0;\n}\n\n\n/* Two images side by side */\n.gif-container {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin: 20px 0;\n}\n\n.gif {\n width: 45%; /* Adjust as needed */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n\n/* Bottom GIF styling */\n.bottom-gif-container {\n text-align: center;\n margin: 30px 0;\n}\n\n.bottom-gif {\n width: 80%;\n max-width: 800px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n/* 確保所有 GIF 包括 .gif, .single-image, .top-gif 都有一致的 hover 效果 */\n.gif, .single-image, .top-gif {\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑過渡 */\n border-radius: 10px; /* 可選，統一圓角 */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* 基礎陰影 */\n}\n\n.gif:hover, .single-image:hover, .top-gif:hover {\n transform: scale(1.05); /* 放大效果 */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* 增強陰影 */\n filter: brightness(1.2); /* 提升亮度 */\n}\n\n\n\n.gif {\n width: 48%; /* Consistent width */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.gif:hover {\n transform: scale(1.05); /* 放大效果 */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* 陰影加強效果 */\n filter: brightness(1.2); /* 提升亮度 */\n}\n\n/* Video Container */\n.video-container iframe {\n width: 80%; /* Use 80% of the container width for better centering */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 1200px; /* Prevent videos from being too wide */\n margin: 20px auto; /* Center the video with spacing */\n display: block;\n border-radius: 10px; /* Add slight rounding for a polished look */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container iframe {\n width: 48%; /* Each video takes 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */\n max-width: 600px; /* Limit maximum width for consistency */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container {\n display: flex; /* Align videos side by side */\n justify-content: space-around; /* Space out the videos evenly */\n align-items: center; /* Align videos vertically */\n gap: 20px; /* Add space between the videos */\n flex-wrap: nowrap; /* Prevent wrapping to the next line */\n margin-top: 20px; /* Add spacing above the videos */\n}\n\n/* Subtitle Container */\n.subtitle-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.subtitle-container h3 {\n font-size: 1.3rem !important; /* Reduced size */\n color: #ffcc00;\n margin-bottom: 15px;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n\n .gallery-container {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n\n .gif {\n width: 90%; /* Reduced width for smaller screens */\n margin: 0 auto; /* Center align */\n }\n\n .responsive-iframe {\n max-width: 100%;\n height: auto; /* Adjust height dynamically */\n margin-bottom: 15px;\n }\n\n .subtitle-container h3 {\n font-size: 1.2rem;\n }\n\n .videos-container {\n flex-wrap: wrap; /* Allow videos to stack vertically */\n flex-direction: column; /* Stack videos top to bottom */\n align-items: center; /* Center the videos */\n }\n\n .videos-container iframe {\n width: 90%; /* Use 90% of the container width for better spacing */\n max-width: 100%; /* Ensure it doesn’t exceed the container */\n margin-bottom: 20px; /* Add spacing between the videos */\n }\n\n .section-container {\n padding: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n \n .gif-container {\n flex-direction: column; /* Stack GIFs vertically */\n align-items: center;\n gap: 15px;\n }\n\n .gif {\n width: 100%; /* Full width for very small screens */\n max-width: 350px;\n }\n\n .video-container iframe {\n width: 100%; /* Full width for phones */\n height: 250px; /* Adjust height for smaller screens */\n }\n\n .subtitle-container h3 {\n font-size: 1rem;\n }\n\n .section-container {\n padding: 5px;\n }\n}\n","body {\n margin: 0;\n padding: 0;\n background-color: #111;\n min-height: 100vh; /* Allow content to exceed viewport height */\n overflow-y: auto; /* Enable scrolling for overflowing content */\n}\n\nhtml {\n height: auto; /* Allow flexible height */\n}\n\n.content-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible; /* Allow overflowing content */\n padding: 20px; /* Consistent padding around content */\n }\n \n .section-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 20px; /* Consistent padding */\n min-height: calc(100vh - 80px); /* Adjust for navbar height (replace 80px with your navbar height) */\n overflow-y: auto; /* Allow scrolling if content exceeds viewport height */\n overflow-x: hidden; /* Prevent horizontal scrolling */\n box-sizing: border-box; /* Ensure padding doesn't add extra width */\n }\n "],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/css/main.cc719a99.css.map b/static/css/main.cc719a99.css.map
deleted file mode 100644
index 87bf340d8..000000000
--- a/static/css/main.cc719a99.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"static/css/main.cc719a99.css","mappings":"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","sources":["style.css","styles/Navbar.css","styles/Home.css","styles/About.css","styles/Skills.css","styles/Portfolio.css","styles/Resume.css","styles/Contact.css","styles/MultiMapNavigation.css","styles/RoboticVision.css","styles/RobotNavigationStudy.css","styles/App.css"],"sourcesContent":["* {\n margin: 0;\n padding: 0;\n box-sizing: border-box; /* Include padding in element dimensions */\n }\n \n body, html {\n height: auto; /* Allow the document to grow with content */\n min-height: 100vh; /* Ensure full viewport height */\n overflow-x: hidden; /* Prevent horizontal scrolling */\n }\n \n section {\n padding: 50px 20px; /* Add consistent padding to all sections */\n box-sizing: border-box; /* Ensure padding doesn't cause overflow */\n }\n \n h1, h2, h3, h4, h5, h6, p {\n margin: 0; /* Remove default margins */\n line-height: 1.5; /* Set consistent line height */\n word-wrap: break-word; /* Prevent long words from breaking layout */\n }\n ","/* Navbar Container */\n.navbar {\n background-color: #111;\n padding: 15px 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n/* Logo Styling */\n.sc-logo {\n font-size: 1.2rem;\n font-weight: bold;\n background: linear-gradient(to right, #FFC107, #FF5722);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n cursor: pointer;\n}\n\n/* Nav Links */\n.nav-links {\n list-style: none;\n display: flex;\n gap: 20px;\n margin: 0;\n padding: 0;\n}\n\n.nav-links li a {\n color: #ffc107;\n font-size: 1rem;\n font-weight: bold;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links li a:hover {\n color: #fff;\n}\n\n/* Menu Icon Styling */\n.menu-icon {\n display: none;\n cursor: pointer;\n flex-direction: column;\n gap: 5px;\n}\n\n.menu-line {\n width: 25px;\n height: 3px;\n background-color: #ffc107;\n}\n\n/* Responsive Styles */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n flex-direction: column;\n gap: 10px;\n background-color: #111;\n position: absolute;\n top: 60px;\n right: 10px;\n padding: 10px;\n border-radius: 5px;\n }\n\n .nav-links.open {\n display: flex;\n }\n\n .menu-icon {\n display: flex;\n }\n}\n","/* General Container Styling */\n.home-container {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background-color: #121212; /* Dark background */\n color: #fff; /* White text */\n padding: 20px; /* Add padding for smaller screens */\n box-sizing: border-box; /* Ensure padding doesn't affect width */\n}\n\n/* First Line (Greeting) */\n.greeting {\n font-size: 2.5rem;\n color: #ffc107; /* Yellow color */\n margin-bottom: 10px;\n}\n\n/* Waving Hand Animation */\n.wave {\n display: inline-block;\n transform-origin: 70% 80%; /* Set the bottom of the hand as the pivot point */\n animation: wave-animation 2s infinite;\n}\n\n@keyframes wave-animation {\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: rotate(15deg);\n }\n 50% {\n transform: rotate(0deg);\n }\n}\n\n/* Second Line (Name) */\n.name {\n font-size: 2.8rem;\n font-weight: bold;\n color: #ffc107; /* Yellow */\n margin-bottom: 15px;\n line-height: 1; /* Adjust line height to fit in one row */\n white-space: nowrap; /* Prevent wrapping */\n}\n\n.typewriter {\n font-size: 1.5rem;\n font-weight: 500;\n color: #a9f0d1; /* Aqua green */\n margin-top: 10px;\n white-space: nowrap; /* Prevent typewriter text from wrapping */\n overflow: hidden; /* Ensure text stays within bounds */\n text-overflow: ellipsis; /* Add ellipsis if text overflows */\n}\n\n/* Optional Cursor Blink Styling */\n.cursor {\n animation: blink 0.7s step-end infinite;\n}\n\n@keyframes blink {\n from {\n border-color: transparent;\n }\n to {\n border-color: #a9f0d1;\n }\n}\n\n@media (max-width: 768px) {\n .greeting {\n font-size: 2rem; /* Smaller greeting font size for tablets and smaller devices */\n }\n\n .name {\n font-size: 2.4rem; /* Reduce font size for better fit */\n }\n\n .typewriter {\n font-size: 1.2rem; /* Adjust typewriter font size */\n }\n .home-container {\n padding: 15px; /* Add padding for smaller screens */\n }\n}\n\n@media (max-width: 480px) {\n .greeting {\n font-size: 1.8rem; /* Further reduce for mobile phones */\n }\n\n .name {\n font-size: 2rem;\n }\n\n .typewriter {\n font-size: 1rem;\n }\n .home-container {\n padding: 10px; /* Further reduce padding for smaller devices */\n }\n}\n","/* General About Section Styling */\n.about-section {\n padding: 2rem; /* 預設內距 */\n background-color: #121212; /* 深色背景 */\n color: #fff; /* 白色文字 */\n max-width: 100%; /* 確保容器寬度自適應 */\n}\n\n\n/* Section Heading */\n.about-section h2 {\n font-size: 2.5rem; /* 預設字體大小 */\n color: #ffc107;\n text-align: center;\n margin-bottom: 1.5rem;\n word-wrap: break-word; /* 確保換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器 */\n white-space: normal; /* 允許換行 */\n line-height: 1.2; /* 增加行高避免擁擠 */\n}\n\n/* About Intro */\n.about-intro {\n text-align: center;\n color: #eaeaea; /* Softer white for intro text */\n margin-bottom: 1.5rem;\n}\n\n.intro-box {\n padding: 1.5rem;\n background-color: #1a1a1a; /* Subtle background for intro box */\n border-radius: 10px; /* Rounded corners */\n color: #ffc107; /* Contrast for text inside the box */\n margin-bottom: 1.5rem;\n}\n\n/* Skill Tags */\n.skills {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px; /* Space between skill tags */\n margin-bottom: 1.5rem;\n}\n\n.skill-tag {\n margin: 0.5rem;\n font-size: 1rem; /* Standard font size */\n background-color: #ffc107; /* Yellow background for skill tags */\n color: #121212; /* Text color for contrast */\n border-radius: 5px; /* Rounded corners for styling */\n padding: 6px 12px; /* Add padding for better appearance */\n font-weight: bold; /* Emphasize skill text */\n}\n\n/* Journey Tabs */\n.journey-tabs {\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin: 20px 0;\n}\n\n.journey-tabs button {\n background-color: #ffc107;\n border: none;\n border-radius: 8px;\n padding: 10px 20px;\n color: #000;\n font-size: 1rem;\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.journey-tabs button.active {\n transform: scale(1.1);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n}\n.journey-tabs button:hover {\n transform: scale(1.05);\n}\n\n.journey-tabs button svg {\n font-size: 1.5rem;\n}\n\n/* Timeline Container */\n.timeline-container {\n display: flex;\n flex-direction: column;\n gap: 1.5rem; /* Space between timeline items */\n background-color: #1a1a1a; /* Dark background for timeline */\n padding: 1.5rem;\n border-radius: 10px; /* Rounded corners */\n margin-top: 2rem; /* Add spacing from other sections */\n}\n\n.timeline-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.timeline-item .circle {\n width: 15px;\n height: 15px;\n background-color: #ffc107; /* Yellow for timeline dot */\n border-radius: 50%;\n margin-bottom: 10px;\n}\n\n.timeline-item .content h4 {\n font-size: 1.2rem;\n color: #ffc107; /* Yellow color for headings */\n margin-bottom: 0.5rem;\n}\n\n.timeline-item span {\n font-size: 0.9rem;\n color: #eaeaea; /* Softer white for details */\n}\n\n/* Responsive Styles */\n\n/* For medium screens */\n@media (max-width: 768px) {\n .about-section {\n padding: 1rem;\n }\n\n .about-section h2 {\n font-size: 2.5rem; /* 預設字體大小 */\n color: #ffc107;\n text-align: center;\n margin-bottom: 1.5rem;\n word-wrap: break-word; /* 確保換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器 */\n white-space: normal; /* 允許換行 */\n line-height: 1.2; /* 增加行高避免擁擠 */\n }\n \n\n .skills {\n gap: 5px;\n }\n\n .skill-tag {\n font-size: 0.9rem;\n padding: 5px 10px;\n }\n\n .journey-tabs {\n gap: 10px;\n }\n\n .journey-tabs button {\n font-size: 1rem;\n padding: 8px 12px;\n max-width: 150px;\n height: auto;\n }\n\n .journey-tabs button svg {\n font-size: 1.5rem; /* Slightly larger icons for tablets */\n }\n\n .timeline-container {\n padding: 1rem;\n gap: 1rem;\n }\n\n .timeline-item .content h4 {\n font-size: 1.1rem;\n }\n\n .timeline-item span {\n font-size: 0.8rem;\n }\n}\n\n/* For small screens */\n@media (max-width: 480px) {\n .about-section h2 {\n font-size: 2.5rem; /* 預設字體大小 */\n color: #ffc107;\n text-align: center;\n margin-bottom: 1.5rem;\n word-wrap: break-word; /* 確保換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器 */\n white-space: normal; /* 允許換行 */\n line-height: 1.5; /* 增加行高避免擁擠 */\n }\n \n\n .skills {\n flex-direction: column; /* Stack skill tags */\n gap: 5px;\n }\n\n .skill-tag {\n font-size: 0.8rem;\n padding: 4px 8px;\n }\n\n .journey-tabs {\n display: grid; /* Use grid layout for buttons */\n grid-template-columns: repeat(2, 1fr); /* Two equal columns for buttons */\n gap: 12px; /* Space between buttons */\n justify-content: center; /* Center the grid horizontally */\n align-items: center; /* Align buttons vertically */\n }\n\n .journey-tabs button {\n font-size: 1rem; /* Standard readable text size */\n width: 130px; /* Fixed button width */\n height: 50px; /* Fixed button height */\n display: flex; /* Align icon and text within the button */\n justify-content: center; /* Center align both icon and text */\n align-items: center; /* Vertically center icon and text */\n gap: 8px; /* Space between icon and text */\n text-align: center; /* Center align text */\n background-color: #ffc107; /* Button background color */\n border-radius: 8px; /* Rounded corners */\n border: none; /* Remove border */\n color: #000; /* Button text color */\n font-weight: bold; /* Bold text for emphasis */\n cursor: pointer; /* Pointer cursor on hover */\n transition: transform 0.2s ease;\n }\n\n .journey-tabs button:hover {\n transform: scale(1.05); /* Slight zoom effect on hover */\n }\n\n .journey-tabs button svg {\n font-size: 1.2rem; /* Icon size adjusted for proper scaling */\n }\n\n .journey-tabs button:nth-child(3) {\n grid-column: 1 / span 2; /* Make the third button span both columns */\n justify-self: center; /* Center align the third button horizontally */\n }\n\n .timeline-container {\n padding: 0.8rem;\n }\n\n .timeline-item .content h4 {\n font-size: 1rem;\n }\n\n .timeline-item span {\n font-size: 0.7rem;\n }\n}\n",".skills-title {\n text-align: center;\n font-size: 2.5rem;\n color: #ffc107;\n margin-bottom: 40px;\n }\n \n .skills-container {\n display: grid; /* 改為使用網格布局 */\n grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr)); /* 自動適配區塊寬度 */\n gap: 20px; /* 增加區塊間距 */\n width: 100%; /* 確保填滿父容器 */\n padding: 20px; /* 增加內距讓區塊有呼吸空間 */\n box-sizing: border-box; /* 確保內距計入總寬度 */\n}\n \n .skills-category {\n background: #1e1e2f;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n border-left: 5px solid;\n transition: transform 0.3s ease;\n }\n \n .category-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 20px;\n }\n \n .category-icon {\n font-size: 2rem;\n color: inherit;\n }\n \n .category-title {\n font-size: 1.8rem;\n color: #ffc107;\n margin-bottom: 10px;\n text-align: center;\n }\n \n .skills-list {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .skill-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 15px;\n }\n \n .skill-label {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n color: #ddd;\n font-weight: bold;\n }\n \n .progress-bar-container {\n flex: 3;\n background: #333;\n height: 10px;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n }\n \n .progress-bar {\n height: 100%;\n border-radius: 10px;\n }\n \n .skill-percentage {\n flex: 1;\n text-align: right;\n color: #ddd;\n font-weight: bold;\n }\n \n .skill-item:hover .progress-bar {\n transform: scale(1.02);\n transition: transform 0.3s ease;\n }\n \n /* Responsive Styles for Mobile Devices */\n@media (max-width: 768px) {\n .skills-container {\n gap: 20px;\n padding: 10px;\n }\n\n .skills-category {\n padding: 15px;\n border-left-width: 3px; /* Reduced border width for a cleaner look */\n }\n\n .category-title {\n font-size: 1.5rem;\n }\n\n .skill-item {\n flex-direction: row;\n align-items: center;\n gap: 10px;\n justify-content: space-between; /* Maintain consistent alignment */\n }\n\n .skill-label {\n font-size: 0.9rem; /* Adjust font size for smaller screens */\n }\n\n .progress-bar-container {\n height: 8px; /* Reduced height for better proportion */\n }\n\n .skill-percentage {\n text-align: left;\n margin-left: 10px; /* Added margin to align with the label */\n color: #ffc107; /* Adjusted color for better visibility */\n }\n}\n","/* Portfolio Container */\n#portfolio {\n padding: 30px 10px; /* Reduced padding for smaller devices */\n background: #0b1120;\n color: #f8f9fa;\n}\n\n/* Header Styling */\nh2 {\n text-align: center;\n font-size: 1.8rem; /* Adjust font size for mobile */\n color: #ffc107;\n margin-bottom: 15px;\n}\n\n/* Category Buttons */\n/* Category Buttons */\n.category-buttons {\n display: flex;\n flex-wrap: wrap; /* Allow buttons to wrap */\n justify-content: center;\n gap: 10px; /* Add spacing between buttons */\n margin-bottom: 20px;\n}\n\n.category-button {\n padding: 10px 18px; /* Slightly larger padding for better tap area */\n font-size: 1rem; /* Keep font size readable */\n background-color: #112240; /* Dark background for buttons */\n color: #fff; /* White text */\n border: 2px solid #ffc107; /* Add border for better visibility */\n border-radius: 20px; /* Rounded corners */\n cursor: pointer;\n transition: transform 0.2s, background-color 0.3s;\n}\n\n.category-button:hover {\n background-color: #ffc107; /* Bright yellow on hover */\n color: #121212; /* Dark text on hover */\n}\n\n.category-button.active {\n background-color: #ffae00; /* Highlight active button */\n color: #fff; /* White text for active button */\n transform: scale(1.1); /* Slight zoom to indicate focus */\n}\n\n/* Project Grid */\n/* Project Grid */\n.project-grid {\n display: grid;\n grid-template-columns: 1fr; /* Stacked layout for mobile */\n gap: 15px; /* Reduce spacing for mobile view */\n}\n\n/* Project Card */\n.project-card {\n width: 100%; /* Full width on mobile */\n background: #112240; /* Dark card background */\n border-radius: 10px;\n padding: 20px; /* Slightly larger padding for better readability */\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow */\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.project-card:hover {\n transform: translateY(-8px); /* Lift effect on hover */\n box-shadow: 0px 8px 16px rgba(255, 193, 7, 0.3); /* Highlight shadow */\n}\n\n\n/* Tags */\n.tags {\n margin-top: 15px; /* Add spacing above tags */\n display: flex;\n flex-wrap: wrap; /* Wrap tags for small screens */\n gap: 8px; /* Add spacing between tags */\n}\n\n.tag {\n background: #ffc107; /* Yellow background for tags */\n color: #121212; /* Dark text */\n padding: 6px 10px; /* Slightly larger padding for better visibility */\n border-radius: 6px; /* Rounded corners for tags */\n font-size: 0.9rem; /* Maintain readability */\n font-weight: bold; /* Emphasize tags */\n transition: transform 0.2s, background-color 0.3s;\n}\n\n.tag:hover {\n background: #ffdd57; /* Lighter yellow on hover */\n transform: scale(1.1); /* Slight zoom effect */\n}\n\n/* Filter Buttons Container */\n.filter-buttons {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n/* Individual Filter Button Styles */\n.filter-buttons button {\n background-color: #ffc107; /* Bright yellow background */\n color: #121212; /* Dark text for contrast */\n font-size: 1rem; /* Adjust text size */\n padding: 10px 20px; /* Spacing inside the button */\n border: none;\n border-radius: 25px; /* Rounded corners */\n cursor: pointer;\n transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;\n}\n\n/* Hover Effect */\n.filter-buttons button:hover {\n background-color: #ffdd57; /* Slightly lighter yellow */\n transform: scale(1.05); /* Slight zoom effect */\n}\n\n/* Active Button State */\n.filter-buttons button.active {\n background-color: #ffae00; /* Orange to highlight active button */\n color: #fff; /* White text for better contrast */\n}\n\n/* Responsive Adjustments */\n@media (max-width: 480px) {\n h2 {\n font-size: 1.4rem; /* Adjust font size for very small screens */\n }\n\n .category-button {\n padding: 8px 12px; /* Compact button size for mobile */\n font-size: 0.8rem; /* Smaller text */\n }\n\n .project-card {\n padding: 15px; /* Reduce padding for compact view */\n font-size: 0.9rem; /* Slightly smaller text size */\n }\n\n .tag {\n font-size: 0.7rem; /* Smaller tags for extra-small screens */\n padding: 4px 8px; /* Compact padding */\n }\n}\n",".resume-section {\n background: linear-gradient(135deg, #1e1e2f, #252542);\n color: #ffc107;\n text-align: center;\n padding: 2rem 1rem;\n min-height: 100vh;\n}\n\n.resume-section h2 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.resume-section p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n color: #fff;\n}\n\n.resume-category {\n margin: 2rem 0;\n text-align: left;\n}\n\n.resume-category h3 {\n font-size: 1.8rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 1rem;\n color: #ffc107;\n}\n\n.resume-card {\n background: #1e1e2f;\n padding: 1rem;\n border: 2px solid #ffc107;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n.resume-card h4 {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n}\n\n.resume-card span {\n font-size: 1rem;\n color: #ccc;\n}\n\n.resume-card p {\n font-size: 1rem;\n color: #fff;\n}\n\n.skills-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n margin-top: 1rem;\n}\n\n.skills-grid span {\n background: #252542;\n color: #ffc107;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n font-size: 1rem;\n transition: all 0.3s;\n}\n\n.skills-grid span:hover {\n background: #ffc107;\n color: #252542;\n transform: scale(1.1);\n}\n\n.download-resume {\n margin-top: 2rem;\n}\n\n.download-button {\n background: #ffc107;\n color: #252542;\n padding: 0.8rem 1.5rem;\n border-radius: 5px;\n font-size: 1.2rem;\n font-weight: bold;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n transition: all 0.3s;\n}\n\n.download-button:hover {\n background: #fff;\n color: #252542;\n transform: scale(1.05);\n}\n\n/* Responsive Adjustments for Medium Screens */\n@media (max-width: 768px) {\n .resume-section h2 {\n font-size: 2rem;\n }\n\n .resume-section p {\n font-size: 1rem;\n }\n\n .resume-card {\n padding: 0.8rem;\n }\n\n .resume-card h4 {\n font-size: 1.3rem;\n }\n\n .resume-card p, .resume-card span {\n font-size: 0.9rem;\n }\n\n .skills-grid span {\n font-size: 0.9rem;\n padding: 0.4rem 0.8rem;\n }\n\n .download-button {\n font-size: 1rem;\n padding: 0.6rem 1rem;\n }\n}\n\n/* Responsive Adjustments for Small Screens */\n@media (max-width: 480px) {\n .resume-section h2 {\n font-size: 1.8rem;\n }\n\n .resume-card {\n padding: 0.6rem;\n }\n\n .resume-card h4 {\n font-size: 1.2rem;\n }\n\n .resume-card p, .resume-card span {\n font-size: 0.8rem;\n }\n\n .skills-grid span {\n font-size: 0.8rem;\n padding: 0.3rem 0.6rem;\n }\n\n .download-button {\n font-size: 0.9rem;\n padding: 0.5rem 0.8rem;\n }\n}\n",".contact-section {\n background: linear-gradient(135deg, #1e1e2f, #252542);\n color: #ffc107;\n padding: 2rem;\n text-align: center;\n min-height: 100vh;\n }\n \n .contact-section h2 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n }\n \n .contact-section p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n color: #fff;\n }\n \n .contact-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n \n .form-input, .form-textarea {\n width: 80%;\n max-width: 500px;\n padding: 1rem;\n border: 2px solid #ffc107;\n border-radius: 5px;\n background: #1e1e2f;\n color: #fff;\n font-size: 1rem;\n outline: none;\n transition: 0.3s;\n }\n \n .form-input:focus, .form-textarea:focus {\n border-color: #fff;\n background: #252542;\n }\n \n .form-textarea {\n height: 150px;\n resize: none;\n }\n \n .send-button {\n background: #ffc107;\n color: #252542;\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 5px;\n font-size: 1.2rem;\n font-weight: bold;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: all 0.3s;\n }\n \n .send-button:hover {\n background: #fff;\n color: #252542;\n transform: scale(1.05);\n }\n \n .contact-info {\n color: #fff;\n margin-top: 2rem;\n text-align: center; /* Ensures the text is centered */\n }\n \n .contact-info h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n }\n \n .contact-link {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* Adds spacing between the icon and text */\n justify-content: center; /* Ensures everything is centered horizontally */\n font-size: 1.1rem;\n color: #ffc107;\n text-decoration: none;\n transition: color 0.3s;\n }\n \n .contact-link:hover {\n color: #fff;\n }\n \n .contact-info p {\n font-size: 1rem;\n }\n \n .connect-with-me {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-bottom: 2rem; /* Add spacing between the section and Location */\n }\n \n .connect-icons {\n display: flex;\n flex-direction: column;\n align-items: center; /* Center align items within the container */\n justify-content: center; /* Center align vertically */\n gap: 0.5rem; /* Adds spacing between items */\n }\n ","/* Section Container */\n.section-container {\n margin: 40px auto;\n padding: 20px;\n max-width: 1200px; /* Centralize the content */\n text-align: left;\n}\n\n.section-container .content-header h2 {\n font-size: 32px;\n}\n\n.section-container .content-header p {\n font-size: 22px;\n}\n\n/* Header Styling */\n.content-header {\n margin-bottom: 20px;\n}\n\n.content-header h2 {\n font-size: 32px; /* 可以調整此字型大小以適配較小螢幕 */\n margin-bottom: 15px;\n color: #ffc107;\n font-weight: bold;\n text-align: center;\n word-wrap: break-word; /* 確保長文字自動換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器的文字換行 */\n white-space: normal; /* 禁止文字一行顯示，允許換行 */\n line-height: 1.9; /* 調整行高以防止文字擁擠 */\n}\n\n.content-header p {\n font-size: 20px;\n line-height: 1.8;\n color: #eaeaea;\n margin-bottom: 1em;\n text-align: justify; /* Align text for better readability */\n}\n\n/* Main Image Section */\n.main-image-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.image-video-container {\n display: flex; /* Arrange items in a row */\n align-items: center; /* Align items vertically */\n justify-content: space-between; /* Add space between image and video */\n gap: 20px; /* Space between the image and video */\n margin: 20px 0; /* Add space above and below */\n}\n\n.image-container-left {\n flex: 1; /* Allow the image to take up equal space */\n display: flex;\n justify-content: center; /* Center the image horizontally */\n}\n\n.image-container {\n display: flex;\n justify-content: center; /* Center the image horizontally */\n margin: 20px 0; /* Add some spacing */\n}\n\n.single-image {\n max-width: 100%; /* Ensure the image scales to fit its container */\n height: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow effect */\n}\n\n.main-image {\n width: 100%;\n max-width: 400px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n margin: 0 auto;\n}\n\n.main-image:hover {\n transform: scale(1.05);\n}\n\n/* Gallery Section */\n.gallery-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.gallery-image {\n width: 100%;\n max-height: 250px;\n object-fit: cover;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s;\n}\n\n.gallery-image:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Iframe */\n.responsive-iframe {\n width: 100%;\n max-width: 48%; /* Side-by-side on desktop */\n aspect-ratio: 16 / 9;\n border: none;\n}\n\n/* GIF Container */\n.gif-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center; /* Ensure proper alignment on all screens */\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.gif {\n width: 48%; /* Consistent width */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.gif:hover {\n transform: scale(1.05);\n}\n\n/* Video Container */\n.video-image-container {\n display: flex; /* Use flexbox for side-by-side layout */\n justify-content: space-between; /* Evenly space video and image */\n align-items: center; /* Vertically align video and image */\n gap: 20px; /* Add space between video and image */\n margin: 20px 0; /* Add space above and below */\n}\n\n/* Video container */\n.video-container-right {\n flex: 1; /* Allow the video to take up equal space */\n display: flex;\n justify-content: center; /* Center the video horizontally */\n}\n\n.video-image-container-left {\n display: flex; /* Flexbox for alignment */\n justify-content: flex-start; /* Align to the left */\n align-items: center; /* Center vertically */\n gap: 20px; /* Space between video and image */\n margin: 20px 0; /* Add spacing above and below */\n}\n\n.video-image-container-left iframe {\n width: 60%; /* Increase video size */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 800px; /* Ensure it doesn’t exceed container width */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.video-image-container-left img {\n width: 48%; /* Equal size for both video and image */\n aspect-ratio: 16 / 9; /* Maintain aspect ratio */\n max-width: 800px; /* Prevent elements from being too large */\n border-radius: 10px; /* Optional: Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.amcl-image {\n width: 100%; /* Image takes full width of its container */\n max-width: 500px; /* Limit the maximum size */\n aspect-ratio: 16 / 9; /* Maintain aspect ratio */\n border-radius: 10px; /* Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow */\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */\n}\n\n.amcl-image:hover {\n transform: scale(1.05); /* Slightly enlarge the image on hover */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */\n}\n\n.video-container-center {\n display: flex; /* Flexbox for alignment */\n justify-content: center; /* Center horizontally */\n align-items: center; /* Center vertically */\n margin: 20px auto; /* Add spacing */\n}\n\n.video-container-center iframe {\n width: 80%; /* Increase video size */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 1000px; /* Maximum width for larger screens */\n border-radius: 10px; /* Optional: Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.image-container-above {\n display: flex; /* Flexbox for alignment */\n justify-content: center; /* Center the image horizontally */\n margin-bottom: 20px; /* Add spacing below the image */\n}\n\n.image-container-above img {\n width: 80%; /* Set image width */\n max-width: 800px; /* Prevent it from being too large */\n aspect-ratio: auto; /* Maintain the image's aspect ratio */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.video-iframe {\n width: 100%; /* Video takes full width of its container */\n max-width: 500px; /* Limit the maximum size */\n aspect-ratio: 16 / 9; /* Maintain aspect ratio */\n border-radius: 10px; /* Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow */\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */\n}\n\n.video-iframe:hover {\n transform: scale(1.05); /* Slightly enlarge the video on hover */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */\n}\n\n.video-image-container iframe,\n.video-image-container img {\n width: 48%; /* Same width for both video and image */\n aspect-ratio: 16 / 9; /* Maintain consistent aspect ratio */\n max-width: 800px; /* Prevent elements from being too large */\n border-radius: 10px; /* Optional: Rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.video-container iframe {\n width: 80%; /* Use 80% of the container width for better centering */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 1200px; /* Prevent videos from being too wide */\n margin: 20px auto; /* Center the video with spacing */\n display: block;\n border-radius: 10px; /* Add slight rounding for a polished look */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.video-container iframe,\n.video-container iframe {\n width: 60%; /* Adjust width for consistent size */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 ratio */\n max-width: 800px; /* Prevent video from being too large */\n margin: 0 auto; /* Center horizontally */\n display: block; /* Ensure block display for centering */\n transition: transform 0.3s ease, box-shadow 0.3s ease; \n}\n\n.video-container iframe:hover,\n.videos-container iframe:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.video-container-center iframe {\n transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */\n}\n\n.video-container-center iframe:hover {\n transform: scale(1.05); /* Slightly enlarge the video */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */\n}\n\n.video-container {\n text-align: center; /* Center the container content */\n margin-top: 20px; /* Add space above the video */\n}\n\n.videos-container iframe {\n width: 48%; /* Make each video take up 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 600px; /* Limit the width of each video */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n.videos-container iframe:hover {\n transform: scale(1.05); /* Slightly enlarge the video on hover */\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow effect on hover */\n}\n\n/* Center the video for \"How about make it autonomously?\" */\n.video-section-center {\n display: flex; /* Flexbox for alignment */\n flex-direction: column; /* Stack subtitle and video vertically */\n justify-content: center; /* Center horizontally */\n align-items: center; /* Center vertically */\n margin: 20px auto; /* Add spacing */\n text-align: center; /* Center align the text */\n}\n.video-section-center iframe {\n width: 80%; /* Increase width to make the video larger */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 1000px; /* Maximum width for larger screens */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n margin: 0 auto; /* Center horizontally */\n display: block; /* Ensure block-level display */\n}\n\n.videos-container {\n display: flex; /* Arrange videos in a row */\n justify-content: space-between; /* Space out the videos evenly */\n align-items: center; /* Vertically align videos */\n gap: 10px; /* Add space between videos */\n flex-wrap: nowrap; /* Prevent videos from wrapping */\n margin-top: 20px; /* Add space above the container */\n}\n\n.videos-container iframe {\n width: 48%; /* Each video takes 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */\n max-width: 600px; /* Limit the width of each video */\n border-radius: 10px; /* Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow effect */\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n/* Subtitle Container */\n.subtitle-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.subtitle-container h3 {\n font-size: 1.3rem !important; /* Reduced size */\n color: #ffcc00;\n margin-bottom: 15px;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n }\n\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n\n .content-header p {\n text-align: left; /* Change from justify to left-align */\n font-size: 16px;\n line-height: 1.6;\n }\n\n .gallery-container {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n\n .gif {\n width: 90%; /* Reduced width for smaller screens */\n margin: 0 auto; /* Center align */\n }\n\n .responsive-iframe {\n max-width: 100%;\n height: auto; /* Adjust height dynamically */\n margin-bottom: 15px;\n }\n\n .subtitle-container h3 {\n font-size: 1.2rem;\n }\n\n .videos-container {\n justify-content: space-evenly; \n flex-wrap: nowrap; /* Ensure side-by-side layout persists */\n }\n\n .videos-container iframe {\n width: 45%; /* Adjust the width to fit smaller screens */\n max-width: 45%; \n }\n\n .section-container {\n padding: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n }\n\n .content-header p {\n text-align: match-parent; /* Ensure consistent alignment */\n font-size: 14px;\n line-height: 1.5;\n }\n\n .gif-container {\n flex-direction: column; /* Stack GIFs vertically */\n align-items: center;\n gap: 15px;\n }\n\n .gif {\n width: 100%; /* Full width for very small screens */\n max-width: 350px;\n }\n\n .video-container iframe {\n width: 100%; /* Full width for phones */\n height: 250px; /* Adjust height for smaller screens */\n }\n\n .videos-container {\n flex-wrap: nowrap; /* Keep videos side by side */\n justify-content: space-evenly;\n gap: 5px; /* Adjust spacing for very small screens */\n }\n\n .videos-container iframe {\n width: 45%; /* Reduce width further for small devices */\n max-width: 45%; /* Ensure consistent size */\n }\n .subtitle-container h3 {\n font-size: 1rem;\n }\n\n .section-container {\n padding: 5px;\n }\n}\n","/* Section Container */\n.section-container {\n margin: 40px auto;\n padding: 20px;\n max-width: 1200px; /* Centralize the content */\n text-align: left;\n}\n\n.section-container .content-header h2 {\n font-size: 32px;\n}\n\n.section-container .content-header p {\n font-size: 22px;\n}\n\n/* Header Styling */\n.content-header {\n margin-bottom: 20px;\n}\n\n.content-header h2 {\n font-size: 32px; /* 可以調整此字型大小以適配較小螢幕 */\n margin-bottom: 15px;\n color: #ffc107;\n font-weight: bold;\n text-align: center;\n word-wrap: break-word; /* 確保長文字自動換行 */\n overflow-wrap: break-word; /* 支援所有瀏覽器的文字換行 */\n white-space: normal; /* 禁止文字一行顯示，允許換行 */\n line-height: 1.9; /* 調整行高以防止文字擁擠 */\n}\n\n.content-header p {\n font-size: 20px;\n line-height: 1.8;\n color: #eaeaea;\n margin-bottom: 1em;\n text-align: justify; /* Align text for better readability */\n}\n\n/* Main Image Section */\n.main-image-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.image-container {\n display: flex;\n justify-content: center; /* Center the image horizontally */\n margin: 20px 0; /* Add some spacing */\n}\n\n.single-image {\n max-width: 100%; /* Ensure the image scales to fit its container */\n height: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow effect */\n}\n\n.main-image {\n width: 100%;\n max-width: 400px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n margin: 0 auto;\n}\n\n.main-image:hover {\n transform: scale(1.05);\n}\n\n/* Gallery Section */\n.gallery-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.gallery-image {\n width: 100%;\n max-height: 250px;\n object-fit: cover;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s;\n}\n\n.gallery-image:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Iframe */\n.responsive-iframe {\n width: 100%;\n max-width: 48%; /* Side-by-side on desktop */\n aspect-ratio: 16 / 9;\n border: none;\n}\n\n/* GIF Container */\n.gif-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center; /* Ensure proper alignment on all screens */\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.gif {\n width: 48%; /* Consistent width */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.gif:hover {\n transform: scale(1.05);\n}\n\n/* Video Container */\n.video-container iframe {\n width: 80%; /* Use 80% of the container width for better centering */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 1200px; /* Prevent videos from being too wide */\n margin: 20px auto; /* Center the video with spacing */\n display: block;\n border-radius: 10px; /* Add slight rounding for a polished look */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container iframe {\n width: 48%; /* Each video takes 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */\n max-width: 600px; /* Limit maximum width for consistency */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container {\n display: flex; /* Align videos side by side */\n justify-content: space-around; /* Space out the videos evenly */\n align-items: center; /* Align videos vertically */\n gap: 20px; /* Add space between the videos */\n flex-wrap: nowrap; /* Prevent wrapping to the next line */\n margin-top: 20px; /* Add spacing above the videos */\n}\n\n/* Subtitle Container */\n.subtitle-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.subtitle-container h3 {\n font-size: 1.3rem !important; /* Reduced size */\n color: #ffcc00;\n margin-bottom: 15px;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n\n .gallery-container {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n\n .gif {\n width: 90%; /* Reduced width for smaller screens */\n margin: 0 auto; /* Center align */\n }\n\n .responsive-iframe {\n max-width: 100%;\n height: auto; /* Adjust height dynamically */\n margin-bottom: 15px;\n }\n\n .subtitle-container h3 {\n font-size: 1.2rem;\n }\n\n .videos-container {\n flex-wrap: wrap; /* Allow videos to stack vertically */\n flex-direction: column; /* Stack videos top to bottom */\n align-items: center; /* Center the videos */\n }\n\n .videos-container iframe {\n width: 90%; /* Use 90% of the container width for better spacing */\n max-width: 100%; /* Ensure it doesn’t exceed the container */\n margin-bottom: 20px; /* Add spacing between the videos */\n }\n\n .section-container {\n padding: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .content-header h2 {\n font-size: 18px;\n text-align: center;\n }\n\n .content-header p {\n text-align: match-parent; /* Ensure consistent alignment */\n font-size: 14px;\n line-height: 1.5;\n }\n\n .gif-container {\n flex-direction: column; /* Stack GIFs vertically */\n align-items: center;\n gap: 15px;\n }\n\n .gif {\n width: 100%; /* Full width for very small screens */\n max-width: 350px;\n }\n\n .video-container iframe {\n width: 100%; /* Full width for phones */\n height: 250px; /* Adjust height for smaller screens */\n }\n\n .subtitle-container h3 {\n font-size: 1rem;\n }\n\n .section-container {\n padding: 5px;\n }\n}\n","/* Section Container */\n.section-container {\n display: flex;\n flex-direction: column;\n align-items: center; /* Horizontally center */\n justify-content: center; /* Vertically center */\n margin: 0 auto;\n}\n\n.section-container .content-header h2 {\n font-size: 34px;\n}\n\n.section-container .content-header p {\n font-size: 22px;\n}\n\n/* Header Styling */\n.content-header {\n margin-bottom: 20px;\n}\n\n.content-header h2 {\n font-size: 32px;\n margin-bottom: 15px;\n color: #ffc107;\n font-weight: bold;\n text-align: center;\n}\n\n.content-header p {\n font-size: 20px;\n line-height: 1.8;\n color: #eaeaea;\n margin-bottom: 1em;\n text-align: justify; /* Align text for better readability */\n}\n\n/* Main Image Section */\n.main-image-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.image-container {\n display: flex;\n justify-content: center; /* Center the image horizontally */\n margin: 20px 0; /* Add some spacing */\n}\n\n.single-image {\n max-width: 100%; /* Ensure the image scales to fit its container */\n height: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow effect */\n}\n\n.main-image {\n width: 100%;\n max-width: 400px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n margin: 0 auto;\n}\n\n.main-image:hover {\n transform: scale(1.05);\n}\n\n/* Gallery Section */\n.gallery-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.gallery-image {\n width: 100%;\n max-height: 250px;\n object-fit: cover;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s;\n}\n\n.gallery-image:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Iframe */\n.responsive-iframe {\n width: 100%;\n max-width: 48%; /* Side-by-side on desktop */\n aspect-ratio: 16 / 9;\n border: none;\n}\n\n/* GIF Container */\n.gif-container {\n display: flex;\n justify-content: center; /* Horizontally center */\n gap: 20px; /* Add spacing between GIFs */\n margin: 20px 0;\n}\n\n.gif-below-container {\n display: flex; /* Flexbox for alignment */\n justify-content: center; /* Center the GIF horizontally */\n margin-top: 20px; /* Add space above the GIF */\n}\n\n.gif-below {\n width: 80%; /* Set the width of the GIF */\n max-width: 800px; /* Prevent it from being too large */\n aspect-ratio: auto; /* Maintain the aspect ratio */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add shadow */\n}\n\n\n/* Top GIF styling */\n.top-gif-container {\n text-align: center;\n margin: 20px 0;\n justify-content: center; \n}\n\n.top-gif {\n width: 80%;\n max-width: 800px;\n justify-content: center; \n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.image-description {\n text-align: center;\n font-size: 18px;\n color: #eaeaea;\n margin: 15px 0;\n}\n\n\n/* Two images side by side */\n.gif-container {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin: 20px 0;\n}\n\n.gif {\n width: 45%; /* Adjust as needed */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n/* Bottom GIF styling */\n.bottom-gif-container {\n text-align: center;\n margin: 30px 0;\n}\n\n.bottom-gif {\n width: 80%;\n max-width: 800px;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n\n.gif {\n width: 48%; /* Consistent width */\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n}\n\n.gif:hover {\n transform: scale(1.05);\n}\n\n/* Video Container */\n.video-container iframe {\n width: 80%; /* Use 80% of the container width for better centering */\n aspect-ratio: 16 / 9; /* Maintain the aspect ratio */\n max-width: 1200px; /* Prevent videos from being too wide */\n margin: 20px auto; /* Center the video with spacing */\n display: block;\n border-radius: 10px; /* Add slight rounding for a polished look */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container iframe {\n width: 48%; /* Each video takes 48% of the container width */\n aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */\n max-width: 600px; /* Limit maximum width for consistency */\n border-radius: 10px; /* Optional: Add rounded corners */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow */\n}\n\n.videos-container {\n display: flex; /* Align videos side by side */\n justify-content: space-around; /* Space out the videos evenly */\n align-items: center; /* Align videos vertically */\n gap: 20px; /* Add space between the videos */\n flex-wrap: nowrap; /* Prevent wrapping to the next line */\n margin-top: 20px; /* Add spacing above the videos */\n}\n\n/* Subtitle Container */\n.subtitle-container {\n text-align: center;\n margin: 20px 0;\n}\n\n.subtitle-container h3 {\n font-size: 1.3rem !important; /* Reduced size */\n color: #ffcc00;\n margin-bottom: 15px;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n\n .gallery-container {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n\n .gif {\n width: 90%; /* Reduced width for smaller screens */\n margin: 0 auto; /* Center align */\n }\n\n .responsive-iframe {\n max-width: 100%;\n height: auto; /* Adjust height dynamically */\n margin-bottom: 15px;\n }\n\n .subtitle-container h3 {\n font-size: 1.2rem;\n }\n\n .videos-container {\n flex-wrap: wrap; /* Allow videos to stack vertically */\n flex-direction: column; /* Stack videos top to bottom */\n align-items: center; /* Center the videos */\n }\n\n .videos-container iframe {\n width: 90%; /* Use 90% of the container width for better spacing */\n max-width: 100%; /* Ensure it doesn’t exceed the container */\n margin-bottom: 20px; /* Add spacing between the videos */\n }\n\n .section-container {\n padding: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .section-container .content-header h2 {\n font-size: 24px !important;\n text-align: center;\n }\n\n .section-container .content-header p {\n font-size: 18px !important;\n text-align: left;\n }\n \n .gif-container {\n flex-direction: column; /* Stack GIFs vertically */\n align-items: center;\n gap: 15px;\n }\n\n .gif {\n width: 100%; /* Full width for very small screens */\n max-width: 350px;\n }\n\n .video-container iframe {\n width: 100%; /* Full width for phones */\n height: 250px; /* Adjust height for smaller screens */\n }\n\n .subtitle-container h3 {\n font-size: 1rem;\n }\n\n .section-container {\n padding: 5px;\n }\n}\n","body {\n margin: 0;\n padding: 0;\n background-color: #111;\n min-height: 100vh; /* Allow content to exceed viewport height */\n overflow-y: auto; /* Enable scrolling for overflowing content */\n}\n\nhtml {\n height: auto; /* Allow flexible height */\n}\n\n.content-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible; /* Allow overflowing content */\n padding: 20px; /* Consistent padding around content */\n }\n \n .section-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 20px; /* Consistent padding */\n min-height: calc(100vh - 80px); /* Adjust for navbar height (replace 80px with your navbar height) */\n overflow-y: auto; /* Allow scrolling if content exceeds viewport height */\n overflow-x: hidden; /* Prevent horizontal scrolling */\n box-sizing: border-box; /* Ensure padding doesn't add extra width */\n }\n "],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/js/main.9d1877c9.js b/static/js/main.f5b29c60.js
similarity index 99%
rename from static/js/main.9d1877c9.js
rename to static/js/main.f5b29c60.js
index 4f9fa04ab..aa834750a 100644
--- a/static/js/main.9d1877c9.js
+++ b/static/js/main.f5b29c60.js
@@ -1,3 +1,3 @@
-/*! For license information please see main.9d1877c9.js.LICENSE.txt */
-(()=>{"use strict";var e={175:(e,t)=>{const n=/^[\u0021-\u003A\u003C\u003E-\u007E]+$/,r=/^[\u0021-\u003A\u003C-\u007E]*$/,i=/^([.]?[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)([.][a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/i,o=/^[\u0020-\u003A\u003D-\u007E]*$/,a=Object.prototype.toString,s=(()=>{const e=function(){};return e.prototype=Object.create(null),e})();function l(e,t,n){do{const n=e.charCodeAt(t);if(32!==n&&9!==n)return t}while(++tn;){const n=e.charCodeAt(--t);if(32!==n&&9!==n)return t+1}return n}function c(e){if(-1===e.indexOf("%"))return e;try{return decodeURIComponent(e)}catch(t){return e}}},730:(e,t,n)=>{var r=n(43),i=n(853);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;nt}return!1}(t,n,i,r)&&(n=null),r||null===i?function(e){return!!d.call(p,e)||!d.call(f,e)&&(h.test(e)?p[e]=!0:(f[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):i.mustUseProperty?e[i.propertyName]=null===n?3!==i.type&&"":n:(t=i.attributeName,r=i.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(i=i.type)||4===i&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(v,y);g[t]=new m(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(v,y);g[t]=new m(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(v,y);g[t]=new m(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){g[e]=new m(e,1,!1,e.toLowerCase(),null,!1,!1)})),g.xlinkHref=new m("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){g[e]=new m(e,1,!1,e.toLowerCase(),null,!0,!0)}));var x=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.element"),S=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),E=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),T=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),R=Symbol.for("react.suspense"),N=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),A=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var M=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var D=Symbol.iterator;function _(e){return null===e||"object"!==typeof e?null:"function"===typeof(e=D&&e[D]||e["@@iterator"])?e:null}var O,V=Object.assign;function F(e){if(void 0===O)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);O=t&&t[1]||""}return"\n"+O+e}var I=!1;function z(e,t){if(!e||I)return"";I=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"===typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(u){var r=u}Reflect.construct(e,[],t)}else{try{t.call()}catch(u){r=u}e.call(t.prototype)}else{try{throw Error()}catch(u){r=u}e()}}catch(u){if(u&&r&&"string"===typeof u.stack){for(var i=u.stack.split("\n"),o=r.stack.split("\n"),a=i.length-1,s=o.length-1;1<=a&&0<=s&&i[a]!==o[s];)s--;for(;1<=a&&0<=s;a--,s--)if(i[a]!==o[s]){if(1!==a||1!==s)do{if(a--,0>--s||i[a]!==o[s]){var l="\n"+i[a].replace(" at new "," at ");return e.displayName&&l.includes("")&&(l=l.replace("",e.displayName)),l}}while(1<=a&&0<=s);break}}}finally{I=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?F(e):""}function B(e){switch(e.tag){case 5:return F(e.type);case 16:return F("Lazy");case 13:return F("Suspense");case 19:return F("SuspenseList");case 0:case 2:case 15:return e=z(e.type,!1);case 11:return e=z(e.type.render,!1);case 1:return e=z(e.type,!0);default:return""}}function $(e){if(null==e)return null;if("function"===typeof e)return e.displayName||e.name||null;if("string"===typeof e)return e;switch(e){case k:return"Fragment";case S:return"Portal";case P:return"Profiler";case E:return"StrictMode";case R:return"Suspense";case N:return"SuspenseList"}if("object"===typeof e)switch(e.$$typeof){case T:return(e.displayName||"Context")+".Consumer";case C:return(e._context.displayName||"Context")+".Provider";case j:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(t=e.displayName||null)?t:$(e.type)||"Memo";case A:t=e._payload,e=e._init;try{return $(e(t))}catch(n){}}return null}function U(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=t.render).displayName||e.name||"",t.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return $(t);case 8:return t===E?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"===typeof t)return t.displayName||t.name||null;if("string"===typeof t)return t}return null}function W(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function H(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function Y(e){e._valueTracker||(e._valueTracker=function(e){var t=H(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&"undefined"!==typeof n&&"function"===typeof n.get&&"function"===typeof n.set){var i=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return i.call(this)},set:function(e){r=""+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function K(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=H(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function Q(e){if("undefined"===typeof(e=e||("undefined"!==typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function q(e,t){var n=t.checked;return V({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function G(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=W(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function X(e,t){null!=(t=t.checked)&&b(e,"checked",t,!1)}function J(e,t){X(e,t);var n=W(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ee(e,t.type,n):t.hasOwnProperty("defaultValue")&&ee(e,t.type,W(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function Z(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ee(e,t,n){"number"===t&&Q(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var te=Array.isArray;function ne(e,t,n,r){if(e=e.options,t){t={};for(var i=0;i"+t.valueOf().toString()+"",t=ue.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ce(e,t)}))}:ce);function he(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var fe={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},pe=["Webkit","ms","Moz","O"];function me(e,t,n){return null==t||"boolean"===typeof t||""===t?"":n||"number"!==typeof t||0===t||fe.hasOwnProperty(e)&&fe[e]?(""+t).trim():t+"px"}function ge(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),i=me(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,i):e[n]=i}}Object.keys(fe).forEach((function(e){pe.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),fe[t]=fe[e]}))}));var ve=V({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function ye(e,t){if(t){if(ve[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(o(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(o(60));if("object"!==typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(o(61))}if(null!=t.style&&"object"!==typeof t.style)throw Error(o(62))}}function be(e,t){if(-1===e.indexOf("-"))return"string"===typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var xe=null;function we(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var Se=null,ke=null,Ee=null;function Pe(e){if(e=bi(e)){if("function"!==typeof Se)throw Error(o(280));var t=e.stateNode;t&&(t=wi(t),Se(e.stateNode,e.type,t))}}function Ce(e){ke?Ee?Ee.push(e):Ee=[e]:ke=e}function Te(){if(ke){var e=ke,t=Ee;if(Ee=ke=null,Pe(e),t)for(e=0;e>>=0,0===e?32:31-(st(e)/lt|0)|0},st=Math.log,lt=Math.LN2;var ut=64,ct=4194304;function dt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function ht(e,t){var n=e.pendingLanes;if(0===n)return 0;var r=0,i=e.suspendedLanes,o=e.pingedLanes,a=268435455&n;if(0!==a){var s=a&~i;0!==s?r=dt(s):0!==(o&=a)&&(r=dt(o))}else 0!==(a=n&~i)?r=dt(a):0!==o&&(r=dt(o));if(0===r)return 0;if(0!==t&&t!==r&&0===(t&i)&&((i=r&-r)>=(o=t&-t)||16===i&&0!==(4194240&o)))return t;if(0!==(4&r)&&(r|=16&n),0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0n;n++)t.push(e);return t}function vt(e,t,n){e.pendingLanes|=t,536870912!==t&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[t=31-at(t)]=n}function yt(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-at(n),i=1<=_n),Fn=String.fromCharCode(32),In=!1;function zn(e,t){switch(e){case"keyup":return-1!==Mn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Bn(e){return"object"===typeof(e=e.detail)&&"data"in e?e.data:null}var $n=!1;var Un={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Wn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Un[e.type]:"textarea"===t}function Hn(e,t,n,r){Ce(r),0<(t=Yr(t,"onChange")).length&&(n=new cn("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Yn=null,Kn=null;function Qn(e){Fr(e,0)}function qn(e){if(K(xi(e)))return e}function Gn(e,t){if("change"===e)return t}var Xn=!1;if(c){var Jn;if(c){var Zn="oninput"in document;if(!Zn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Zn="function"===typeof er.oninput}Jn=Zn}else Jn=!1;Xn=Jn&&(!document.documentMode||9=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=ur(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function hr(){for(var e=window,t=Q();t instanceof e.HTMLIFrameElement;){try{var n="string"===typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=Q((e=t.contentWindow).document)}return t}function fr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function pr(e){var t=hr(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&dr(n.ownerDocument.documentElement,n)){if(null!==r&&fr(n))if(t=r.start,void 0===(e=r.end)&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if((e=(t=n.ownerDocument||document)&&t.defaultView||window).getSelection){e=e.getSelection();var i=n.textContent.length,o=Math.min(r.start,i);r=void 0===r.end?o:Math.min(r.end,i),!e.extend&&o>r&&(i=r,r=o,o=i),i=cr(n,o);var a=cr(n,r);i&&a&&(1!==e.rangeCount||e.anchorNode!==i.node||e.anchorOffset!==i.offset||e.focusNode!==a.node||e.focusOffset!==a.offset)&&((t=t.createRange()).setStart(i.node,i.offset),e.removeAllRanges(),o>r?(e.addRange(t),e.extend(a.node,a.offset)):(t.setEnd(a.node,a.offset),e.addRange(t)))}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"===typeof n.focus&&n.focus(),n=0;n=document.documentMode,gr=null,vr=null,yr=null,br=!1;function xr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;br||null==gr||gr!==Q(r)||("selectionStart"in(r=gr)&&fr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},yr&&lr(yr,r)||(yr=r,0<(r=Yr(vr,"onSelect")).length&&(t=new cn("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=gr)))}function wr(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var Sr={animationend:wr("Animation","AnimationEnd"),animationiteration:wr("Animation","AnimationIteration"),animationstart:wr("Animation","AnimationStart"),transitionend:wr("Transition","TransitionEnd")},kr={},Er={};function Pr(e){if(kr[e])return kr[e];if(!Sr[e])return e;var t,n=Sr[e];for(t in n)if(n.hasOwnProperty(t)&&t in Er)return kr[e]=n[t];return e}c&&(Er=document.createElement("div").style,"AnimationEvent"in window||(delete Sr.animationend.animation,delete Sr.animationiteration.animation,delete Sr.animationstart.animation),"TransitionEvent"in window||delete Sr.transitionend.transition);var Cr=Pr("animationend"),Tr=Pr("animationiteration"),jr=Pr("animationstart"),Rr=Pr("transitionend"),Nr=new Map,Lr="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Ar(e,t){Nr.set(e,t),l(t,[e])}for(var Mr=0;Mrki||(e.current=Si[ki],Si[ki]=null,ki--)}function Ci(e,t){ki++,Si[ki]=e.current,e.current=t}var Ti={},ji=Ei(Ti),Ri=Ei(!1),Ni=Ti;function Li(e,t){var n=e.type.contextTypes;if(!n)return Ti;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var i,o={};for(i in n)o[i]=t[i];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function Ai(e){return null!==(e=e.childContextTypes)&&void 0!==e}function Mi(){Pi(Ri),Pi(ji)}function Di(e,t,n){if(ji.current!==Ti)throw Error(o(168));Ci(ji,t),Ci(Ri,n)}function _i(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,"function"!==typeof r.getChildContext)return n;for(var i in r=r.getChildContext())if(!(i in t))throw Error(o(108,U(e)||"Unknown",i));return V({},n,r)}function Oi(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Ti,Ni=ji.current,Ci(ji,e),Ci(Ri,Ri.current),!0}function Vi(e,t,n){var r=e.stateNode;if(!r)throw Error(o(169));n?(e=_i(e,t,Ni),r.__reactInternalMemoizedMergedChildContext=e,Pi(Ri),Pi(ji),Ci(ji,e)):Pi(Ri),Ci(Ri,n)}var Fi=null,Ii=!1,zi=!1;function Bi(e){null===Fi?Fi=[e]:Fi.push(e)}function $i(){if(!zi&&null!==Fi){zi=!0;var e=0,t=bt;try{var n=Fi;for(bt=1;e>=a,i-=a,Gi=1<<32-at(t)+i|n<m?(g=d,d=null):g=d.sibling;var v=f(i,d,s[m],l);if(null===v){null===d&&(d=g);break}e&&d&&null===v.alternate&&t(i,d),o=a(v,o,m),null===c?u=v:c.sibling=v,c=v,d=g}if(m===s.length)return n(i,d),io&&Ji(i,m),u;if(null===d){for(;mg?(v=m,m=null):v=m.sibling;var b=f(i,m,y.value,u);if(null===b){null===m&&(m=v);break}e&&m&&null===b.alternate&&t(i,m),s=a(b,s,g),null===d?c=b:d.sibling=b,d=b,m=v}if(y.done)return n(i,m),io&&Ji(i,g),c;if(null===m){for(;!y.done;g++,y=l.next())null!==(y=h(i,y.value,u))&&(s=a(y,s,g),null===d?c=y:d.sibling=y,d=y);return io&&Ji(i,g),c}for(m=r(i,m);!y.done;g++,y=l.next())null!==(y=p(m,i,g,y.value,u))&&(e&&null!==y.alternate&&m.delete(null===y.key?g:y.key),s=a(y,s,g),null===d?c=y:d.sibling=y,d=y);return e&&m.forEach((function(e){return t(i,e)})),io&&Ji(i,g),c}return function e(r,o,a,l){if("object"===typeof a&&null!==a&&a.type===k&&null===a.key&&(a=a.props.children),"object"===typeof a&&null!==a){switch(a.$$typeof){case w:e:{for(var u=a.key,c=o;null!==c;){if(c.key===u){if((u=a.type)===k){if(7===c.tag){n(r,c.sibling),(o=i(c,a.props.children)).return=r,r=o;break e}}else if(c.elementType===u||"object"===typeof u&&null!==u&&u.$$typeof===A&&bo(u)===c.type){n(r,c.sibling),(o=i(c,a.props)).ref=vo(r,c,a),o.return=r,r=o;break e}n(r,c);break}t(r,c),c=c.sibling}a.type===k?((o=_u(a.props.children,r.mode,l,a.key)).return=r,r=o):((l=Du(a.type,a.key,a.props,null,r.mode,l)).ref=vo(r,o,a),l.return=r,r=l)}return s(r);case S:e:{for(c=a.key;null!==o;){if(o.key===c){if(4===o.tag&&o.stateNode.containerInfo===a.containerInfo&&o.stateNode.implementation===a.implementation){n(r,o.sibling),(o=i(o,a.children||[])).return=r,r=o;break e}n(r,o);break}t(r,o),o=o.sibling}(o=Fu(a,r.mode,l)).return=r,r=o}return s(r);case A:return e(r,o,(c=a._init)(a._payload),l)}if(te(a))return m(r,o,a,l);if(_(a))return g(r,o,a,l);yo(r,a)}return"string"===typeof a&&""!==a||"number"===typeof a?(a=""+a,null!==o&&6===o.tag?(n(r,o.sibling),(o=i(o,a)).return=r,r=o):(n(r,o),(o=Vu(a,r.mode,l)).return=r,r=o),s(r)):n(r,o)}}var wo=xo(!0),So=xo(!1),ko=Ei(null),Eo=null,Po=null,Co=null;function To(){Co=Po=Eo=null}function jo(e){var t=ko.current;Pi(ko),e._currentValue=t}function Ro(e,t,n){for(;null!==e;){var r=e.alternate;if((e.childLanes&t)!==t?(e.childLanes|=t,null!==r&&(r.childLanes|=t)):null!==r&&(r.childLanes&t)!==t&&(r.childLanes|=t),e===n)break;e=e.return}}function No(e,t){Eo=e,Co=Po=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!==(e.lanes&t)&&(bs=!0),e.firstContext=null)}function Lo(e){var t=e._currentValue;if(Co!==e)if(e={context:e,memoizedValue:t,next:null},null===Po){if(null===Eo)throw Error(o(308));Po=e,Eo.dependencies={lanes:0,firstContext:e}}else Po=Po.next=e;return t}var Ao=null;function Mo(e){null===Ao?Ao=[e]:Ao.push(e)}function Do(e,t,n,r){var i=t.interleaved;return null===i?(n.next=n,Mo(t)):(n.next=i.next,i.next=n),t.interleaved=n,_o(e,r)}function _o(e,t){e.lanes|=t;var n=e.alternate;for(null!==n&&(n.lanes|=t),n=e,e=e.return;null!==e;)e.childLanes|=t,null!==(n=e.alternate)&&(n.childLanes|=t),n=e,e=e.return;return 3===n.tag?n.stateNode:null}var Oo=!1;function Vo(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Fo(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function Io(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function zo(e,t,n){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,0!==(2&jl)){var i=r.pending;return null===i?t.next=t:(t.next=i.next,i.next=t),r.pending=t,_o(e,n)}return null===(i=r.interleaved)?(t.next=t,Mo(r)):(t.next=i.next,i.next=t),r.interleaved=t,_o(e,n)}function Bo(e,t,n){if(null!==(t=t.updateQueue)&&(t=t.shared,0!==(4194240&n))){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,yt(e,n)}}function $o(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var i=null,o=null;if(null!==(n=n.firstBaseUpdate)){do{var a={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};null===o?i=o=a:o=o.next=a,n=n.next}while(null!==n);null===o?i=o=t:o=o.next=t}else i=o=t;return n={baseState:r.baseState,firstBaseUpdate:i,lastBaseUpdate:o,shared:r.shared,effects:r.effects},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function Uo(e,t,n,r){var i=e.updateQueue;Oo=!1;var o=i.firstBaseUpdate,a=i.lastBaseUpdate,s=i.shared.pending;if(null!==s){i.shared.pending=null;var l=s,u=l.next;l.next=null,null===a?o=u:a.next=u,a=l;var c=e.alternate;null!==c&&((s=(c=c.updateQueue).lastBaseUpdate)!==a&&(null===s?c.firstBaseUpdate=u:s.next=u,c.lastBaseUpdate=l))}if(null!==o){var d=i.baseState;for(a=0,c=u=l=null,s=o;;){var h=s.lane,f=s.eventTime;if((r&h)===h){null!==c&&(c=c.next={eventTime:f,lane:0,tag:s.tag,payload:s.payload,callback:s.callback,next:null});e:{var p=e,m=s;switch(h=t,f=n,m.tag){case 1:if("function"===typeof(p=m.payload)){d=p.call(f,d,h);break e}d=p;break e;case 3:p.flags=-65537&p.flags|128;case 0:if(null===(h="function"===typeof(p=m.payload)?p.call(f,d,h):p)||void 0===h)break e;d=V({},d,h);break e;case 2:Oo=!0}}null!==s.callback&&0!==s.lane&&(e.flags|=64,null===(h=i.effects)?i.effects=[s]:h.push(s))}else f={eventTime:f,lane:h,tag:s.tag,payload:s.payload,callback:s.callback,next:null},null===c?(u=c=f,l=d):c=c.next=f,a|=h;if(null===(s=s.next)){if(null===(s=i.shared.pending))break;s=(h=s).next,h.next=null,i.lastBaseUpdate=h,i.shared.pending=null}}if(null===c&&(l=d),i.baseState=l,i.firstBaseUpdate=u,i.lastBaseUpdate=c,null!==(t=i.shared.interleaved)){i=t;do{a|=i.lane,i=i.next}while(i!==t)}else null===o&&(i.shared.lanes=0);Ol|=a,e.lanes=a,e.memoizedState=d}}function Wo(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;tn?n:4,e(!0);var r=oa.transition;oa.transition={};try{e(!1),t()}finally{bt=n,oa.transition=r}}function Ya(){return ba().memoizedState}function Ka(e,t,n){var r=tu(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},qa(e))Ga(t,n);else if(null!==(n=Do(e,t,n,r))){nu(n,e,r,eu()),Xa(n,t,r)}}function Qa(e,t,n){var r=tu(e),i={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(qa(e))Ga(t,i);else{var o=e.alternate;if(0===e.lanes&&(null===o||0===o.lanes)&&null!==(o=t.lastRenderedReducer))try{var a=t.lastRenderedState,s=o(a,n);if(i.hasEagerState=!0,i.eagerState=s,sr(s,a)){var l=t.interleaved;return null===l?(i.next=i,Mo(t)):(i.next=l.next,l.next=i),void(t.interleaved=i)}}catch(u){}null!==(n=Do(e,t,i,r))&&(nu(n,e,r,i=eu()),Xa(n,t,r))}}function qa(e){var t=e.alternate;return e===sa||null!==t&&t===sa}function Ga(e,t){da=ca=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function Xa(e,t,n){if(0!==(4194240&n)){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,yt(e,n)}}var Ja={readContext:Lo,useCallback:pa,useContext:pa,useEffect:pa,useImperativeHandle:pa,useInsertionEffect:pa,useLayoutEffect:pa,useMemo:pa,useReducer:pa,useRef:pa,useState:pa,useDebugValue:pa,useDeferredValue:pa,useTransition:pa,useMutableSource:pa,useSyncExternalStore:pa,useId:pa,unstable_isNewReconciler:!1},Za={readContext:Lo,useCallback:function(e,t){return ya().memoizedState=[e,void 0===t?null:t],e},useContext:Lo,useEffect:_a,useImperativeHandle:function(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,Ma(4194308,4,Ia.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Ma(4194308,4,e,t)},useInsertionEffect:function(e,t){return Ma(4,2,e,t)},useMemo:function(e,t){var n=ya();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=ya();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=Ka.bind(null,sa,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},ya().memoizedState=e},useState:Na,useDebugValue:Ba,useDeferredValue:function(e){return ya().memoizedState=e},useTransition:function(){var e=Na(!1),t=e[0];return e=Ha.bind(null,e[1]),ya().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=sa,i=ya();if(io){if(void 0===n)throw Error(o(407));n=n()}else{if(n=t(),null===Rl)throw Error(o(349));0!==(30&aa)||Pa(r,t,n)}i.memoizedState=n;var a={value:n,getSnapshot:t};return i.queue=a,_a(Ta.bind(null,r,a,e),[e]),r.flags|=2048,La(9,Ca.bind(null,r,a,n,t),void 0,null),n},useId:function(){var e=ya(),t=Rl.identifierPrefix;if(io){var n=Xi;t=":"+t+"R"+(n=(Gi&~(1<<32-at(Gi)-1)).toString(32)+n),0<(n=ha++)&&(t+="H"+n.toString(32)),t+=":"}else t=":"+t+"r"+(n=fa++).toString(32)+":";return e.memoizedState=t},unstable_isNewReconciler:!1},es={readContext:Lo,useCallback:$a,useContext:Lo,useEffect:Oa,useImperativeHandle:za,useInsertionEffect:Va,useLayoutEffect:Fa,useMemo:Ua,useReducer:wa,useRef:Aa,useState:function(){return wa(xa)},useDebugValue:Ba,useDeferredValue:function(e){return Wa(ba(),la.memoizedState,e)},useTransition:function(){return[wa(xa)[0],ba().memoizedState]},useMutableSource:ka,useSyncExternalStore:Ea,useId:Ya,unstable_isNewReconciler:!1},ts={readContext:Lo,useCallback:$a,useContext:Lo,useEffect:Oa,useImperativeHandle:za,useInsertionEffect:Va,useLayoutEffect:Fa,useMemo:Ua,useReducer:Sa,useRef:Aa,useState:function(){return Sa(xa)},useDebugValue:Ba,useDeferredValue:function(e){var t=ba();return null===la?t.memoizedState=e:Wa(t,la.memoizedState,e)},useTransition:function(){return[Sa(xa)[0],ba().memoizedState]},useMutableSource:ka,useSyncExternalStore:Ea,useId:Ya,unstable_isNewReconciler:!1};function ns(e,t){if(e&&e.defaultProps){for(var n in t=V({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}return t}function rs(e,t,n,r){n=null===(n=n(r,t=e.memoizedState))||void 0===n?t:V({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var is={isMounted:function(e){return!!(e=e._reactInternals)&&$e(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternals;var r=eu(),i=tu(e),o=Io(r,i);o.payload=t,void 0!==n&&null!==n&&(o.callback=n),null!==(t=zo(e,o,i))&&(nu(t,e,i,r),Bo(t,e,i))},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=eu(),i=tu(e),o=Io(r,i);o.tag=1,o.payload=t,void 0!==n&&null!==n&&(o.callback=n),null!==(t=zo(e,o,i))&&(nu(t,e,i,r),Bo(t,e,i))},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=eu(),r=tu(e),i=Io(n,r);i.tag=2,void 0!==t&&null!==t&&(i.callback=t),null!==(t=zo(e,i,r))&&(nu(t,e,r,n),Bo(t,e,r))}};function os(e,t,n,r,i,o,a){return"function"===typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,o,a):!t.prototype||!t.prototype.isPureReactComponent||(!lr(n,r)||!lr(i,o))}function as(e,t,n){var r=!1,i=Ti,o=t.contextType;return"object"===typeof o&&null!==o?o=Lo(o):(i=Ai(t)?Ni:ji.current,o=(r=null!==(r=t.contextTypes)&&void 0!==r)?Li(e,i):Ti),t=new t(n,o),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=is,e.stateNode=t,t._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=i,e.__reactInternalMemoizedMaskedChildContext=o),t}function ss(e,t,n,r){e=t.state,"function"===typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),"function"===typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&is.enqueueReplaceState(t,t.state,null)}function ls(e,t,n,r){var i=e.stateNode;i.props=n,i.state=e.memoizedState,i.refs={},Vo(e);var o=t.contextType;"object"===typeof o&&null!==o?i.context=Lo(o):(o=Ai(t)?Ni:ji.current,i.context=Li(e,o)),i.state=e.memoizedState,"function"===typeof(o=t.getDerivedStateFromProps)&&(rs(e,t,o,n),i.state=e.memoizedState),"function"===typeof t.getDerivedStateFromProps||"function"===typeof i.getSnapshotBeforeUpdate||"function"!==typeof i.UNSAFE_componentWillMount&&"function"!==typeof i.componentWillMount||(t=i.state,"function"===typeof i.componentWillMount&&i.componentWillMount(),"function"===typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount(),t!==i.state&&is.enqueueReplaceState(i,i.state,null),Uo(e,n,i,r),i.state=e.memoizedState),"function"===typeof i.componentDidMount&&(e.flags|=4194308)}function us(e,t){try{var n="",r=t;do{n+=B(r),r=r.return}while(r);var i=n}catch(o){i="\nError generating stack: "+o.message+"\n"+o.stack}return{value:e,source:t,stack:i,digest:null}}function cs(e,t,n){return{value:e,source:null,stack:null!=n?n:null,digest:null!=t?t:null}}function ds(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}var hs="function"===typeof WeakMap?WeakMap:Map;function fs(e,t,n){(n=Io(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Wl||(Wl=!0,Hl=r),ds(0,t)},n}function ps(e,t,n){(n=Io(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"===typeof r){var i=t.value;n.payload=function(){return r(i)},n.callback=function(){ds(0,t)}}var o=e.stateNode;return null!==o&&"function"===typeof o.componentDidCatch&&(n.callback=function(){ds(0,t),"function"!==typeof r&&(null===Yl?Yl=new Set([this]):Yl.add(this));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}function ms(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new hs;var i=new Set;r.set(t,i)}else void 0===(i=r.get(t))&&(i=new Set,r.set(t,i));i.has(n)||(i.add(n),e=Pu.bind(null,e,t,n),t.then(e,e))}function gs(e){do{var t;if((t=13===e.tag)&&(t=null===(t=e.memoizedState)||null!==t.dehydrated),t)return e;e=e.return}while(null!==e);return null}function vs(e,t,n,r,i){return 0===(1&e.mode)?(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,1===n.tag&&(null===n.alternate?n.tag=17:((t=Io(-1,1)).tag=2,zo(n,t,1))),n.lanes|=1),e):(e.flags|=65536,e.lanes=i,e)}var ys=x.ReactCurrentOwner,bs=!1;function xs(e,t,n,r){t.child=null===e?So(t,null,n,r):wo(t,e.child,n,r)}function ws(e,t,n,r,i){n=n.render;var o=t.ref;return No(t,i),r=ga(e,t,n,r,o,i),n=va(),null===e||bs?(io&&n&&eo(t),t.flags|=1,xs(e,t,r,i),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~i,Ws(e,t,i))}function Ss(e,t,n,r,i){if(null===e){var o=n.type;return"function"!==typeof o||Au(o)||void 0!==o.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Du(n.type,null,r,t,t.mode,i)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=o,ks(e,t,o,r,i))}if(o=e.child,0===(e.lanes&i)){var a=o.memoizedProps;if((n=null!==(n=n.compare)?n:lr)(a,r)&&e.ref===t.ref)return Ws(e,t,i)}return t.flags|=1,(e=Mu(o,r)).ref=t.ref,e.return=t,t.child=e}function ks(e,t,n,r,i){if(null!==e){var o=e.memoizedProps;if(lr(o,r)&&e.ref===t.ref){if(bs=!1,t.pendingProps=r=o,0===(e.lanes&i))return t.lanes=e.lanes,Ws(e,t,i);0!==(131072&e.flags)&&(bs=!0)}}return Cs(e,t,n,r,i)}function Es(e,t,n){var r=t.pendingProps,i=r.children,o=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(0===(1&t.mode))t.memoizedState={baseLanes:0,cachePool:null,transitions:null},Ci(Ml,Al),Al|=n;else{if(0===(1073741824&n))return e=null!==o?o.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,Ci(Ml,Al),Al|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==o?o.baseLanes:n,Ci(Ml,Al),Al|=r}else null!==o?(r=o.baseLanes|n,t.memoizedState=null):r=n,Ci(Ml,Al),Al|=r;return xs(e,t,i,n),t.child}function Ps(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function Cs(e,t,n,r,i){var o=Ai(n)?Ni:ji.current;return o=Li(t,o),No(t,i),n=ga(e,t,n,r,o,i),r=va(),null===e||bs?(io&&r&&eo(t),t.flags|=1,xs(e,t,n,i),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~i,Ws(e,t,i))}function Ts(e,t,n,r,i){if(Ai(n)){var o=!0;Oi(t)}else o=!1;if(No(t,i),null===t.stateNode)Us(e,t),as(t,n,r),ls(t,n,r,i),r=!0;else if(null===e){var a=t.stateNode,s=t.memoizedProps;a.props=s;var l=a.context,u=n.contextType;"object"===typeof u&&null!==u?u=Lo(u):u=Li(t,u=Ai(n)?Ni:ji.current);var c=n.getDerivedStateFromProps,d="function"===typeof c||"function"===typeof a.getSnapshotBeforeUpdate;d||"function"!==typeof a.UNSAFE_componentWillReceiveProps&&"function"!==typeof a.componentWillReceiveProps||(s!==r||l!==u)&&ss(t,a,r,u),Oo=!1;var h=t.memoizedState;a.state=h,Uo(t,r,a,i),l=t.memoizedState,s!==r||h!==l||Ri.current||Oo?("function"===typeof c&&(rs(t,n,c,r),l=t.memoizedState),(s=Oo||os(t,n,s,r,h,l,u))?(d||"function"!==typeof a.UNSAFE_componentWillMount&&"function"!==typeof a.componentWillMount||("function"===typeof a.componentWillMount&&a.componentWillMount(),"function"===typeof a.UNSAFE_componentWillMount&&a.UNSAFE_componentWillMount()),"function"===typeof a.componentDidMount&&(t.flags|=4194308)):("function"===typeof a.componentDidMount&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=l),a.props=r,a.state=l,a.context=u,r=s):("function"===typeof a.componentDidMount&&(t.flags|=4194308),r=!1)}else{a=t.stateNode,Fo(e,t),s=t.memoizedProps,u=t.type===t.elementType?s:ns(t.type,s),a.props=u,d=t.pendingProps,h=a.context,"object"===typeof(l=n.contextType)&&null!==l?l=Lo(l):l=Li(t,l=Ai(n)?Ni:ji.current);var f=n.getDerivedStateFromProps;(c="function"===typeof f||"function"===typeof a.getSnapshotBeforeUpdate)||"function"!==typeof a.UNSAFE_componentWillReceiveProps&&"function"!==typeof a.componentWillReceiveProps||(s!==d||h!==l)&&ss(t,a,r,l),Oo=!1,h=t.memoizedState,a.state=h,Uo(t,r,a,i);var p=t.memoizedState;s!==d||h!==p||Ri.current||Oo?("function"===typeof f&&(rs(t,n,f,r),p=t.memoizedState),(u=Oo||os(t,n,u,r,h,p,l)||!1)?(c||"function"!==typeof a.UNSAFE_componentWillUpdate&&"function"!==typeof a.componentWillUpdate||("function"===typeof a.componentWillUpdate&&a.componentWillUpdate(r,p,l),"function"===typeof a.UNSAFE_componentWillUpdate&&a.UNSAFE_componentWillUpdate(r,p,l)),"function"===typeof a.componentDidUpdate&&(t.flags|=4),"function"===typeof a.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!==typeof a.componentDidUpdate||s===e.memoizedProps&&h===e.memoizedState||(t.flags|=4),"function"!==typeof a.getSnapshotBeforeUpdate||s===e.memoizedProps&&h===e.memoizedState||(t.flags|=1024),t.memoizedProps=r,t.memoizedState=p),a.props=r,a.state=p,a.context=l,r=u):("function"!==typeof a.componentDidUpdate||s===e.memoizedProps&&h===e.memoizedState||(t.flags|=4),"function"!==typeof a.getSnapshotBeforeUpdate||s===e.memoizedProps&&h===e.memoizedState||(t.flags|=1024),r=!1)}return js(e,t,n,r,o,i)}function js(e,t,n,r,i,o){Ps(e,t);var a=0!==(128&t.flags);if(!r&&!a)return i&&Vi(t,n,!1),Ws(e,t,o);r=t.stateNode,ys.current=t;var s=a&&"function"!==typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&a?(t.child=wo(t,e.child,null,o),t.child=wo(t,null,s,o)):xs(e,t,s,o),t.memoizedState=r.state,i&&Vi(t,n,!0),t.child}function Rs(e){var t=e.stateNode;t.pendingContext?Di(0,t.pendingContext,t.pendingContext!==t.context):t.context&&Di(0,t.context,!1),Go(e,t.containerInfo)}function Ns(e,t,n,r,i){return po(),mo(i),t.flags|=256,xs(e,t,n,r),t.child}var Ls,As,Ms,Ds,_s={dehydrated:null,treeContext:null,retryLane:0};function Os(e){return{baseLanes:e,cachePool:null,transitions:null}}function Vs(e,t,n){var r,i=t.pendingProps,a=ea.current,s=!1,l=0!==(128&t.flags);if((r=l)||(r=(null===e||null!==e.memoizedState)&&0!==(2&a)),r?(s=!0,t.flags&=-129):null!==e&&null===e.memoizedState||(a|=1),Ci(ea,1&a),null===e)return uo(t),null!==(e=t.memoizedState)&&null!==(e=e.dehydrated)?(0===(1&t.mode)?t.lanes=1:"$!"===e.data?t.lanes=8:t.lanes=1073741824,null):(l=i.children,e=i.fallback,s?(i=t.mode,s=t.child,l={mode:"hidden",children:l},0===(1&i)&&null!==s?(s.childLanes=0,s.pendingProps=l):s=Ou(l,i,0,null),e=_u(e,i,n,null),s.return=t,e.return=t,s.sibling=e,t.child=s,t.child.memoizedState=Os(n),t.memoizedState=_s,e):Fs(t,l));if(null!==(a=e.memoizedState)&&null!==(r=a.dehydrated))return function(e,t,n,r,i,a,s){if(n)return 256&t.flags?(t.flags&=-257,Is(e,t,s,r=cs(Error(o(422))))):null!==t.memoizedState?(t.child=e.child,t.flags|=128,null):(a=r.fallback,i=t.mode,r=Ou({mode:"visible",children:r.children},i,0,null),(a=_u(a,i,s,null)).flags|=2,r.return=t,a.return=t,r.sibling=a,t.child=r,0!==(1&t.mode)&&wo(t,e.child,null,s),t.child.memoizedState=Os(s),t.memoizedState=_s,a);if(0===(1&t.mode))return Is(e,t,s,null);if("$!"===i.data){if(r=i.nextSibling&&i.nextSibling.dataset)var l=r.dgst;return r=l,Is(e,t,s,r=cs(a=Error(o(419)),r,void 0))}if(l=0!==(s&e.childLanes),bs||l){if(null!==(r=Rl)){switch(s&-s){case 4:i=2;break;case 16:i=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:i=32;break;case 536870912:i=268435456;break;default:i=0}0!==(i=0!==(i&(r.suspendedLanes|s))?0:i)&&i!==a.retryLane&&(a.retryLane=i,_o(e,i),nu(r,e,i,-1))}return mu(),Is(e,t,s,r=cs(Error(o(421))))}return"$?"===i.data?(t.flags|=128,t.child=e.child,t=Tu.bind(null,e),i._reactRetry=t,null):(e=a.treeContext,ro=ui(i.nextSibling),no=t,io=!0,oo=null,null!==e&&(Ki[Qi++]=Gi,Ki[Qi++]=Xi,Ki[Qi++]=qi,Gi=e.id,Xi=e.overflow,qi=t),t=Fs(t,r.children),t.flags|=4096,t)}(e,t,l,i,r,a,n);if(s){s=i.fallback,l=t.mode,r=(a=e.child).sibling;var u={mode:"hidden",children:i.children};return 0===(1&l)&&t.child!==a?((i=t.child).childLanes=0,i.pendingProps=u,t.deletions=null):(i=Mu(a,u)).subtreeFlags=14680064&a.subtreeFlags,null!==r?s=Mu(r,s):(s=_u(s,l,n,null)).flags|=2,s.return=t,i.return=t,i.sibling=s,t.child=i,i=s,s=t.child,l=null===(l=e.child.memoizedState)?Os(n):{baseLanes:l.baseLanes|n,cachePool:null,transitions:l.transitions},s.memoizedState=l,s.childLanes=e.childLanes&~n,t.memoizedState=_s,i}return e=(s=e.child).sibling,i=Mu(s,{mode:"visible",children:i.children}),0===(1&t.mode)&&(i.lanes=n),i.return=t,i.sibling=null,null!==e&&(null===(n=t.deletions)?(t.deletions=[e],t.flags|=16):n.push(e)),t.child=i,t.memoizedState=null,i}function Fs(e,t){return(t=Ou({mode:"visible",children:t},e.mode,0,null)).return=e,e.child=t}function Is(e,t,n,r){return null!==r&&mo(r),wo(t,e.child,null,n),(e=Fs(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function zs(e,t,n){e.lanes|=t;var r=e.alternate;null!==r&&(r.lanes|=t),Ro(e.return,t,n)}function Bs(e,t,n,r,i){var o=e.memoizedState;null===o?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:i}:(o.isBackwards=t,o.rendering=null,o.renderingStartTime=0,o.last=r,o.tail=n,o.tailMode=i)}function $s(e,t,n){var r=t.pendingProps,i=r.revealOrder,o=r.tail;if(xs(e,t,r.children,n),0!==(2&(r=ea.current)))r=1&r|2,t.flags|=128;else{if(null!==e&&0!==(128&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&zs(e,n,t);else if(19===e.tag)zs(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(Ci(ea,r),0===(1&t.mode))t.memoizedState=null;else switch(i){case"forwards":for(n=t.child,i=null;null!==n;)null!==(e=n.alternate)&&null===ta(e)&&(i=n),n=n.sibling;null===(n=i)?(i=t.child,t.child=null):(i=n.sibling,n.sibling=null),Bs(t,!1,i,n,o);break;case"backwards":for(n=null,i=t.child,t.child=null;null!==i;){if(null!==(e=i.alternate)&&null===ta(e)){t.child=i;break}e=i.sibling,i.sibling=n,n=i,i=e}Bs(t,!0,n,null,o);break;case"together":Bs(t,!1,null,null,void 0);break;default:t.memoizedState=null}return t.child}function Us(e,t){0===(1&t.mode)&&null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2)}function Ws(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Ol|=t.lanes,0===(n&t.childLanes))return null;if(null!==e&&t.child!==e.child)throw Error(o(153));if(null!==t.child){for(n=Mu(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Mu(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Hs(e,t){if(!io)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function Ys(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,r=0;if(t)for(var i=e.child;null!==i;)n|=i.lanes|i.childLanes,r|=14680064&i.subtreeFlags,r|=14680064&i.flags,i.return=e,i=i.sibling;else for(i=e.child;null!==i;)n|=i.lanes|i.childLanes,r|=i.subtreeFlags,r|=i.flags,i.return=e,i=i.sibling;return e.subtreeFlags|=r,e.childLanes=n,t}function Ks(e,t,n){var r=t.pendingProps;switch(to(t),t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Ys(t),null;case 1:case 17:return Ai(t.type)&&Mi(),Ys(t),null;case 3:return r=t.stateNode,Xo(),Pi(Ri),Pi(ji),ra(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(ho(t)?t.flags|=4:null===e||e.memoizedState.isDehydrated&&0===(256&t.flags)||(t.flags|=1024,null!==oo&&(au(oo),oo=null))),As(e,t),Ys(t),null;case 5:Zo(t);var i=qo(Qo.current);if(n=t.type,null!==e&&null!=t.stateNode)Ms(e,t,n,r,i),e.ref!==t.ref&&(t.flags|=512,t.flags|=2097152);else{if(!r){if(null===t.stateNode)throw Error(o(166));return Ys(t),null}if(e=qo(Yo.current),ho(t)){r=t.stateNode,n=t.type;var a=t.memoizedProps;switch(r[hi]=t,r[fi]=a,e=0!==(1&t.mode),n){case"dialog":Ir("cancel",r),Ir("close",r);break;case"iframe":case"object":case"embed":Ir("load",r);break;case"video":case"audio":for(i=0;i<_r.length;i++)Ir(_r[i],r);break;case"source":Ir("error",r);break;case"img":case"image":case"link":Ir("error",r),Ir("load",r);break;case"details":Ir("toggle",r);break;case"input":G(r,a),Ir("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!a.multiple},Ir("invalid",r);break;case"textarea":ie(r,a),Ir("invalid",r)}for(var l in ye(n,a),i=null,a)if(a.hasOwnProperty(l)){var u=a[l];"children"===l?"string"===typeof u?r.textContent!==u&&(!0!==a.suppressHydrationWarning&&Jr(r.textContent,u,e),i=["children",u]):"number"===typeof u&&r.textContent!==""+u&&(!0!==a.suppressHydrationWarning&&Jr(r.textContent,u,e),i=["children",""+u]):s.hasOwnProperty(l)&&null!=u&&"onScroll"===l&&Ir("scroll",r)}switch(n){case"input":Y(r),Z(r,a,!0);break;case"textarea":Y(r),ae(r);break;case"select":case"option":break;default:"function"===typeof a.onClick&&(r.onclick=Zr)}r=i,t.updateQueue=r,null!==r&&(t.flags|=4)}else{l=9===i.nodeType?i:i.ownerDocument,"http://www.w3.org/1999/xhtml"===e&&(e=se(n)),"http://www.w3.org/1999/xhtml"===e?"script"===n?((e=l.createElement("div")).innerHTML="