:root{--color-primary: #468ff6;--color-secondary: #053a8f;--color-accent: #ff9c33;--color-dark: #032863;--color-light: #71aefb;--color-white: #fff;--color-card-bg: rgba(36, 82, 150, .6);--color-card-hover: rgba(3, 40, 99, 1);--color-card-shadow: rgba(0, 0, 0, .3);--color-card-shadow-hover: rgba(255, 156, 51, .8)}*{padding:0;margin:0;box-sizing:border-box}html{scroll-behavior:smooth;overscroll-behavior:none}body{font-size:1.2rem;font-family:Arial,sans-serif;background:linear-gradient(to bottom,var(--color-primary) 0%,var(--color-secondary) 50%,var(--color-dark) 100%);overflow-x:hidden;overflow-y:auto;background-repeat:no-repeat}nav{top:0;left:0;right:0;position:fixed;display:flex;height:100px;align-items:center;padding-left:120px;border-bottom:4px solid var(--color-light);box-shadow:0 4px 8px var(--color-card-shadow);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:97}nav ul{opacity:0;pointer-events:none;transition:opacity .4s ease;display:flex;align-items:center;text-align:left;gap:60px;padding-left:20px;list-style-type:none;font-size:1.7rem;z-index:98}nav ul.active{opacity:1;pointer-events:auto}nav a:hover{color:var(--color-accent);transition:.4s}.hamburgerIconBackground{display:flex}.hamburgerIcon{display:flex;flex-direction:column;justify-content:space-between;position:absolute;top:2.1rem;left:3.2rem;width:36px;height:28px;cursor:pointer;transition:transform .4s ease;background:none;border:none;z-index:99}.bar{width:100%;height:4px;background:var(--color-white);border-radius:2px;transition:transform .4s ease,opacity .4s ease;z-index:100}.hamburgerIcon.active .bar:nth-child(1){transform:rotate(45deg) translateY(17.1px);background:var(--color-white)}.hamburgerIcon.active .bar:nth-child(2){opacity:0}.hamburgerIcon.active .bar:nth-child(3){transform:rotate(-45deg) translateY(-17.1px);background:var(--color-white)}.appContainer{display:flex;flex-direction:column;justify-content:center;align-items:center}#home{max-width:80vw}a{color:var(--color-white);border:none;outline:none;text-decoration:none}hr{width:90%;margin:0 auto;border:1px solid var(--color-accent)}section{min-height:100vh;max-width:87vw;display:flex;gap:2.4rem;flex-direction:column;justify-content:center;align-items:center;position:relative;text-align:center;color:var(--color-white);z-index:1}section h1{font-size:3.2rem;margin-top:8rem}section h2{font-size:2rem;text-decoration:underline}section h3{display:flex;flex-direction:column;text-align:center;font-size:1.5rem;margin:0;text-decoration:none}section h4{font-size:1.3rem;font-weight:lighter}section h5{font-size:1rem;font-weight:lighter}section h6{font-size:1.1rem;font-weight:lighter;text-align:center;margin:0}section p{text-align:justify;font-size:1.2rem;margin:0}section ul{text-align:justify;line-height:1.4;padding:0 50px 0 60px}section h1.homePageIntroduction{font-family:Coiny,Arial,sans-serif;font-size:4.4rem;letter-spacing:2px;line-height:1.3;margin:0}section p.professionalSummaryStyling{text-align:justify}section p.homePageIntroduction{margin:0;padding:0;text-align:center;font-size:1.3rem}footer{display:flex;justify-content:center;align-items:center;font-size:.8rem;color:var(--color-white);padding:30px 0}.oceanContainer{width:100%;height:100vh;position:fixed;bottom:0;left:0;z-index:-1;background:none}.socialMediaGrid{display:flex;gap:1.5rem;margin:10px}.socialMediaGrid svg{width:42px;height:42px}.socialMediaGrid svg:hover{fill:var(--color-accent);transition:.4s}.portfolioGrid{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(3,1fr);max-width:80vw;margin:0}.portfolioCardContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;padding:0;min-height:300px;border:2px solid var(--color-white);border-radius:4px;cursor:pointer;background:var(--color-card-bg);box-shadow:0 4px 8px var(--color-card-shadow);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);object-fit:cover}.cardImage{display:flex;justify-content:center;overflow:hidden;border-bottom:2px solid var(--color-white)}.cardImage img{width:100%;max-height:auto;object-fit:cover}.cardDescription{display:flex;flex-direction:column;gap:20px;width:100%;padding:20px}.portfolioDescription{padding:0;text-align:justify}.technology{text-align:center}.portfolioCardContainer:hover{color:var(--color-white);background:var(--color-card-hover);border:2px solid var(--color-white);box-shadow:4px 4px 10px 0 var(--color-card-shadow-hover);transition:.2s;transform:scale(1.01);-webkit-backdrop-filter:none;backdrop-filter:none}.portfolioCardContainer a{display:block;text-decoration:none;color:inherit}.portfolioCardContainer:nth-child(1){grid-column:1 / span 2;grid-row-start:1}.portfolioCardContainer:nth-child(2){grid-column:2 / span 2;grid-row-start:2}.portfolioCardContainer:nth-child(3){grid-column-start:3;grid-row-start:1}.portfolioCardContainer:nth-child(4){grid-column-start:1;grid-row-start:2}.resumeGrid{display:flex;flex-direction:column;gap:1.5rem;max-width:80vw;margin:0}.resumeCardContainer{display:flex;gap:2rem;flex-direction:column;justify-content:center;min-height:300px;padding:40px 60px;border:2px solid var(--color-white);border-radius:4px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:var(--color-card-bg);box-shadow:0 4px 8px var(--color-card-shadow)}.workExperienceCardContainer,.educationCardContainer{display:flex;gap:1.4rem;flex-direction:column;justify-content:center}.technicalCardContainer{display:flex;gap:1.4rem;justify-content:center}.resumeCardContainer:nth-child(1){grid-column:1 / span 5;grid-row-start:1}.resumeCardContainer:nth-child(2){grid-column:1 / span 5;grid-row:2 / span 2}.resumeCardContainer:nth-child(3){grid-column:1 / span 5;grid-row-start:4}.resumeCardContainer:nth-child(4){grid-column:1 / span 5;grid-row:5}.mobileGridTemplate{display:grid;gap:2rem;grid-template-columns:repeat(2,1fr)}.mobileGridTemplate hr{display:none}.mobileGridCardContainer{display:flex;flex-direction:column;justify-content:center;padding:20px;gap:1.5rem;border:2px solid var(--color-accent);border-radius:4px}.mobileGridCardContainer ul.smallCardContainer{margin:0 auto}ul.smallCardContainer{width:80%;margin:14px auto;padding:0;display:flex;gap:4px;flex-direction:column;text-align:left}.coralBackground{position:relative;width:100vw;height:160px;overflow:hidden}.coralBackground img{position:absolute;top:0;left:0;width:auto;height:100%}.coralBackground img.crab{z-index:10;top:30%;left:10%;width:100px}.coralBackground img.seaweed{z-index:5;width:100%;height:100%;object-fit:cover}@media (max-width: 400px){nav{height:76px;padding-left:68px;z-index:101}nav ul{gap:24px;padding-left:4px;font-size:1.3rem;z-index:102}.hamburgerIcon{top:1.5rem;left:1.7rem;width:28px;height:22px;z-index:103}.hamburgerIcon.active .bar:nth-child(1){transform:rotate(45deg) translateY(12.9px)}.hamburgerIcon.active .bar:nth-child(3){transform:rotate(-45deg) translateY(-12.9px)}section h1{font-size:2.5rem;margin-top:6.8rem}#home{gap:1.8rem;padding-top:3.9rem}#home p br{display:none}section h1.homePageIntroduction{font-size:2.8rem;letter-spacing:1.5px;line-height:1.2}section p.homePageIntroduction{text-align:center;-webkit-hyphens:none;hyphens:none;font-size:1.2rem}section p.professionalSummaryStyling{text-align:justify;-webkit-hyphens:auto;hyphens:auto}section p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;padding:0}section ul{text-align:left;line-height:1.2;padding:0 8px 0 18px}.socialMediaGrid{gap:1rem}.socialMediaGrid svg{width:34px;height:34px}.portfolioGrid,.resumeGrid{display:flex;flex-direction:column;gap:1.5rem;height:30%}.resumeCardContainer{padding:40px 20px}.mobileGridTemplate{display:flex;flex-direction:column;gap:1.5rem}.mobileGridCardContainer{display:flex;flex-direction:column;justify-content:center;gap:1.2rem}.mobileGridCardContainer ul.smallCardContainer{margin:0 auto}}@media (min-width: 401px) and (max-width: 746px){nav{height:80px;padding-left:70px;z-index:101}nav ul{gap:30px;padding-left:16px;font-size:1.4rem;z-index:102}.hamburgerIcon{top:1.5rem;left:2rem;width:32px;height:26px;z-index:103}.hamburgerIcon.active .bar:nth-child(1){transform:rotate(45deg) translateY(15.7px)}.hamburgerIcon.active .bar:nth-child(3){transform:rotate(-45deg) translateY(-15.7px)}section h1{font-size:2.6rem;margin-top:7rem}#home{gap:1.9rem;padding-top:4rem}#home p br{display:none}section h1.homePageIntroduction{font-size:3.3rem;letter-spacing:1.5px;line-height:1.2}section p{text-align:justify;padding:0}section ul{text-align:justify;line-height:1.2;padding:0 20px 0 30px}section p.homePageIntroduction{font-size:1.2rem}section p.professionalSummaryStyling{text-align:justify}.socialMediaGrid{gap:1.1rem}.socialMediaGrid svg{width:38px;height:38px}.portfolioGrid,.resumeGrid{display:flex;flex-direction:column;gap:1.5rem;height:30%}.resumeCardContainer{padding:40px 30px}.mobileGridTemplate{display:flex;flex-direction:column;gap:1.5rem}.mobileGridCardContainer{display:flex;flex-direction:column;justify-content:center;gap:1.2rem}.mobileGridCardContainer ul.smallCardContainer{margin:0 auto}}@media (min-width: 747px) and (max-width: 1200px){nav{height:92px;padding-left:90px;z-index:101}nav ul{gap:40px;padding-left:18px;font-size:1.5rem;z-index:102}.hamburgerIcon{top:1.9rem;left:2.3rem;width:34px;height:26px;z-index:103}.hamburgerIcon.active .bar:nth-child(1){transform:rotate(45deg) translateY(15.6px)}.hamburgerIcon.active .bar:nth-child(3){transform:rotate(-45deg) translateY(-15.6px)}section h1{margin-top:7.6rem}#home{gap:2rem;padding-top:4rem}#home p br{display:none}section p{padding:0}section ul{line-height:1.2;padding:0 30px 0 40px}section h1.homePageIntroduction{font-size:3.9rem;letter-spacing:1.5px}section p.professionalSummaryStyling{text-align:justify}.socialMediaGrid{gap:1.3rem}.socialMediaGrid svg{width:40px;height:40px}.largeCardContainer li{font-size:1.2rem;padding-left:5px}.portfolioGrid,.resumeGrid{display:flex;flex-direction:column;gap:1.5rem;height:30%}.resumeCardContainer{padding:40px}.mobileGridTemplate{display:grid;gap:2rem;grid-template-columns:repeat(2,1fr)}.mobileGridTemplate hr{display:none}.mobileGridCardContainer{display:flex;flex-direction:column;justify-content:center;padding:20px;gap:1.5rem;border:2px solid var(--color-accent);border-radius:4px}.mobileGridCardContainer ul.smallCardContainer{margin:0 auto}}@media (min-width: 2560px){.resumeGrid,.portfolioGrid,#home{max-width:58vw}}.bubble1,.bubble2,.bubble3{position:absolute;bottom:0;background-color:#fffc;border-radius:50%;opacity:0;z-index:1;pointer-events:none}@keyframes floatUpBubble1{0%{transform:translateY(0) translate(var(--startX));opacity:.7}10%{transform:translateY(-10vh) translate(calc(var(--startX) + 20px))}20%{transform:translateY(-20vh) translate(calc(var(--startX) + 40px))}30%{transform:translateY(-30vh) translate(calc(var(--startX) + 60px))}40%{transform:translateY(-40vh) translate(calc(var(--startX) + 70px));opacity:.8}50%{transform:translateY(-50vh) translate(calc(var(--startX) + 60px));width:16px;height:16px}60%{transform:translateY(-60vh) translate(calc(var(--startX) + 40px))}70%{transform:translateY(-70vh) translate(calc(var(--startX) + 20px));opacity:.7}80%{transform:translateY(-80vh) translate(var(--startX))}90%{transform:translateY(-90vh) translate(calc(var(--startX) - 20px));opacity:.9}to{transform:translateY(-100vh) translate(calc(var(--startX) - 40px));width:14px;height:14px;opacity:0}}@keyframes floatUpBubble2{0%{transform:translateY(0) translate(var(--startX));opacity:.8}10%{transform:translateY(-10vh) translate(calc(var(--startX) - 20px))}20%{transform:translateY(-20vh) translate(calc(var(--startX) - 40px))}30%{transform:translateY(-30vh) translate(calc(var(--startX) - 60px))}40%{transform:translateY(-40vh) translate(calc(var(--startX) - 70px));opacity:.8}50%{transform:translateY(-50vh) translate(calc(var(--startX) - 60px));width:20px;height:20px}60%{transform:translateY(-60vh) translate(calc(var(--startX) - 40px))}70%{transform:translateY(-70vh) translate(calc(var(--startX) - 20px))}80%{transform:translateY(-80vh) translate(var(--startX))}90%{transform:translateY(-90vh) translate(calc(var(--startX) + 20px));opacity:.9}to{transform:translateY(-100vh) translate(calc(var(--startX) + 40px));width:18px;height:18px;opacity:0}}@keyframes floatUpBubble3{0%{transform:translateY(0) translate(var(--startX));opacity:.8}10%{transform:translateY(-10vh) translate(calc(var(--startX) - 10px))}20%{transform:translateY(-20vh) translate(calc(var(--startX) - 20px))}30%{transform:translateY(-30vh) translate(calc(var(--startX) - 30px))}40%{transform:translateY(-40vh) translate(calc(var(--startX) - 40px));opacity:.8}50%{transform:translateY(-50vh) translate(calc(var(--startX) - 50px))}60%{transform:translateY(-60vh) translate(calc(var(--startX) - 60px))}70%{transform:translateY(-70vh) translate(calc(var(--startX) - 50px))}80%{transform:translateY(-80vh) translate(calc(var(--startX) - 40px));opacity:.9}90%{transform:translateY(-90vh) translate(calc(var(--startX) - 30px));opacity:0}to{transform:translateY(-100vh) translate(calc(var(--startX) - 20px));width:12px;height:12px}}.oceanContainer .bubble1:nth-child(1){--startX: 20vw;width:20px;height:20px;animation:floatUpBubble1 16s linear infinite 0s}.oceanContainer .bubble1:nth-child(2){--startX: 40vw;width:18px;height:18px;animation:floatUpBubble1 16s linear infinite 3s}.oceanContainer .bubble2:nth-child(3){--startX: 60vw;width:22px;height:22px;animation:floatUpBubble2 14s linear infinite 9s}.oceanContainer .bubble1:nth-child(4){--startX: 80vw;width:14px;height:14px;animation:floatUpBubble1 16s linear infinite 7s}.oceanContainer .bubble2:nth-child(5){--startX: 90vw;width:22px;height:22px;animation:floatUpBubble2 14s linear infinite 5s}.oceanContainer .bubble3:nth-child(6){--startX: 8vw;width:10px;height:10px;animation:floatUpBubble3 12s linear infinite 2s}.oceanContainer .bubble3:nth-child(7){--startX: 95vw;width:14px;height:14px;animation:floatUpBubble3 12s linear infinite 8s}.oceanContainer .bubble2:nth-child(8){--startX: 30vw;width:18px;height:18px;animation:floatUpBubble2 14s linear infinite 6s}.oceanContainer .bubble1:nth-child(9){--startX: 14vw;width:16px;height:16px;animation:floatUpBubble1 16s linear infinite 10s}.oceanContainer .bubble3:nth-child(10){--startX: 50vw;width:10px;height:10px;animation:floatUpBubble3 12s linear infinite 11s}.oceanContainer .bubble2:nth-child(11){--startX: 70vw;width:24px;height:24px;animation:floatUpBubble2 14s linear infinite 12s}
