@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,300&display=swap');

*{
margin: 0;
padding: 0;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #c9e4ea;
}
html{
scroll-behavior: smooth;
}
section{
scroll-margin-top: 2rem;
}
p{
color: #1f3d48;
}
a, .btn{
transition: all 300ms ease;
}
nav, .nav-links{
display: flex;
}
nav{
justify-content: space-around;
align-items: center;
height: 17vh;
}
.nav-links{
gap: 2rem;
list-style: none;
font-size: 1.5rem;
}
a{
color: #0c3547;
text-decoration: none;
text-decoration-color: transparent;
}
a:hover{
color: #2f7f96;
text-decoration: underline;
text-underline-offset: 1rem;
text-decoration-color: #9fd0dc;
}
.logo{
font-size:2rem;
}
.logo:hover{
cursor: default;
}
#hamburger-nav{
display: none;
}
.hamburger-menu{
position:relative;
display: inline-block;
}
.hamburger-icon{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 24px;
width:30px;
cursor: pointer;
}
.hamburger-icon span{
width: 100%;
height: 2px;
background-color: #0c3547;
transition: all 0.3s ease-in-out;
}
.menu-links{
position:absolute;
top: 100%;
right:0;
background-color: #e4f4f6;
width:fit-content;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.menu-links a{
display: block;
padding: 10px;
text-align: center;
font-size:1.5rem;
color:black;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.menu-links li{
list-style: none;
}
.menu-links.open{
max-height: min(30rem, 80vh);
border: #155e75 0.1rem solid;
border-radius: 0.5rem;
}
.hamburger-icon.open span:first-child{
transform: rotate(45deg) translate(10px,5px);
}
.hamburger-icon.open span:nth-child(2){
opacity: 0;
}
.hamburger-icon.open span:last-child{
transform: rotate(-45deg) translate(10px,-5px);
}
.hamburger-icon span:first-child{
transform: none;
}
.hamburger-icon span:first-child{
opacity: 1;
}
.hamburger-icon span:first-child{
transform: none;
}
section{
padding-top:4vh;
height: 72vh;
margin: 0 10rem;
box-sizing: border-box;
min-height: fit-content;
}
.section-container{
display:flex;
}
#profile{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 4rem;
padding-bottom: 6rem;
}
#profile .section__pic-container{
height: 340px;
width: 340px;
margin: 0 auto;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.15);
}
#jimmy{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 25%;
display: block;
}
.section__pic-container{
display: flex;
height: 400px;
width: 400px;
margin: auto;
}
.section__text{
align-self: center;
text-align: center;
}
.section__text p{
font-weight: 600;
}
.section__text__p1{
text-align: center;
}
.section__text__p2{
font-size: 1.75rem;
margin-bottom: 1rem;
}
.title{
font-size: 3rem;
text-align: center;
}
#socials-container{
display: flex;
justify-content: center;
margin-top: 1rem;
gap: 1rem;
}
.icon{
cursor:pointer;
height:2rem;
}
.btn-container{
display: flex;
justify-content: center;
gap:1rem;
}
.btn{
font-weight: 600;
transition: all 300ms ease;
padding: 1rem;
width:8rem;
border-radius: 2rem;
}
.btn-color-1, .btn-color-2{
border: #155e75 0.1rem solid;
}
.btn-color-1, .btn-color-2:hover{
background: #155e75;
color: white;
}
.btn-color-1:hover{
background: #0c3547;
}
.btn-color-2{
background:none;
}
.btn-color-2:hover{
border: #0c3547 0.1rem solid;
}
.btn-container{
gap:1rem;
}
#about{
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 8rem;
justify-content: center;
padding-bottom: 2rem;
}
.about-section-containers{
display: flex;
justify-content: center;
gap:4.5rem
}
.about-containers{
gap:1.5rem;
margin-bottom: 2rem;
margin-top: 2rem;
}
.about-details-container{
justify-content: center;
flex-direction: column;
}
.about-containers, .about-details-container{
display: flex;
}
.about-text{
padding-left: 0;
}
.about-pic{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2rem;
}
.arrow{
position: sticky;
bottom: 2.5rem;
display: block;
margin-left: auto;
margin-right: -5rem;
margin-top: auto;
padding-top: 1.5rem;
z-index: 2;
}
.details-container{
padding:1.5rem;
flex:1.5rem;
background: #f0fafb;
border-radius: 2rem;
border: #155e75 0.1rem solid;
text-align: center;
}
.section__pic-container{
height: 400px;
width: 400px;
margin: auto 0;
}
#experience{
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 8rem;
padding-bottom: 2rem;
}
.experience-sub-title{
color:#1f3d48;
font-weight: 600;
font-size: 1.75rem;
margin-bottom: 2rem;
}
.experience-details-container{
display: flex;
justify-content: center;
flex-direction: column;
margin-top: 2rem;
}
.occupations-heading{
margin-top: 4rem;
}
.occupations{
display: flex;
flex-direction: column;
gap: 2rem;
margin-top: 2rem;
margin-bottom: 6rem;
width: fit-content;
align-self: center;
}
.occupation-container{
padding:1.5rem;
flex:1.5rem;
background: #f0fafb;
border-radius: 1rem;
border: #155e75 0.1rem solid;
text-align: center;
}
.occupation{
text-align: center;
font-weight: bold;
margin-bottom: 1rem;
margin-top: 1rem;
}
.article-container{
display: flex;
text-align: inline;
flex-wrap: wrap;
flex-direction: row;
gap:2.5rem;
justify-content: space-around;
}
article{
display: flex;
width: 10rem;
justify-content: space-around;
gap: 0.5rem;
}
article .icon{
cursor:default;
}
#projects{
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 8rem;
padding-bottom: 2rem;
}
.color-container{
border-color:#155e75;
background:#f0fafb;
}
.project-img{
border-radius: 2rem;
width: 90%;
height: 90%;
}
.project-title{
margin: 1rem;
color: black;
}
.project-btn{
color:#0c3547;
border-color: #155e75;
}
#contact{
display: flex;
justify-content: center;
flex-direction: column;
height: 70vh;
}
.contact-info-upper-container{
display: flex;
justify-content: center;
border-radius: 2rem;
border: #155e75 0.1rem solid;
background: #e4f4f6;
margin: 2rem auto;
padding:0.5rem
}
.contact-info-container{
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin:1rem;
}
.contact-info-container p{
font-size: larger;
}
.contact-icon{
cursor: default;
height:2rem;

}
.email-icon{
height: 2.5rem;
}
footer{
height: 26vh;
margin: 0 1rem;
}
footer p{
text-align: center;
}
.dark{
background-color: #070f24;
color: #e6e6e6;
}
.nav-dark{
background-color: #070f24;
color: white;
}
.nav-dark a{
color: white;
}
.hamburger-dark > div.hamburger-menu > div.hamburger-icon > span{
background-color: white;
}
.profile-dark #socials-container > img{
filter: invert(100%);
}
.profile-dark p{
color: #c9d9f5;
}
.profile-dark .btn-color-2{
background-color: #c9e4ea;
}
.profile-dark .btn-color-2:hover{
color: black ;
}
.about-dark p{
color: white;
}
.about-dark .details-container{
background-color: #101f42;
border-color: #3b5cad;
}
.about-dark .details-container p{
color: white;
}
.about-dark .icon{
filter: invert(100%);
}
.about-dark > div > .about-details-container > .text-container > p{
color: white;
}
.experience-dark p{
color: white;
}
.experience-dark .details-container{
background-color: #101f42;
border-color: #3b5cad;
}
.experience-dark .occupation-container{
background: #101f42;
border-color: #3b5cad;
}
.experience-dark .experience-sub-title{
color: #cfe0ff;
}
.experience-dark .icon{
filter: invert(100%);
}
.experience-dark > div > div.about-containers > div > div > article > div > p{
color: white;
}
.experience-dark > div > div.occupations > p{
color: white;
}
.projects-dark p{
color: white;
}
.projects-dark .details-container{
background-color: #101f42;
border-color: #3b5cad;
}
.projects-dark > div > div > div > div.btn-container > button{
color: white;
}
.projects-dark > div > div > div > h2{
color: white;
}
.projects-dark .project-title a{
color: #8fb0f0;
}
.contact-dark p{
color: white;
}
.contact-dark > div > div > p > a{
color: #0c3547;
}
.contact-dark > div > div > img{
/*filter: invert(100%);*/
}
.footer-dark > nav > div > ul > li > a{
color: white;
}
.footer-dark p{
color: #9db8e8;
}
/* =============================================
   EXPERIENCE — stacked skill blocks (IT on top)
   ============================================= */
.experience-stack{
flex-direction: column;
align-items: stretch;
}
.experience-stack .details-container:first-child{
order: 2;
}

/* =============================================
   OCCUPATIONS — chronological year timeline
   ============================================= */
.timeline{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 6rem auto;
gap: 0 1.5rem;
width: 100%;
position: relative;
}
.timeline-line{
grid-column: 1 / -1;
grid-row: 2;
align-self: center;
height: 3px;
width: 100%;
background: #155e75;
border-radius: 2px;
}
.tl-1{grid-column: 1;}
.tl-2{grid-column: 2;}
.tl-3{grid-column: 3;}
.tl-4{grid-column: 4;}
.timeline-marker{
grid-row: 2;
position: relative;
align-self: stretch;
z-index: 1;
}
.timeline-dot{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
box-sizing: border-box;
border-radius: 50%;
background: #155e75;
border: 3px solid #c9e4ea;
}
.timeline-year{
position: absolute;
top: calc(50% + 14px);
left: 50%;
transform: translateX(-50%);
font-weight: 600;
font-size: 0.95rem;
color: #155e75;
}
/* short stem connecting dot to its card */
.timeline-marker::before{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: #155e75;
opacity: 0.5;
}
.timeline-marker.tl-1::before,
.timeline-marker.tl-3::before{
top: 0;
bottom: calc(50% + 8px);
}
.timeline-marker.tl-2::before,
.timeline-marker.tl-4::before{
top: calc(50% + 8px);
bottom: 0;
}
.timeline-card.above{
grid-row: 1;
align-self: end;
}
.timeline-card.below{
grid-row: 3;
align-self: start;
}
.timeline .occupation-container{
height: 100%;
box-sizing: border-box;
}
.timeline .occupation{
font-size: 1rem;
margin: 0.25rem 0 0.75rem;
}
.timeline .occupation-container p{
font-size: 0.8rem;
}
/* timeline in dark mode */
.experience-dark .timeline-line{
background: #7ea1e8;
}
.experience-dark .timeline-dot{
background: #7ea1e8;
border-color: #070f24;
}
.experience-dark .timeline-year{
color: #cfe0ff;
}
.experience-dark .timeline-marker::before{
background: #7ea1e8;
}

/* =============================================
   DARK MODE — twinkling stars
   ============================================= */
@keyframes twinkle{
0%, 100% {opacity: 0.9;}
50% {opacity: 0.2;}
}
.dark::before,
.dark::after{
content: "";
position: fixed;
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
background: transparent;
pointer-events: none;
z-index: -1;
animation: twinkle 4s ease-in-out infinite;
box-shadow:
63.9vw 2.5vh #c9e4ea,
24.5vw 14.0vh #ffffff,
67.7vw 89.2vh #ffffff,
59.0vw 3.2vh #ffffff,
21.9vw 50.5vh #ffffff,
56.1vw 71.6vh #aecbfa,
54.5vw 22.0vh #aecbfa,
27.8vw 86.9vh #ffffff,
69.8vw 34.0vh #ffffff,
21.5vw 76.3vh #ffffff,
9.3vw 9.7vh #c9e4ea,
60.4vw 80.7vh #aecbfa,
45.9vw 12.5vh #c9e4ea,
7.9vw 29.3vh #aecbfa,
61.9vw 86.2vh #aecbfa,
19.2vw 7.0vh #aecbfa,
22.8vw 28.9vh #ffffff,
85.5vw 86.6vh #c9e4ea,
27.8vw 63.6vh #c9e4ea,
16.3vw 35.5vh #aecbfa,
26.7vw 93.7vh #aecbfa,
7.1vw 63.5vh #aecbfa,
72.9vw 16.3vh #c9e4ea,
27.0vw 92.5vh #aecbfa,
55.7vw 68.5vh #ffffff,
22.9vw 3.2vh #c9e4ea,
40.1vw 6.6vh #aecbfa,
87.6vw 31.5vh #aecbfa,
49.9vw 88.5vh #aecbfa,
45.9vw 26.5vh #ffffff,
74.5vw 53.9vh #aecbfa,
58.5vw 89.8vh #c9e4ea,
36.2vw 99.7vh #ffffff,
51.0vw 9.1vh #ffffff,
86.1vw 15.3vh #ffffff,
79.2vw 42.2vh #ffffff,
38.5vw 59.6vh #c9e4ea,
52.9vw 97.1vh #ffffff,
68.0vw 11.5vh #aecbfa,
75.1vw 76.9vh #c9e4ea,
11.2vw 43.5vh #c9e4ea,
0.3vw 72.2vh #aecbfa,
26.3vw 50.1vh #ffffff,
50.8vw 10.6vh #aecbfa,
29.8vw 63.9vh #aecbfa,
19.9vw 37.4vh #ffffff,
53.9vw 77.9vh #aecbfa,
91.8vw 59.9vh #c9e4ea,
1.9vw 92.9vh #c9e4ea,
23.9vw 24.1vh #aecbfa,
94.7vw 8.6vh #c9e4ea,
81.6vw 97.8vh #aecbfa,
76.6vw 12.8vh #c9e4ea,
94.7vw 16.5vh #aecbfa,
87.2vw 42.3vh #ffffff,
92.9vw 75.5vh #aecbfa,
20.1vw 31.2vh #aecbfa,
65.0vw 43.8vh #aecbfa,
45.1vw 24.8vh #ffffff,
33.8vw 58.8vh #ffffff,
58.8vw 0.7vh #aecbfa,
63.1vw 22.9vh #ffffff,
86.0vw 7.1vh #ffffff,
27.8vw 48.5vh #aecbfa,
13.2vw 93.6vh #aecbfa,
57.6vw 24.3vh #c9e4ea,
80.7vw 19.0vh #ffffff,
65.9vw 35.4vh #c9e4ea,
46.7vw 72.9vh #aecbfa,
65.3vw 64.6vh #ffffff;
}
.dark::after{
width: 3px;
height: 3px;
animation: twinkle 6s ease-in-out infinite 1.5s;
box-shadow:
40.3vw 33.9vh #ffffff,
24.9vw 19.0vh #cfe0ff,
14.0vw 18.3vh #cfe0ff,
25.0vw 92.3vh #cfe0ff,
80.8vw 85.6vh #ffffff,
5.1vw 99.9vh #ffffff,
96.9vw 92.6vh #ffffff,
16.6vw 48.6vh #ffffff,
86.5vw 90.2vh #ffffff,
37.9vw 98.5vh #cfe0ff,
92.7vw 78.5vh #cfe0ff,
42.3vw 95.7vh #cfe0ff,
15.5vw 29.7vh #ffffff,
57.9vw 54.2vh #cfe0ff,
5.7vw 58.4vh #ffffff,
5.7vw 50.8vh #ffffff,
6.9vw 6.8vh #ffffff,
40.4vw 94.2vh #ffffff,
57.9vw 4.0vh #ffffff,
41.9vw 58.4vh #cfe0ff,
93.5vw 20.4vh #cfe0ff,
23.9vw 39.6vh #cfe0ff,
45.7vw 92.9vh #ffffff,
0.9vw 62.1vh #ffffff,
7.3vw 21.3vh #cfe0ff,
13.2vw 34.9vh #ffffff,
87.9vw 37.0vh #ffffff,
43.8vw 54.3vh #cfe0ff,
61.2vw 98.7vh #ffffff,
66.8vw 55.5vh #ffffff,
93.9vw 13.4vh #ffffff,
89.0vw 74.2vh #ffffff,
27.2vw 60.5vh #cfe0ff,
20.4vw 63.4vh #cfe0ff,
50.5vw 25.1vh #ffffff;
}

/* =============================================
   ROUND 3 ADJUSTMENTS
   ============================================= */
/* Tighter horizontal spacing between skill entries */
.experience-stack .article-container{
max-width: 58rem;
margin: 0 auto;
justify-content: center;
gap: 1.5rem 2.5rem;
}
/* More breathing room between skills and History */
.occupations-heading{
margin-top: 7rem;
}
/* Year labels sit opposite the card so stems never cross them */
.timeline-marker.tl-2 .timeline-year,
.timeline-marker.tl-4 .timeline-year{
top: auto;
bottom: calc(50% + 14px);
}
/* Larger, more readable timeline panel text */
.timeline .occupation{
font-size: 1.05rem;
}
.timeline .occupation-container p{
font-size: 0.95rem;
}
/* Theme toggle: moon in light mode, sun in dark mode */
.theme-icon{
cursor: pointer;
}
.sun-icon{
display: none;
height: 2rem;
width: 2rem;
}
.dark .moon-icon,
.profile-dark .moon-icon{
display: none;
}
.dark .sun-icon,
.profile-dark .sun-icon{
display: inline-block;
}

/* =============================================
   ROUND 4 ADJUSTMENTS
   ============================================= */
/* Theme toggle icons match button height, centered on the row */
.btn-container{
align-items: center;
}
.theme-icon,
.sun-icon{
height: 3.05rem;
width: 3.05rem;
}
/* Experience blocks: 3x2 grid of entries, panels shrink to fit */
.experience-stack{
align-items: center;
}
.experience-stack .details-container{
width: auto;
padding: 1.5rem 3rem;
}
.experience-stack .article-container{
display: grid;
grid-template-columns: repeat(3, 12rem);
gap: 2rem 4rem;
justify-content: center;
max-width: none;
margin: 0;
}
.experience-stack article{
width: auto;
justify-content: center;
gap: 0.75rem;
}
/* Slight spacing between the History title and the timeline */
.occupations.timeline{
margin-top: 3.5rem;
}
/* Jumpable sections fill the viewport so every arrow pins to the same spot */
#profile,
#about,
#experience,
#projects{
height: auto;
min-height: calc(100vh - 2rem);
}

/* =============================================
   ROUND 5 ADJUSTMENTS
   ============================================= */
/* Content centers vertically in each full-height section;
   the top auto-margin mirrors the arrow's bottom auto-margin */
#profile > :first-child,
#about > :first-child,
#experience > :first-child,
#projects > :first-child{
margin-top: auto;
}
/* Skill blocks side by side: Information Technology left, Full Stack right */
.experience-stack{
flex-direction: row;
align-items: stretch;
justify-content: center;
}
.experience-stack .details-container{
padding: 1.5rem 2rem;
}
.experience-stack .article-container{
grid-template-columns: repeat(3, 9.5rem);
gap: 1.25rem 1.5rem;
}

/* =============================================
   ROUND 6 ADJUSTMENTS
   ============================================= */
/* Skill panels hug their content instead of stretching wide */
.experience-stack .details-container{
flex: 0 0 auto;
width: auto;
}
/* Entries align cleanly with their checkmark icons */
.experience-stack .article-container{
grid-template-columns: repeat(3, 11rem);
gap: 1.25rem 1.75rem;
justify-items: start;
}
.experience-stack article{
width: auto;
justify-content: flex-start;
align-items: center;
gap: 0.6rem;
text-align: left;
}
.experience-stack article h3,
.experience-stack article p{
text-align: left;
}
/* About Me: slightly larger cards and text, centered bio */
#about .details-container{
padding: 2rem 1.75rem;
}
#about .details-container h3{
font-size: 1.3rem;
}
#about .details-container p{
font-size: 1rem;
}
.about-text{
text-align: center;
}
.about-text p{
font-size: 1.15rem;
}

/* =============================================
   ROUND 7 ADJUSTMENTS — stable anchor jumps
   ============================================= */
/* Reserve project image space before load so #projects/#contact
   anchor positions don't shift as thumbnails come in */
.project-img{
aspect-ratio: 3 / 2;
height: auto;
object-fit: contain;
}
/* Contact fills the viewport so its anchor can reach the top */
#contact{
height: auto;
min-height: calc(100vh - 2rem);
}

/* Hamburger dropdown stacks above the positioned page sections
   (profile etc. were intercepting clicks on the lower menu items) */
.hamburger-menu{
z-index: 60;
}
.menu-links{
z-index: 60;
}

/* =============================================
   ROUND 8 — MOBILE HARDENING
   ============================================= */
/* No horizontal pan on any device: clip stray overflow at the root.
   (hidden fallback first; clip preferred - doesn't create a scroll container) */
html, body{
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}
/* iOS Safari: keep text at authored size, no auto-inflation */
html{
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Media can never push past its container */
img, svg, video{
max-width: 100%;
}
/* Keep the profile/about picture crops working under the max-width cap */
#jimmy, .about-pic{
max-width: none;
width: 100%;
}