/*------------GLOBAL STYLES - Common across all pages------------*/
/* Loading screen styles */
            #loading-screen {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to left, #141136, #262252);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;
                transition: opacity 0.5s ease-out;
            }
            
            #loading-screen.fade-out {
                opacity: 0;
                pointer-events: none;
            }
            
            #loading-svg {
                width: 100%;
                height: 100%;
                visibility: hidden;
            }
            
            /* Loading circles with carousel snapper colors */
            #loading-screen #leader {
                fill: #ea7d6d;
                stroke: #ea7d6d;
            }
            
            #loading-screen .follower {
                fill: #fdcd00;
                stroke: #fdcd00;
            }
            
            /* Text looping effect styles */
            .text-loop-wrapper {
                overflow: hidden;
                position: relative;
                display: inline-block;
                height: 1em;
                line-height: 1em;
                vertical-align: baseline;
            }
            
            .text-loop-list {
                display: flex;
                flex-direction: column;
                position: relative;
            }
            
            .text-loop-word {
                white-space: nowrap;
                height: 1em;
                line-height: 1em;
            }
            
            /* Hide main content during loading */
            body.loading #scale-wrapper {
                visibility: hidden;
            }
            
            /* Particle canvas background */
            #particle-canvas {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                pointer-events: none;
            }
            
            /* Dark/Light Mode Toggle - Pill Shape with Labels */
            #theme-toggle {
                position: fixed;
                top: 1.5rem;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                gap: 0.75rem;
                z-index: 100;
            }
            
            .theme-label {
                font-family: Verdana, Tahoma, Arial, sans-serif;
                font-size: 0.875rem;
                font-weight: bold;
                color: #fdcd00;
                letter-spacing: 0.05em;
                transition: color 0.3s ease;
            }
            
            /* Switch container */
            .switch {
                position: relative;
                display: inline-block;
                width: 60px;
                height: 30px;
            }
            
            /* Hide default HTML checkbox */
            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            
            /* The slider (pill background) */
            .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ea7d6d;
                transition: 0.3s;
                border-radius: 30px;
            }
            
            .slider:before {
                position: absolute;
                content: "";
                height: 22px;
                width: 22px;
                left: 4px;
                bottom: 4px;
                background-color: #fdcd00;
                transition: 0.3s;
                border-radius: 50%;
            }
            
            /* Checked state - slider moves to right */
            input:checked + .slider {
                background-color: #ea7d6d;
            }
            
            input:checked + .slider:before {
                transform: translateX(30px);
            }
            
            /* Hover effect */
            .switch:hover .slider {
                background-color: #c96a5a;
            }
            
            /* Light mode styles */
            body.light-mode {
                background: linear-gradient(to left, #e8e4f3, #f0ecff);
            }
            
            body.light-mode #particle-canvas {
                opacity: 0.7;
            }
            
            body.light-mode h2.salutation,
            body.light-mode h1.name,
            body.light-mode h3.title,
            body.light-mode #copyright {
                color: #8b4d6d;
            }
            
            body.light-mode .description {
                color: #2d2d2d;
            }
            
            body.light-mode .logo {
                color: #b89500;
            }
            
            /* Light mode toggle label colors */
            body.light-mode .theme-label {
                color: #b89500;
            }
            
            body.light-mode .slider {
                background-color: #d4a5d4;
            }
            
            body.light-mode .slider:before {
                background-color: #b89500;
            }
            
            body.light-mode .switch:hover .slider {
                background-color: #c090c0;
            }
            
            /* Light mode text colors for all pages */
            body.light-mode h2,
            body.light-mode h3,
            body.light-mode li,
            body.light-mode p {
                color: #2d2d2d;
            }
            
            body.light-mode #skillstitle,
            body.light-mode #academic,
            body.light-mode #languages,
            body.light-mode .workhistory {
                color: #8b4d6d;
            }
            
            body.light-mode .courses li,
            body.light-mode .software li,
            body.light-mode .degrees li,
            body.light-mode .languagelist li,
            body.light-mode .leftlist li,
            body.light-mode .rightlist li {
                color: #2d2d2d;
            }
            
            body.light-mode .graphics,
            body.light-mode .threeD,
            body.light-mode .engines,
            body.light-mode .msc,
            body.light-mode .bfa,
            body.light-mode .one,
            body.light-mode .two,
            body.light-mode .three,
            body.light-mode .four,
            body.light-mode .five,
            body.light-mode .six {
                color: #5a5a5a;
            }
            
            body.light-mode #copyright1,
            body.light-mode #copyright4 {
                color: #8b4d6d;
            }
            
            body.light-mode .contact-form h2,
            body.light-mode .contact-input,
            body.light-mode .contact-input::placeholder {
                color: #2d2d2d;
            }
/* Prevent horizontal scrolling and set viewport height */
html {
  overflow: hidden;
  height: 100%;
}

/* Base body styles applied to all pages */
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(to left, #141136, #262252);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  overflow-x: hidden;
}
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Base design size */
#scale-wrapper {
    width: 100vw;
    height: 100vh;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
}
/* ---------NAVIGATION - Top navbar and links-------------*/

/* Fixed navigation bar at top of page */
#navbar {   
  font-weight: bold;
  font-size: 1.0rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  outline: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.25rem 1.25rem;
  z-index: 50;
}

/* Navigation button styles for upper right menu */
.navbutton {  
  width: 6.25rem;
  height: 2.5rem;
  font-weight: bold;
  border: 0;
  margin: 0 1.042vw;
  white-space: nowrap;
  font-size: 1.0rem;
  border-radius: 0.625rem;
  color: rgb(255, 255, 255);
  background-color: #ea7d6d;
  text-align: center;
  line-height: 2.5rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* Unvisited link state - white text, no underline */
a:link {
  color: rgb(255, 255, 255);
  text-decoration: none;
  display: inline-block;
}

/* Hover state for links and navigation buttons */
a:hover, .navbutton:hover {
  background-color: #141136;
  color: #fff3b4;
  transform: scale(1.05);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
}

/* Active state when link is being clicked */
.navbutton.active  {
  background-color: #141136;
  text-decoration: none;
  outline: 0.125rem solid #fff3b4;
  transform: scale(1.05);
}

/* Logo/name text in upper left corner */
.logo {   
  color: #fdcd00;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 1vw;
  font-weight: bold;
  float: left;
  margin: 1.5em;
  position: absolute;
  top: 0.781vw;
  left: 1.302vw;
  word-spacing: normal;
  text-align: left;
  z-index: -2;
}

/* -------------HOMEPAGE SPECIFIC STYLES--------------*/

/* Call-to-action button that links to portfolio */
.cta {
  font-family: Verdana, Tahoma, Arial, sans-serif;
  margin: 2em;
  padding: 0.6250em;
  width: 25vw;
  height: 9vh;
  position: absolute;
     top: 95%;
     left: 10%;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 2.1875rem;
  font-weight: bold;
  font-size: 1.5vw;
  background: linear-gradient(to left, #fdcd00, #fdcd00);
  border-radius: 1.25rem;
  word-spacing: 0;
  opacity: 0;
  z-index: 50;
  transform: translateY(-100%);
}



/* CTA button slide-in animation - triggered by class */
.cta.animate {
  animation: ctaanimation 1s ease forwards;
}

/* New CTA rotating line effect */




/* CTA button slide-in animation */
@keyframes ctaanimation {
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* CTA button hover effect */
.cta:hover {
  background: linear-gradient(to left, #ea7d6d, #ea7d6d);
  color: #fff3b4;
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
}

/* CTA button active/clicked state */
.cta:active {
  color: #a1493c;
}

/* Hero section wrapper containing main introduction content */
.hero-wrapper1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 95%;
  margin: 7.5em auto;
  padding: 0;
  flex-wrap: wrap;
  gap: 2.083vw;
}

/* Main information section with salutation, name, title, and description */
#main-information {
  font-family: Verdana, Tahoma, Arial, sans-serif;
  flex: 1 1 26.042vw;
  min-width: 14.583vw;
  margin: 1em;
  padding: 0.625rem;
  text-align: left;
  position: relative;
}

/* Salutation line ("Hi, my name is") */
h2.salutation {
  color: #ea7d6d;
  font-size: 2vw;
  font-weight: bold;
  margin: 0.1em;
  opacity: 0;
  transform: translateX(-3.125rem);
}

/* Salutation animation - triggered by class */
h2.salutation.animate {
  animation: salanimation 1s ease forwards;
}

/* Salutation animation - slide in from left */
@keyframes salanimation {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Name heading ("Nashwa Hamido") */
h1.name {
  color: #ea7d6d;
  font-size: 5.5vw;
  font-weight: bold;
  margin: 0;
  opacity: 0;
  transform: translateX(-12.5rem);
}

/* Name animation - triggered by class */
h1.name.animate {
  animation: nameanimation 1.2s ease forwards;
  animation-delay: 0.3s;
}

/* Name animation - slide in from left with delay */
@keyframes nameanimation {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Job title heading ("Multimedia Artist") */
h3.title {
  color: #ea7d6d;
  font-size: 3vw;
  font-weight: bold;
  margin: 0;
  opacity: 0;
  transform: translateX(-12.5rem);
}

/* Title animation - triggered by class */
h3.title.animate {
  animation: titleanimation 1.3s ease forwards;
  animation-delay: 0.6s;
}

/* Title animation - slide in from left with delay */
@keyframes titleanimation {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Professional description paragraph */
.description {
  color: rgb(234, 234, 234);
  font-size: 1vw;
  font-weight: bold;
  line-height: 1.8vw;
  margin-bottom: 1em;
  opacity: 0;
  transform: translateY(3.125rem);
}

/* Description animation - triggered by class */
.description.animate {
  animation: desanimation 1.5s ease forwards;
  animation-delay: 0.9s;
}

/* Description animation - slide in from bottom with delay */
@keyframes desanimation {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* -----------Homepage Motifs and Background Elements--------- */

/* Container for side images (character illustration and motifs) */
#side-images {
  flex: 1em 1em 50em;
  min-width: 100vw;
  height: 92vh;
  
}


/* Base styles for background motif images */
.upperbackground,   
.bottombackground {
  position: absolute;
  top: 0%;
  right: 0%;
  width: auto;
  height: auto;
  z-index: 10;
}

/* Upper yellow cloud motif */
.upperbackground {
  top: 0;
  right: -2%;
  max-width: 90vw;
  transform: translateX(100%);
}

/* Upper background animation - triggered by class */
.upperbackground.animate {
  animation: upperanimation 1s ease forwards;
}

/* Girl Illustration Wrapper */
#girl-illustration-wrapper {
  position: absolute;
  left: 58%;
  bottom: 17%;
  z-index: 12;
  /* Use the wrapper for positioning and hover */
}

/* Character illustration (girl playing games) */
.girlplayinggames {
  max-width: 34vw;
  height: auto;
  transform: translateY(100%);
  opacity: 0;
  display: block;
}

/* Girl illustration animation - triggered by class */
.girlplayinggames.animate {
  animation: girlanimation 1s ease forwards, wobble 4s ease-in-out 1.6s infinite;
  animation-delay: 0.6s, 0.6s;
}

/* Speech Bubble Styling */
#linkedin-bubble {
  position: absolute;
  top: 5vh;
  left: -3vw; /* Position to the left of the girl */
  width: 16vw;
  padding: 1.2vw 1.5vw;
  background-color: #ea7d6d !important; /* Peach color from the cloud */
  color: #fff3b4 !important; /* Light yellow text */
  border-radius: 1.5rem; /* Custom rounded corners for bubble style */
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: bold;
  font-size: 1vw;
  line-height: 1.4;
  text-decoration: none;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  cursor: pointer;
  z-index: 15;
  pointer-events: none; /* Don't block hover on wrapper */
  transform: translateX(-10px);
}

#linkedin-bubble p {
  margin: 0;
  padding: 0;
  color: #fff3b4 !important; /* Light yellow text for better contrast */
  font-size: 0.9vw;
}

/* Speech Bubble Pointer (Tail) */
#linkedin-bubble::after {
  content: '';
  position: absolute;
  right: -1.5vw; /* Position the tail to the right */
  top: 50%;
  width: 0;
  height: 0;
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-left: 1.5vw solid #ea7d6d; /* Peach color for the tail */
  transform: translateY(-50%);
}

/* Hover effect to show the bubble */
#girl-illustration-wrapper:hover #linkedin-bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Enable clicking when visible */
  transform: translateX(0);
}

/* Adjust girl animation to apply to wrapper */
#girl-illustration-wrapper.animate .girlplayinggames {
  animation: girlanimation 1s ease forwards, wobble 4s ease-in-out 1.6s infinite;
  animation-delay: 0.6s, 0.6s;
}

/* Re-target girl animation to the image inside the wrapper */
.girlplayinggames.animate {
  animation: none; /* Remove the old animation class usage */
}

/* Re-target girl animation to the image inside the wrapper */
#girl-illustration-wrapper.animate .girlplayinggames {
  animation: girlanimation 1s ease forwards, wobble 4s ease-in-out 1.6s infinite;
  animation-delay: 0.6s, 0.6s;
}

/* Girl illustration animation - slide in from bottom */
@keyframes girlanimation {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Wobble effect for girl illustration after initial animation */
@keyframes wobble {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) translateX(4px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-12px) translateX(-2px) rotate(-0.3deg);
  }
  75% {
    transform: translateY(-6px) translateX(3px) rotate(0.4deg);
  }
}

/* Apply wobble animation after initial slide-in completes */
.girlplayinggames.animate {
  animation: girlanimation 1s ease forwards, wobble 4s ease-in-out 1.6s infinite;
  animation-delay: 0.6s, 0.6s;
}

/* Lower coral/peach cloud motif */
.bottombackground {
  bottom: 0;
  right: -2%;
  max-width: 92vw;
  transform: translateY(100%);
}

/* Bottom background animation - triggered by class */
.bottombackground.animate {
  animation: bottomanimation 1s ease forwards;
}


/* Upper motif animation - slide in from right */
@keyframes upperanimation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Lower motif animation - slide in from bottom */
@keyframes bottomanimation {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Copyright footer - unique positioning for homepage */
#copyright {
  color: #ea7d6d;
  font-size: 1vw;
  font-weight: normal;
  text-align: center;
  position: relative;
  bottom: 90%;
  right: 22%;
  transform: translateX(0%);
  z-index: 10;
}

/* ----------------ABOUT PAGE SPECIFIC STYLES----------------- */



/* Animated side navigation tabs - only on about landing page */

ul.sidetabs-animated {
  list-style-type: none;
  line-height: 5.0rem;
  position: absolute;
  top: 12rem;
  left: -3.125rem;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Side navigation animation - slide in from right */
@keyframes sideanimation {
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Animated side navigation button styles */
.sidenavbutton-animated {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 18.75rem;
  height: 2.5rem;
  font-weight: bold;
  border: 0;
  font-size: 1.0rem;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  word-spacing: 0;
  color: #141136;
  background: linear-gradient(to left, #fdcd00, #fdcd00);
  line-height: 2.5rem;
  text-align: center;
}

/* Animated side navigation button hover effect */
.sidenavbutton-animated:hover {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d);
  color: #fff3b4;
  transform: scale(1.20);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
}

/* Animated side navigation button active state */
.sidenavbutton-animated.active {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d);
  color: #fff3b4;
  transform: scale(1.20);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
}

/* Main content container for about page */
.container1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  max-width: 62.5rem;
  position: relative;
  left: 12.5rem;
  top: 9rem;
  width: 100%;
  margin: 0.625rem auto;
  padding: 0 0.625rem;
  flex-wrap: wrap;
  gap: 0.0625rem;
}

/* Work information section heading and content */
#workinfo {
  position: relative;
  left: 0;
  top: 0%;
  bottom: 0;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  width: 100%;
  text-align: left;
  color: #ea7d6d;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Left column list of work positions */
.leftlist {
  position: relative;
  top: 1.25rem;
  color: #fdcd00;
  text-align: left;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.625rem;
  width: 100%;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Right column list of work positions */
.rightlist {
  position: relative;
  top: -9.375rem;
  left: 45%;
  color: #fdcd00;
  text-align: left;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.625rem;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Individual work position detail lines (location and dates) */
.one, .two, .three, .four, .five, .six {
  text-align: left;
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: rgb(212, 212, 212);
}

/* Bottom action buttons container */
#bottomtabs {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  color: #141136;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 9.375rem;
  right: 10.0rem;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  color: #ea7d6d;
}

/* Download CV button styles */
.dlbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
  height: 2.5rem;
  font-weight: bold;
  border: 0;
  color: #141136;
  font-size: 1.0rem;
  border-radius: 0.625rem;
  word-spacing: 0;
  background: linear-gradient(to left, #ea7d6d, #ea7d6d);
  line-height: 2.5rem;
  text-align: center;
}

/* Download button hover effect */
.dlbutton:hover {
  background: linear-gradient(to right, #141136, #141136);
  color: #fff3b4;
  transform: scale(1.05);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
  background-color: #a1493c;
}

/* Download button active/clicked state */
.dlbutton:active {
  background-color: #ea7d6d;
  color: #fff3b4;
  transform: scale(1.05);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
  background-color: #a1493c;
}

/* LinkedIn button styles */
.libutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
  height: 2.5rem;
  font-weight: bold;
  color: #141136;
  border: 0;
  row-gap: 0.125rem;
  font-size: 1.0rem;
  border-radius: 0.625rem;
  word-spacing: 0;
  background: linear-gradient(to right, #ea7d6d, #ea7d6d);
  line-height: 2.5rem;
  text-align: center;
}

/* LinkedIn button hover effect */
.libutton:hover {
  background: linear-gradient(to right, #141136, #141136);
  color: #fff3b4;
  transform: scale(1.05);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
  background-color: #a1493c;
}

/* LinkedIn button active/clicked state */
.libutton:active {
  background-color: #ea7d6d;
  color: #fff3b4;
  transform: scale(1.05);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
  background-color: #a1493c;
}

/* Copyright footer - unique positioning for about pages */
#copyright1 {
  color: #ea7d6d;
  font-size: 0.75rem;
  width: 100vw;
  font-weight: normal;
  text-align: center;
  position: fixed;
       bottom: 1.25rem;
       left: 11.25rem;
  z-index: 10;
}

/* --------------SKILLS PAGE SPECIFIC STYLES --------------*/

/* Static side navigation tabs - on skills and education pages */
ul.sidetabs {
  list-style-type: none;
  line-height: 5.0rem;
  position: absolute;
  top: 12rem;
  left: -3.125rem;
}

/* Static side navigation button styles for skills and education pages*/
.sidenavbutton {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 18.75rem;
  height: 2.5rem;
  font-weight: bold;
  border: 0;
  font-size: 1.0rem;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  word-spacing: 0;
  color: #141136;
  background: linear-gradient(to left, #fdcd00, #fdcd00);
  line-height: 2.5rem;
  text-align: center;
}

/* Static side navigation button hover effect for skills and education pages*/
.sidenavbutton:hover {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d);
  color: #fff3b4;
  transform: scale(1.20);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
}

/* Static side navigation button active/focus states for skills and education pages */
.sidenavbutton.active {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d); 
  color: #fff3b4; 
  cursor: pointer; 
  transform: scale(1.20);
  outline: 0.125rem solid #fff3b4; 
}

/* Main content container for skills page */
.container2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 62.5rem;
  position: relative;
  left: 12.5rem;
  top: 9rem;
  width: 100%;
  margin: 0.625rem auto;
  padding: 0 0.625rem;
  flex-wrap: wrap;
  gap: 0.0625rem;
}

/* Skills section heading */

#skillstitle {
  position: relative;
  left: 0;
  top: 0%;
  bottom: 0;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  width: 100%;
  text-align: left;
  color: #ea7d6d;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Courses list section */
.courses {
  position: relative;
  top: 0rem;
  color: #fdcd00;
  text-align: left;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.625rem;
  width: 100%;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Software proficiency list section */
.software {
  position: relative;
  top: 0rem;
  right: 6.25rem;
  color: #fdcd00;
  text-align: left;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.625rem;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* Software category detail lines (Graphic, 3D, Engines) */
.graphics, .threeD, .engines {
  text-align: left;
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: rgb(212, 212, 212);
}

/* ------------------EDUCATION PAGE SPECIFIC STYLES----------------- */

/* Main content container for education page */
.container3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 62.5rem;
  position: relative;
  left: 12.5rem;
  top: 9rem;
  width: 100%;
  margin: 0.625rem auto;
  padding: 0 0.625rem;
  flex-wrap: wrap;
  gap: 0.0625rem;
}

/* Academic background section heading */
#academic {
  display: flex;
  position: fixed;
  top: 8.125rem;
  left: 24.375rem;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  margin: 2em;
  padding: 0.625rem;
  color: #ea7d6d;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* title animation - slide in from right */
@keyframes sideanimation {
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Degrees list section */
.degrees {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 5.625rem;
  position: fixed;
  top: 10.3125rem;
  left: 26.25rem;
  color: #fdcd00;
  text-align: left;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.625rem;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* degrees list animation - slide in from right */
@keyframes sideanimation {
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Master's degree detail lines */
.msc {
  text-align: left;
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: rgb(212, 212, 212);
}

/* Bachelor's degree detail lines */
.bfa {
  text-align: left;
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: rgb(212, 212, 212);
}

/* Languages section heading */
#languages {
  display: flex;
  position: fixed;
  top: 8.125rem;
  left: 52.5rem;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  margin: 2em;
  padding: 0.625rem;
  color: #ea7d6d;
  opacity: 0;
  transform: translateX(-100%);
  animation: sideanimation 1s ease forwards;
}

/* language title animation - slide in from right */
@keyframes sideanimation {
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Languages list section */
.languagelist {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 5.625rem;
  position: fixed;
  top: 10.3125rem;
  left: 53.75rem;
  color: #fdcd00;
  text-align: left;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.625rem;
  opacity: 0;
  transform: translateX(-50%);
  animation: sideanimation 1s ease forwards;
}

/* Language list animation - slide in from right */
@keyframes sideanimation {
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Copyright footer - unique positioning for education page (duplicate from about) */
#copyright1 {
  color: #ea7d6d;
  font-size: 0.75rem;
  width: 100vw;
  font-weight: normal;
  text-align: center;
  position: fixed;
       bottom: 1.25rem;
       left: 11.25rem;
  z-index: 10;
}

/* -------------- PORTFOLIO PAGES - Carousel styles ----------*/

/* Global box-sizing and scrollbar styles for carousel */
* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent;
}

/* Hide scrollbar in WebKit browsers (Chrome, Safari) */
*::-webkit-scrollbar {
  width: 0;
}

/* Hide scrollbar track in WebKit browsers */
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Hide scrollbar thumb in WebKit browsers */
*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

/* Hide scrollbar in Internet Explorer and Edge */
* {
  -ms-overflow-style: none;
}

/* Reset list styles for carousel */
ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Main carousel container - centered on page */
#carousel {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48.75rem;
  height: 28.75rem;
  overflow: hidden;
  perspective: 6.25rem;
}

/* Carousel images - rounded corners */
#carousel img {
  border-radius: 1.25rem;
}

/* Carousel videos - rounded corners and 3D transform */
#carousel video {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
  transform: translateZ(0);
}

/* Carousel viewport - horizontal scrolling container */
.carouselviewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

/* Individual carousel slide */
.carouselslide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  counter-increment: item;
}

/* Carousel slide snapper - ensures slides snap to center */
.carouselsnapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
}


.carouselslide:last-child .carouselsnapper {
  animation-name: tostart, snap;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .carouselsnapper {
    animation-name: none;
  }
}

/* Disable animations when carousel is hovered or focused */
.carousel:hover .carouselsnapper,
.carousel:focus-within .carouselsnapper {
  animation-name: none;
}

/* Carousel navigation dots container */
.carouselnavigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

/* Carousel navigation list and items - inline display */
.carouselnavigation-list,
.carouselnavigation-item {
  display: inline-block;
}

/* Individual carousel navigation button (dot) */
.carouselnavigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ea7d6d;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

/* Carousel navigation button hover effect */
.carouselnavigation-button:hover {
  background-color: #fdcd00;
  transform: scale(1.10);
  cursor: pointer;
  outline: 0.125rem solid #fff3b4;
}

/* Carousel navigation button active/focus states */
.carouselnavigation-button.active {
  background-color: #ea7d6d;
  color: #fff3b4; 
  cursor: pointer; 
}

/* Previous and next slide navigation buttons */
.carouselprev,
.carouselnext {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

/* Previous button positioning */
.carouselprev {
  left: -1rem; 
}

/* Next button positioning */
.carouselnext {
  right: -1rem; 
}


/* Animated portfolio navigation tabs - only on portfolio landing page */
.portfoliotabs-animated {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  justify-content: center;
  gap: 2vw;
  animation-name: portfolionavanimation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

/* Portfolio navigation animation - slide in from top */
@keyframes portfolionavanimation {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

/* Animated portfolio navigation button styles */
.portfolionav-animated {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13vw;
  height: 6vh;
  font-weight: bold;
  border: 0;
  font-size: 1vw;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  background: linear-gradient(to left, #fdcd00, #fdcd00);
  line-height: 6vh;
  text-align: center;
  text-decoration: none;
}

/* Animated portfolio navigation button hover effect */
.portfolionav-animated:hover {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d);
  color: #fff3b4; 
  cursor: pointer; 
  outline: 0.125rem solid #fff3b4; 
}

/* Animated portfolio navigation button active */
.portfolionav-animated.active{
  background: linear-gradient(to right, #ea7d6d, #ea7d6d); 
  color: #fff3b4; 
  cursor: pointer; 
  outline: 0.125rem solid #fff3b4; 
}

/* Static portfolio navigation tabs - on other portfolio pages */
.portfoliotabs {  
  list-style-type: none;
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  justify-content: center;
  gap: 2vw;
}
/* Static portfolio navigation button styles */

.portfolionav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13vw;
  height: 6vh;
  font-weight: bold;
  border: 0;
  font-size: 1vw;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  background: linear-gradient(to left, #fdcd00, #fdcd00);
  line-height: 6vh;
  text-align: center;
  text-decoration: none;
}

/* Static portfolio navigation button hover effect */
.portfolionav:hover {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d); 
  color: #fff3b4; 
  cursor: pointer; 
  outline: 0.125rem solid #fff3b4; 
}

/* Static portfolio navigation button active states */
.portfolionav.active {
  background: linear-gradient(to right, #ea7d6d, #ea7d6d); 
  color: #fff3b4; 
  cursor: pointer; 
  outline: 0.125rem solid #fff3b4; 
}


/* Animated background motifs on portfolio landing page only */

/* Bottom left cloud motif - animated */
.bottomleftbackground-animated {  
  max-height: fit-content; 
  position: absolute; 
  max-width: 25vw; 
  bottom: 0%; 
  left: 0%; 
  justify-content: start; 
  z-index: -10; 
  animation-name: bottomleftanimation;
  animation-duration: 0.5s; 
}

/* Bottom left motif animation - slide in from left */
@keyframes bottomleftanimation {
  from {
    transform: translateX(-100%); 
  }
  to {
    transform: translateX(0%); 
  }
}

/* Bottom right cloud motif - animated */
.bottomrightbackground-animated {
  max-height: fit-content;
  position: absolute; 
  max-width: 55vw; 
  bottom: 0%; 
  right: 0%; 
  justify-content: end; 
  z-index: -10; 
  animation-name: bottomrightanimation;
  animation-duration: 0.5s; 
  animation-fill-mode: forwards; 
}

/* Bottom right motif animation - slide in from right */
@keyframes bottomrightanimation {
  from {
    transform: translateX(100%); 
  }
  to {
    transform: translateX(0%); 
  }
}

/* Static background motifs on other portfolio pages */

/* Bottom left cloud motif - static */
.bottomleftbackground  {  
  max-height: fit-content; 
  position: absolute; 
  max-width: 25vw; 
  bottom: 0%; 
  left: 0%; 
  justify-content: start; 
  z-index: -10; 
}

/* Bottom right cloud motif - static */
.bottomrightbackground {
  max-height: fit-content;
  position: absolute; 
  max-width: 55vw; 
  bottom: 0%; 
  right: 0%; 
  justify-content: end; 
  z-index: -10; 
}

/* Copyright footer - unique positioning for portfolio pages */
#copyright3 {
    display: flex; 
    justify-items: center; 
    align-items: center; 
    font-family: Verdana, Tahoma, Arial, sans-serif; 
    font-size: 1vw; 
    font-weight: normal; 
    color: #ea7d6d; 
    position: absolute; 
        bottom: 2%; 
        right:  36%; 
    word-spacing: 0; 
    z-index: 2; 
}

/* ------------------ ILLUSTRATIONS PAGE - Grid layout -------------------*/

/* Grid container for illustration stickers */
#grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.125rem, 2fr)); 
    gap: 1.875rem;    
    background: none; 
    background-color: transparent;
    max-width: 37.5rem; 
    margin: 7.5rem auto 7.5rem auto; 
    justify-items: center;
    
}

/* Individual sticker wrapper */
.sticker-wrapper {
    background-color: #262252;
    border-radius: 1.25rem;          
    display: flex;            
    justify-content: center;
    align-items: center;
    animation-duration: 1s;
    animation-name: iconanimation;
    animation-fill-mode: forwards;
    max-width: 12.5rem;
    width: 100%;
}

/* Grid hover effect */

#grid:hover {
    transform: scale(1.05);
}

/* Sticker wrapper animation - slide in from left */


@keyframes iconanimation   {
  from {
    transform: translateX(-500%);
  }
  to {
    transform: translateX(-5%);
  }   
}

/* Individual sticker image */
.sticker {
    max-width: 100%; 
    height: auto;
    display: block;
}



/* ---------CONTACT PAGE SPECIFIC STYLES----------*/

/* Contact form container - centered on page with animation */
#contact-container {
  height: 25.0rem; 
  display: flex; 
  align-items: center; 
  justify-content: space-evenly; 
  flex-grow: 3;
  position: relative; 
  bottom: 0%; 
  top: 18%;
  right: 0%; 
  opacity: 0;
  font-family: Verdana, Tahoma, Arial, sans-serif; 
  font-weight: bold; 
  word-spacing: 0;
  color: #fdcd00; 
  line-height: 0.9375rem; 
  z-index: 50; 
  animation-name: contactbuttonanimation;
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
}

@keyframes contactbuttonanimation {
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* Contact form styles */
.contact-form {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.75rem; 
  vertical-align: center; 
  margin: 0 auto; 
  font-weight: normal; 
  font-size: 1.25rem;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  z-index: 50; 
}

/* Contact form input fields */
.contact-input {
  width: 25.0rem; 
  height: 2.8125rem; 
  outline: none; 
  border: none; 
  font-family: Verdana, Tahoma, Arial, sans-serif; 
  font-size: 0.75rem; 
  font-weight: normal; 
  border-radius: 1.25rem; 
  padding: 0.625rem; 
  margin: 0.3125rem; 
  color: #3c3c3c; 
  z-index: 50; 
}

/* Contact input hover and focus states */
.contact-input:hover,
.contact-input:focus,
.contact-input:focus-visible .contact-input:active {
  cursor: pointer; 
  outline: 0.125rem solid #ea7d6d; 
}

/* Contact input placeholder text color */
.contact-input::placeholder {
  color: #929292 
}

/* Contact form textarea - larger input area for messages */
.contact-form textarea {
  height: 8.75rem; 
  border-radius: 1.25rem; 
  padding-top: 0.9375rem; 
}

/* Contact form submit button */
.contact-form button {
  width: 25.0rem; 
  height: 2.5rem; 
  font-size: 1.125rem; 
  vertical-align: center; 
  padding: 0; 
  opacity: 0;
  border: none;
  color: white; 
  font-weight: bold; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  border-radius: 0.75rem; 
  background: linear-gradient(to left, #fdcd00, #fdcd00); 
  animation-name: contactbuttonanimation;
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
  z-index: 50; 
}

@keyframes contactbuttonanimation {
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* Contact form button hover and focus stateses */
.contact-form button:hover,
.contact-form button:focus,
.contact-form button:focus-visible .contact-form button:active {
  background: linear-gradient(to left, #ea7d6d, #fdcd00); 
  color: #fff3b4;  
  transform: scale(1.05); 
  cursor: pointer; 
  outline: 0.125rem solid #fff3b4; 
}


/* Social icons container */
#socialicons {
  display: flex;
  position: relative;
  justify-content: center;  
  align-items: flex-end;     
  gap: 2.5rem;                
  margin-top: 12%;
}

#socialicons a {
  display: flex;
  align-items: flex-end;
}

#socialicons img {
  width: 2.1875rem;
  height: auto;
}

.linkedin {
    margin-bottom: 0%;
}

/* Behance logo icon hover */


.behance {
  margin-bottom: 0.2%;
}

/* LinkedIn logo icon hover */

.linkedin:hover {
    transform: scale(1.02);
    outline: none;
    background: none;
}

/* Behance logo icon hover */


.behance:hover {
    transform: scale(1.02);
    outline: none;
    background: none; 
}

/* Upper background motif for contact page */
.upperbackground2 {
    max-width: 68.75rem; 
    max-height: fit-content; 
    position: fixed; 
        top: -9.375rem; 
        right: 0; 
    justify-content: start; 
    z-index: -20; 
    animation-name: upperanimation2; 
    animation-duration:0.5s; 
}

/* Upper motif animation for contact page - slide in from right */
@keyframes upperanimation2   {
  from {
    transform: translateX(100%); 
  }
  to {
    transform: translateX(0%); 
  }   
}

/* Bottom background motif for contact page */
.bottombackground2 {
    max-width: 62.5rem; 
    max-height: fit-content; 
    position: fixed; 
        bottom: -1.25rem; 
        left: 0; 
    justify-content: start; 
    z-index: -20; 
    animation-name: bottomanimation2; 
    animation-duration: 0.5s; 
    animation-fill-mode: forwards; 
}

/* Bottom motif animation for contact page - slide in from left */
@keyframes bottomanimation2   {
  from {
    transform: translateX(-100%); 
  }
  to {
    transform: translateX(0%); 
  }   
}

/* Copyright footer - unique positioning for contact page */
#copyright4 {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: Verdana, Tahoma, Arial, sans-serif; 
    font-size: 0.75rem; 
    font-weight: normal; 
    color: #ea7d6d; 
    width: 100%;
    position: relative;
        bottom: 0%;
        top: 2%;
    word-spacing: 0; 
    z-index: 2; 
}

/* ==================== RESPONSIVE DESIGN - Media Queries ==================== */
/* Scale the desktop design to fit the screen (contain).
   Gated to the tablet breakpoint and up, so it is NEVER applied to the
   stacked mobile/tablet layout below. Using a single min() rule avoids the
   previous conflict between two competing scale rules, and keeps the whole
   design visible at any zoom level or aspect ratio. */
@media screen and (min-width: 64.0rem) {
    #scale-wrapper {
        transform-origin: top center;
        transform: scale(min(100vw / 1280, 100vh / 675));
    }
}
/* Tablets and smaller screens (max-width: 64.0rem) */
@media screen and (max-width: 64.0rem) {
  
  /* Navigation adjustments */
  #navbar {
    padding: 0.9375rem 0.625rem;
  }
  
  .navbutton {
    width: 5.0rem;
    height: 2.1875rem;
    font-size: 0.875rem;
    margin: 0 0.625rem;
    line-height: 2.1875rem;
  }
  
  .logo {
    font-size: 0.875rem;
    left: 0.9375rem;
    top: 0.625rem;
  }
  
  /* Homepage adjustments */
  .hero-wrapper1 {
    margin: 6.25rem 1.25rem;
    gap: 1.25rem;
  }
  
  h1.name {
    font-size: 3.125rem;
  }
  
  h2.salutation {
    font-size: 1.125rem;
  }
  
  h3.title {
    font-size: 1.5rem;
  }
  
  .cta {
    width: 15.625rem;
    height: 3.125rem;
    font-size: 1.0rem;
    left: 3.125rem;
    top: 15.625rem;
  }
  
  #side-images {
    display: none;
  }
  
  .girlplayinggames {
    display: none;
  }
  
  .upperbackground {
    display: none;
  }
  
  .bottombackground {
    display: none;
  }
  
  /* About page adjustments */
  .container1 {
    left: 0%;
    right: 0%;
    max-width: 31.25rem;
  }
  
  ul.sidetabs-animated {
    left: -1.875rem;
    top: 9.375rem;
  }
  
  .sidenavbutton-animated {
    width: 15.625rem;
  }
  
  .rightlist {
    left: 0%;
  }
  
  #bottomtabs {
    bottom: 7.5rem;
    left: 0%;
    right: 0%;
    align-items: center;
  }
  
  .dlbutton, .libutton {
    width: 15.625rem;
  }
  
  /* Skills page adjustments */
  .container2 {
    left: 9.375rem;
    max-width: 50.0rem;
  }
  
  ul.sidetabs {
    left: -1.875rem;
    top: 9.375rem;
  }
  
  .sidenavbutton {
    width: 15.625rem;
  }
  
  /* Education page adjustments */
  .container3 {
    left: 50%;
    top: 10%;
    max-width: 50.0rem;
  }
  
  #academic {
    left: 18.75rem;
    top: 20%;
  }
  
  .degrees {
    left: 20.625rem;
    bottom: 10%;
  }
  
  #languages {
    left: 40.625rem;
    bottom: 10%;
  }
  
  .languagelist {
    right: 0%;
    bottom: 50%;
  }
  
  /* Portfolio carousel adjustments */
  #carousel {
    width: 40.625rem;
    height: 23.75rem;
  }
  
  .portfoliotabs-animated,
  .portfoliotabs {
    gap: 0.625rem;
  }
  
  .portfolionav-animated,
  .portfolionav {
    width: 7.5rem;
    font-size: 0.6875rem;
  }
  
  .bottomleftbackground-animated,
  .bottomleftbackground {
    display: none;
  }
  
  .bottomrightbackground-animated,
  .bottomrightbackground {
    display: none;
  }
  
  /* Illustrations grid adjustments */
  #grid {
    max-width: 31.25rem;
    gap: 1.25rem;
  }
  
  /* Contact page adjustments */
  #contact-container {
    right: 18.75rem;
  }
  
  .contact-input {
    width: 21.875rem;
  }
  
  .contact-form button {
    width: 21.875rem;
  }
  
  .linkedin {
    left: 30.0rem;
  }
  
  .behance {
    left: 33.125rem;
  }
  
  .upperbackground2 {
    max-width: 50rem;
  }
  
  .bottombackground2 {
    max-width: 45rem;
  }
}

/* Mobile devices and small tablets (max-width: 48.0rem) */
@media screen and (max-width: 48.0rem) {
  
  /* Navigation adjustments */
  #navbar {
    padding: 0.625rem 0.3125rem;
  }
  
  .navbutton {
    width: 4.375rem;
    height: 2.0rem;
    font-size: 0.75rem;
    margin: 0 0.3125rem;
    line-height: 2.0rem;
  }
  
  .logo {
    font-size: 0.75rem;
    left: 0.625rem;
    top: 0.5rem;
  }
  
  /* Move theme toggle below logo on mobile and make smaller */
  #theme-toggle {
    top: 3rem;
    left: 0.625rem;
    transform: none;
    gap: 0.375rem;
    scale: 0.75;
  }
  
  .theme-label {
    font-size: 0.625rem;
  }
  
  .switch {
    width: 45px;
    height: 22px;
  }
  
  .slider:before {
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
  }
  
  input:checked + .slider:before {
    transform: translateX(23px);
  }
  
  /* Homepage adjustments */
  .hero-wrapper1 {
    margin: 5.0rem 0.9375rem;
    flex-direction: column;
  }
  
  #main-information {
    text-align: center;
  }
  
  h1.name {
    font-size: 2.5rem;
  }
  
  h2.salutation {
    font-size: 1.0rem;
  }
  
  h3.title {
    font-size: 1.25rem;
  }
  
  .description {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }
  
  .cta {
    width: 13.75rem;
    height: 2.8125rem;
    font-size: 0.875rem;
    left: 45%;
    line-height: 1.25rem;
    transform: translateX(-50%) translateY(-100%);
    top: 18.75rem;
  }
  
  @keyframes ctaanimation {
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0%);
    }
  }
  
  #side-images {
    display: none;
  }
  
  .girlplayinggames {
    display: none;
  }
  
  .upperbackground {
    display: none;
  }
  
  .bottombackground {
    display: none;
  }
  
  #copyright {
    left: 0;
    top: 5rem;
    font-size: 2vw;
    transform: translateX(0);
    width: 100%;
  }
  
  /* About page adjustments */
  .container1 {
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.625rem;
    max-width: 90%;
  }
  
  ul.sidetabs-animated {
    position: relative;
    left: 0;
    top: 3.125rem;
    text-align: center;
    line-height: 3.75rem;
  }
  
  .sidenavbutton-animated {
    width: 12.5rem;
    height: 2.1875rem;
    font-size: 0.875rem;
    line-height: 2.1875rem;
  }
  
  #workinfo {
    left: 0;
    align-content: center;
  }
  
  .leftlist {
    top: 1.25rem;
    left: 0;
  }
  
  .rightlist {
    position: relative;
    left: 0;
    top: 1.25rem;
    margin-bottom: 2.5rem;
  }
  
  #bottomtabs {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 3.75rem auto 3.125rem auto;
  }
  
  .dlbutton, .libutton {
    width: 13.75rem;
    height: 2.1875rem;
    font-size: 0.875rem;
    line-height: 2.1875rem;
  }
  
  #copyright1 {
    position: relative;
    left: 0;
    bottom: auto;
    width: 100%;
    text-align: center;
    margin-top: 1.875rem;
    margin-bottom: 1.25rem;
  }
  
  /* Skills page adjustments */
  .container2 {
    left: 50%;
    transform: translateX(-50%);
    bottom: -3.125rem;
    max-width: 90%;
  }
  
  ul.sidetabs {
    position: relative;
    left: 0;
    top: 3.125rem;
    text-align: center;
    line-height: 3.75rem;
  }
  
  .sidenavbutton {
    width: 12.5rem;
    height: 2.1875rem;
    font-size: 0.875rem;
    line-height: 2.1875rem;
  }
  
  #skillstitle {
    left: 0;
  }
  
  .software {
    right: 0;
  }
  
  /* Education page adjustments */
  .container3 {
    position: static;
    left: auto;
    transform: none;
    bottom: auto;
    max-width: 90%;
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  ul.sidetabs {
    position: relative;
    left: 0;
    top: 3.125rem;
    text-align: center;
    line-height: 3.75rem;
    margin-bottom: 1.25rem;
  }
  
  #academic {
    position: static;
    left: auto;
    top: auto;
    margin: 1.25rem 0 0.625rem 0;
    text-align: center;
  }
  
  .degrees {
    position: static;
    left: auto;
    top: auto;
    margin: 0 0 2.5rem 0;
    text-align: center;
  }
  
  #languages {
    position: static;
    left: auto;
    top: auto;
    margin: 1.25rem 0 0.625rem 0;
    text-align: center;
  }
  
  .languagelist {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    margin: 0 0 1.25rem 0;
    text-align: center;
    line-height: 1.625rem;
  }
  
  #bottomtabs {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1.875rem auto 1.25rem auto;
  }
  
 /* Portfolio carousel adjustments */
  #carousel {
    width: 90vw;
    max-width: 31.25rem;
    height: 18.75rem;
  }
  
  .portfoliotabs-animated,
  .portfoliotabs {
    flex-wrap: wrap;
    gap: 0.625rem;
    bottom: 5.0rem;
  }
  
  .portfolionav-animated,
  .portfolionav {
    width: 8.75rem;
    height: 2.5rem;
    font-size: 0.6875rem;
    line-height: normal;
    padding: 0.3125rem;
    box-sizing: border-box;
  }
  
  .bottomleftbackground-animated,
  .bottomleftbackground {
    max-width: 12.5rem;
  }
  
  .bottomrightbackground-animated,
  .bottomrightbackground {
    max-width: 31.25rem;
  }
  
  #copyright3 {
    right: 50%;
    transform: translateX(50%);
    font-size: 0.625rem;
    bottom: 1.875rem;
    white-space: nowrap;
  }
  
  /* Illustrations grid adjustments */
  #grid {
    max-width: 90%;
    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
    gap: 0.9375rem;
    margin: 6.25rem auto;
  }
  
 /* Contact page adjustments */
  #contact-container {
    
    right: auto;
    bottom: auto;
    margin:auto;
    height: auto;
  }
  
  .contact-input {
    width: 90vw;
    max-width: 18.75rem;
  }
  
  .contact-form button {
    width: 90vw;
    max-width: 18.75rem;
  }
  

  .linkedin {
     margin-top: 22%;
     left: 55%;
  }
  
  .behance {
     left: 40%;
     margin-top: 0%;
     margin-bottom: 0.5%;
    
  }
  
  .upperbackground2 {
    display: none;
  }
  
  .bottombackground2 {
    display: none;
  }
  
  #copyright4 {
    right: 50%;
    transform: translateX(50%);
  }
}

/* Small mobile devices (max-width: 30.0rem) */
@media screen and (max-width: 30.0rem) {
  
  /* Navigation adjustments */
  .navbutton {
    width: 3.75rem;
    height: 1.75rem;
    font-size: 0.625rem;
    margin: 0 0.1875rem;
    line-height: 1.75rem;
  }
  
  .logo {
    font-size: 0.625rem;
  }
  
  /* Homepage adjustments */
  h1.name {
    font-size: 2.0rem;
  }
  
  h2.salutation {
    font-size: 0.875rem;
  }
  
  h3.title {
    font-size: 1.125rem;
  }
  
  .description {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
  
  .cta {
    width: 11.25rem;
    height: 2.5rem;
    font-size: 0.75rem;
  }
  
  .girlplayinggames {
    display: none;
  }
  
  .upperbackground {
    display: none;
  }
  
  .bottombackground {
    display: none;
  }
  
  /* About page adjustments */
  .sidenavbutton-animated {
    width: 11.25rem;
    height: 2.0rem;
    font-size: 0.75rem;
    line-height: 2.0rem;
  
  }
  
  .dlbutton, .libutton {
    width: 11.25rem;
    height: 2.0rem;
    font-size: 0.75rem;
    line-height: 2.0rem;
  }
  
  /* Skills page adjustments */
  .sidenavbutton {
    width: 11.25rem;
    height: 2.0rem;
    font-size: 0.75rem;
    line-height: 2.0rem;
  }
  
  /* Portfolio carousel adjustments */
  #carousel {
    height: 15.625rem;
  }
  
  .portfolionav-animated,
  .portfolionav {
    width: 6.875rem;
    height: 2.375rem;
    font-size: 0.5625rem;
    line-height: normal;
    padding: 0.3125rem;
    box-sizing: border-box;
  }
  
  .bottomleftbackground-animated,
  .bottomleftbackground {
    display: none;
  }
  
  .bottomrightbackground-animated,
  .bottomrightbackground {
    display: none;
  }
  
  /* Illustrations grid adjustments */
  #grid {
    grid-template-columns: repeat(auto-fit, minmax(5.0rem, 1fr));
    gap: 0.625rem;
  }
  
   /* Contact page adjustments */
  .contact-input {
    max-width: 16.25rem;
    height: 2.5rem;
  }
  
  .contact-form button {
    max-width: 16.25rem;
    height: 2.1875rem;
    font-size: 1.0rem;
  }
  
  .contact-form textarea {
    height: 7.5rem;
  }
  
  .upperbackground2 {
    display: none;
  }
  
  .bottombackground2 {
    display: none;
  }
  
  #copyright3 {
    font-size: 0.5625rem;
  }
}

/* ============================================ */
/* SUCCESS MESSAGE & CONFETTI STYLES */
/* ============================================ */

/* Success Message Container */
.success-message {
    text-align: center;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-message h2 {
    color: #fdcd00;
    font-size: 2.5rem;
    margin: 0 0 2rem 0;
    font-weight: bold;
    text-shadow: 0 0.125rem 0.625rem rgba(253, 205, 0, 0.3);
}

/* Send Another Message Button - Styled like Submit Button */
.send-another-btn {
    width: 100%;
    height: 3.125rem;
    font-size: 1.25rem;
    font-weight: bold;
    background: linear-gradient(to left, #fdcd00, #fdcd00);
    color: rgb(0, 0, 0);
    border: 0;
    border-radius: 1.875rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-top: 1rem;
}

.send-another-btn:hover {
    background: linear-gradient(to left, #ea7d6d, #ea7d6d);
    color: #fff3b4;
    outline: 0.125rem solid #fff3b4;
    transform: scale(1.05);
}

.send-another-btn:active {
    transform: scale(0.98);
}

/* Confetti Animation */
.confetti {
    position: fixed;
    width: 0.15rem;
    height: 0.15rem;
    top: -0.625rem;
    opacity: 0;
    animation: confettiFall linear forwards;
    z-index: 999;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Light mode adjustments for success message */
body.light-mode .success-message h2 {
    color: #b89500;
    text-shadow: 0 0.125rem 0.625rem rgba(184, 149, 0, 0.2);
}

/* -------------- 3D CAROUSEL STYLES ----------*/

/* 3D Carousel Container */
#carousel-3d-container {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    height: 500px;
    perspective: 1000px;
    z-index: 10;
}

/* 3D Carousel Inner Container */
#carousel-3d {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Carousel Items */
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 393.75px;
    transform-origin: center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.carousel-3d-item img,
.carousel-3d-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Active (Center) Item */
.carousel-3d-item.active {
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
}

/* Previous (Left) Item */
.carousel-3d-item.prev {
    transform: translate(-130%, -50%) translateZ(-200px) scale(0.75);
    opacity: 0.6;
    z-index: 2;
    pointer-events: auto;
}

/* Next (Right) Item */
.carousel-3d-item.next {
    transform: translate(30%, -50%) translateZ(-200px) scale(0.75);
    opacity: 0.6;
    z-index: 2;
    pointer-events: auto;
}

/* Hidden Items (Far Left) */
.carousel-3d-item.hidden-left {
    transform: translate(-200%, -50%) translateZ(-300px) scale(0.5);
    opacity: 0;
    z-index: 1;
}

/* Hidden Items (Far Right) */
.carousel-3d-item.hidden-right {
    transform: translate(100%, -50%) translateZ(-300px) scale(0.5);
    opacity: 0;
    z-index: 1;
}

/* Navigation Buttons */
.carousel-3d-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: rgba(234, 125, 109, 0.8);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.carousel-3d-btn:hover {
    background-color: #fdcd00;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(253, 205, 0, 0.6);
}

.carousel-3d-prev {
    left: 10%;
}

.carousel-3d-next {
    right: 10%;
}

/* Navigation Dots */
.carousel-3d-dots {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.carousel-3d-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ea7d6d;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.carousel-3d-dot:hover {
    background-color: #fdcd00;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(253, 205, 0, 0.6);
}

.carousel-3d-dot.active {
    background-color: #fdcd00;
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(253, 205, 0, 0.8);
}

/* Light Mode Adjustments for 3D Carousel */
body.light-mode .carousel-3d-btn {
    background-color: rgba(212, 165, 212, 0.8);
}

body.light-mode .carousel-3d-btn:hover {
    background-color: #b89500;
    box-shadow: 0 0 20px rgba(184, 149, 0, 0.6);
}

body.light-mode .carousel-3d-dot {
    background-color: #d4a5d4;
}

body.light-mode .carousel-3d-dot:hover,
body.light-mode .carousel-3d-dot.active {
    background-color: #b89500;
    box-shadow: 0 0 15px rgba(184, 149, 0, 0.8);
}

/* Responsive Design for 3D Carousel */
@media screen and (max-width: 1200px) {
    #carousel-3d-container {
        max-width: 900px;
        height: 400px;
    }
    
    .carousel-3d-item {
        width: 600px;
        height: 337.5px;
    }
    
    .carousel-3d-prev {
        left: 5%;
    }
    
    .carousel-3d-next {
        right: 5%;
    }
    
    .carousel-3d-dots {
        bottom: -3px;
    }
}

@media screen and (max-width: 768px) {
    #carousel-3d-container {
        max-width: 600px;
        height: 300px;
    }
    
    .carousel-3d-item {
        width: 480px;
        height: 270px;
    }
    
    .carousel-3d-item.prev {
        transform: translate(-150%, -50%) translateZ(-150px) scale(0.6);
    }
    
    .carousel-3d-item.next {
        transform: translate(50%, -50%) translateZ(-150px) scale(0.6);
    }
    
    .carousel-3d-btn {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
    
    .carousel-3d-prev {
        left: 2%;
    }
    
    .carousel-3d-next {
        right: 2%;
    }
    
    .carousel-3d-dots {
        bottom: -2px;
    }
}

@media screen and (max-width: 480px) {
    #carousel-3d-container {
        max-width: 350px;
        height: 250px;
    }
    
    .carousel-3d-item {
        width: 320px;
        height: 180px;
    }
    
    .carousel-3d-item.prev,
    .carousel-3d-item.next {
        opacity: 0.3;
        transform: translate(-50%, -50%) translateZ(-100px) scale(0.5);
    }
    
    .carousel-3d-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .carousel-3d-dot {
        width: 12px;
        height: 12px;
    }
    
    .carousel-3d-dots {
        bottom: -1px;
    }
}

/* ==================== HAMBURGER NAVIGATION + RESPONSIVE REFINEMENTS ==================== */
/* Added: mobile/tablet burger menu and centered hero fallback.
   These rules live at the end of the file so they take precedence over the
   earlier responsive blocks where they overlap. */

/* Burger button - hidden on desktop, shown on tablet/mobile */
.nav-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 300;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background-color: #ea7d6d;
  cursor: pointer;
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.35);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: #fff3b4;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Burger animates into an X when open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Small-laptop range (1024px - 1280px): shrink nav so it never collides
   with the centered theme toggle before the burger takes over. */
@media screen and (min-width: 64.0rem) and (max-width: 80.0rem) {
  .navbutton {
    width: 5rem;
    height: 2.2rem;
    font-size: 0.85rem;
    margin: 0 0.5rem;
    line-height: 2.2rem;
  }
}

/* Tablet and below: burger menu replaces the inline nav */
@media screen and (max-width: 64.0rem) {
  /* Defensive: the stacked layout is never scaled */
  #scale-wrapper { transform: none; }

  .nav-toggle { display: flex; }

  /* Hide the inline links; the burger reveals them */
  #navbar .navbutton { display: none; }

  /* Slide-down / side panel when open */
  #navbar.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: min(72vw, 16rem);
    height: auto;
    padding: 4.5rem 1rem 1.5rem;
    gap: 0.6rem;
    background-color: #262252;
    box-shadow: -0.3rem 0 1.2rem rgba(0, 0, 0, 0.45);
    z-index: 250;
  }

  #navbar.open .navbutton {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.6rem 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  /* Center the hero so the hidden illustration doesn't leave it lopsided */
  .hero-wrapper1 {
    justify-content: center;
    align-items: center;
    min-height: 70vh;
  }

  #main-information {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 40rem;
  }

  /* Flow the CTA under the text instead of absolute-positioning it */
  .cta {
    position: static;
    left: auto;
    top: auto;
    width: min(80vw, 20rem);
    height: auto;
    margin: 1.5rem auto 0;
    padding: 0.9rem 1rem;
    line-height: 1.3;
    transform: translateY(-20px);
  }
  .cta.animate {
    animation: ctaanimation-flow 1s ease forwards;
  }
  @keyframes ctaanimation-flow {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Pin the copyright cleanly to the bottom (the desktop offsets don't
     translate to the stacked layout). */
  #copyright {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1rem;
    top: auto;
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    transform: none;
  }
}

/* ==================== SCROLLABLE ABOUT-SECTION PAGES ==================== */
/* Work History, Skills and Education can hold more than one screenful of
   content. The global "overflow: hidden" (needed by the single-screen
   homepage) is opted out of here so these pages scroll when content
   exceeds the viewport. */
html.scroll-page,
html.scroll-page body {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100%;
}

html.scroll-page body {
  padding-bottom: 2rem;
}

/* On tablet/mobile the CTA buttons and copyright flow with the content
   (instead of floating fixed) so they remain reachable while scrolling. */
@media screen and (max-width: 64.0rem) {
  html.scroll-page #bottomtabs {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2.5rem auto 1.5rem auto;
  }

  html.scroll-page #copyright1 {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    text-align: center;
    margin: 1rem 0 0;
  }
}