/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* style.css */

/* GLOBAL SETTINGS */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Baloo 2', cursive;
  color: #e0f7fa; /* soft light blue */
  background-color: #0b3d91; /* fallback deep blue */
  overflow: hidden;
  cursor: url('cursor.png'), auto; /* default whale shark cursor */
  transition: background 0.5s ease;
}

/* MAIN HOME BACKGROUND */
#main-site {
  background: url('images/undersea.gif') no-repeat center center fixed;
  background-size: cover;
  position: relative; /* instead of fixed or absolute if it’s blocking children */
  overflow: visible; /* so social icons aren’t hidden */
}

/* INLINE OVERRIDE: only for home.html */
body.home #main-site {
  display: block !important;  /* already have this */
  padding: 0 !important;      /* remove the extra padding */
  height: 100vh;               /* make it full viewport height */
  overflow: hidden;   /* prevents scrolling */
}

/* default cursor */
body {
  cursor: url('images/cursor.png'), auto;
}

/* Titles for all pages */
body.home #site-title,
body.about #site-title,
body.contact #site-title {
  font-family: 'Sriracha', cursive;
  color: #063D26;
  text-shadow: 0 0 8px #148C5A, 2px 2px 12px #148C5A;
  font-size: 3.5rem; /* smaller */
  margin: 0;
  word-wrap: break-word; /* prevent overflow */
  letter-spacing: 13px; /* adds spacing between letters */
  transform: translateY(-110%);
}

/* SECTION HEADINGS - About Me / Contact */
#about-section h2,
#contact-section h2 {
  font-family: 'Titan One', cursive !important; /* match the site title font */
  font-size: 2rem;
  margin-top: -3rem;
  margin-bottom: 1rem;
  letter-spacing: 1.5px; /* adds spacing for headings */
  color: #063D26;
  text-shadow: 0 0 6px #148C5A, 1px 1px 8px #148C5A; /* softer glow for headings */
  transform:translateY(-90%) !important;
  justify-content: center;
}

#about-section p,
  #contact-section p {
    font-family: 'Baloo 2', cursive !important;
    transform: translateY(0%);
    width: 480px !important;
    max-width: 520px !important;
    justify-content: center;
  }
  
  #about-section p {
    font-family: 'Baloo 2', cursive !important;
    margin-top: -2rem;
    margin-bottom: -5rem;
  }
  
  #contact-section p {
    font-family: 'Baloo 2', cursive !important;
    margin-top: -2rem;
    margin-bottom: -5rem;
  }
  
#symbols {
  font-size: 1.2rem; /* adjust size if needed */
  margin-top: 0.5rem; /* space above symbols */
  margin-bottom: 1rem; /* space below symbols */
  display: block; /* ensures it’s on its own line */
  text-shadow: 0 0 6px #1E1675, 1px 1px 8px #1E1675; /* softer glow for headings */
  transform: translateY(-345%);
}

#subtitle {
  font-family: 'Baloo 2', cursive !important;
  font-size: 1.1rem; /* adjust if needed */
  margin-top: 0.5rem; /* space above subtitle */
  margin-bottom: -7.5rem; /* optional space below */
  display: block;
  text-shadow: 0 0 6px #1E1675, 1px 1px 8px #1E1675; /* softer glow for headings */
  transform: translateY(-465%);
}

/* Optional mobile tweaks */
@media (max-width: 500px) {
  #main-site {
    background: url('images/undersea.gif') center center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative; 
    overflow: hidden; /* so social icons aren’t hidden */
}

  body.about #main-site {
   height: 100vh;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
  }
 
  body.home #site-title,
  body.about #site-title,
  body.contact #site-title {
    font-size: 2rem;
    letter-spacing: 1px; /* slightly tighter for small screens */
  }

  #about-section h2,
  #contact-section h2 {
    font-size: 1.5rem;
    letter-spacing: 1px;
    transform:translateY(-100%) !important;
  }
  
  #about-section p,
  #contact-section p {
    font-family: 'Baloo 2', cursive !important;
    transform: translateY(0%);
    margin-top: -2rem;
    margin-bottom: -5rem;
    width: 380px !important;
    max-width: 420px !important;
    justify-content: center;
  }
  
  #symbols {
    font-size: 1.2rem; /* adjust size if needed */
    margin-top: 0.5rem; /* space above symbols */
    margin-bottom: 1rem; /* space below symbols */
    display: block; /* ensures it’s on its own line */
    text-shadow: 0 0 6px #1E1675, 1px 1px 8px #1E1675; /* softer glow for headings */
    transform: translateY(-245%);
  }

  #subtitle {
    font-family: 'Baloo 2', cursive !important;
    font-size: 1.1rem; /* adjust if needed */
    margin-top: 0.5rem; /* space above subtitle */
    margin-bottom: -6rem; /* optional space below */
    display: block;
    text-shadow: 0 0 6px #1E1675, 1px 1px 8px #1E1675; /* softer glow for headings */
    transform: translateY(-355%);
  }
  
  body.home #site-title {
    font-family: 'Sriracha', cursive;
    color: #063D26;
    text-shadow: 0 0 8px #148C5A, 2px 2px 12px #148C5A;
    margin: 0;
    word-wrap: break-word; /* prevent overflow */
    letter-spacing: 13px; /* adds spacing between letters */
    transform: translateY(-145%);
  }
}

/* Main body / paragraph text shadow */
body.home p,
body.about p,
body.contact p {
  font-family: 'Baloo 2', cursive !important; /* correct Google font name */
  color: #e0f7fa;
  font-size: 1.05rem;
  line-height: 1.6;
  text-shadow: 0 0 8px #1E1675, 2px 2px 12px #1E1675;
  margin: 1rem auto;
  max-width: 720px;
}


/* Profile picture — matches your HTML's class "profile-pic" */
.profile-pic,
img.profile-pic {
  display: block;
  margin: 1.25rem auto 0.75rem auto;
  width: 140px;              /* small reasonable circle */
  height: 140px;
  border-radius: 50%;
  border: 2px solid #F2F2F2;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(30,22,117,0.55);
  transform: translateY(-55%);
}

/* Short, centered divider — use <div class="divider"></div> or style hr */
.divider,
hr.divider-top,
hr.divider-bottom {
  width: 60% !important;                /* NOT full width — shorter, centered */
  max-width: 520px !important;
  height: 2px;
  margin: 1.25rem auto;
  background: rgba(255,255,255,0.65);
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(30,22,117,0.45);
}

/* If you used <hr class="divider-top"> or <hr class="divider-bottom"> (keeps it consistent) */
hr.divider-top { margin-top: 1.5rem !important; }
hr.divider-bottom { margin-bottom: 1.5rem !important; }

/* Slightly smaller social icons on tiny screens */
@media (max-width: 420px) {
  .profile-pic {
    width: 110px;
    height: 110px;
  }
  .divider { width: 66%; }
  #social-links { bottom: 2.4rem; }
  body.home p,
  body.about p,
  body.contact p { font-size: 1rem; max-width: 90%; }
}

.divider,
hr.divider-top,
hr.divider-bottom {
  width: 92% !important;                /* NOT full width — shorter, centered */
  max-width: 420px;
  height: 2px;
  margin: 1.25rem auto;
  background: rgba(255,255,255,0.65);
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(30,22,117,0.45);
}


/* hover cursor on buttons */
#welcome button:hover,
.btn:hover {
  cursor: url('images/hover_cursor.png'), pointer;
}

/* WELCOME SECTION */
#welcome {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  text-align: center;      /* make text centered */
  height: 100vh;           /* full viewport height */
  width: 100vw;            /* full viewport width */
  padding: 0 1rem;         /* small horizontal padding for mobile */
  box-sizing: border-box;  /* include padding in width */
  overflow: hidden;        /* prevent scroll */
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #0b3d91, #006994);
  z-index: 100;            /* above main content */
  transition: opacity 0.5s ease;
}

@media (max-width: 500px) {
  #welcome {
    height: 100vh; /* keep section full viewport height */
    display: flex;
    justify-content: flex-start; /* align items at top instead of center */
    align-items: center;
    text-align: center;
    padding-top: 20vh; /* push content down 15% from top */
    box-sizing: border-box;
    transform: translateY(3%) !important; /* ensure no accidental offsets */
  }

  #welcome .welcome-content {
    position: relative; /* default relative, so we can nudge */
    top: 0; /* optional adjustment */
  }

  #welcome h1 {
    font-size: 2.5rem;
    font-family: 'Titan One', cursive !important;
    transform: translateY(25%);
  }

  #welcome button {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    transform: translateY(25%);
  }
}


/* animated wave/ripple effect using pseudo-elements */
#welcome::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 70%);
  animation: ripple 6s infinite linear;
  z-index: 0;
}

@keyframes ripple {
  0% { transform: rotate(0deg) translateX(0) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

/* make sure content is above waves */
#welcome .welcome-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  text-align: center;
  transform: translateY(0%);
}


#welcome h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-family: 'Titan One', cursive !important;
}

/* Dive In Button */
#welcome button {
  font-family: 'Baloo 2', cursive !important;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.8rem 2rem;
  color: #e0f7fa;
  background: rgba(0, 105, 148, 0.8);
  border: 2px solid #00bcd4;
  border-radius: 50px;       /* makes it fully oval */
  display: flex;             /* use flex to center text */
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease;
  margin: 0 auto;            /* this centers the button itself horizontally */
}
/* wavey hover effect */
#welcome button:hover {
  transform: translateY(-4px) rotate(-2deg);
  background: rgba(0, 145, 188, 0.9);
}

/* optional subtle “splash” effect using pseudo-element */
#welcome button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
}

#welcome button:hover::after {
  transform: scale(1);
}


/* NAVIGATION */
nav {
  background: transparent; /* no ugly bar */
  padding-top: 8rem;
  padding-bottom: -1rem;
  position: relative;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 1rem; /* space between buttons */
}

/* style individual nav links as ovals */
nav a.nav-btn {
  display: inline-block;
  padding: 0.6rem 2rem; /* oval shape */
  border: 2px solid #1E1675; /* dark blue stroke */
  border-radius: 50px; /* fully rounded for oval */
  background: rgba(0,0,0,0); /* transparent inside */
  color: #005934; /* light green text */
  font-family: 'Sora', cursive !important; /* optional, match title vibe */
  font-weight: 300;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  letter-spacing: 2px; /* optional: subtle spacing inside */
}

/* hover effect for nav buttons */
nav a.nav-btn:hover {
  color: #F2F2F2; /* text changes */
  border-color: #F2F2F2; /* outline changes */
  background: rgba(30, 22, 117, 0.1); /* subtle transparent fill */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: url('images/hover_cursor.png'), pointer;
}

@media (max-width: 500px) {
  
  nav {
  background: transparent; /* no ugly bar */
  padding-top: 8.5rem;
  padding-bottom: -1rem;
  position: relative;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 1rem; /* space between buttons */
  transform: translateY(0%);
}


  nav a.nav-btn {
    width: 110px;           /* bigger width for oval */
    height: 40px;          /* slightly shorter height for oval shape */
    font-size: 1rem;       /* keep text readable */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
  }

  nav ul {
    gap: 1rem;             /* space between buttons */
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px !important;
    height: 50px!important;
    border: 2px solid #1E1675;
    border-radius: 50%;
    background: rgba(0,0,0,0); /* transparent */
    transition: all 0.3s ease;
    transform: translateX(-50%);
    transform: translateY(-15%);
  }

  .social-btn img {
    width: 24px !important;
    height: 24px !important;
    filter: invert(40%) sepia(72%) saturate(2500%) hue-rotate(95deg) brightness(92%) contrast(92%);
    transition: filter 0.3s ease;
  }
}



/* SECTIONS */
section {
  padding: 5rem 2rem;
  text-align: center;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: #1e90ff;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-family: 'sora';
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #63b8ff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* bubble style */
.bubble {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3); /* mostly transparent */
  border: 2px solid rgba(255, 255, 255, 0.6); /* white outline */
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.5), 
              0 0 4px rgba(255, 255, 255, 0.2); /* highlight + glow */
  animation: floatUp 2s forwards;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-60px) scale(0.6);
    opacity: 0;
  }
}

#bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so clicks still work */
  z-index: 10; /* above welcome-content, but below button if needed */
}

#background-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don’t block clicks */
  overflow: hidden;
  z-index: 0; /* behind welcome content */
}

.bg-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  width: 10px;
  height: 10px;
  animation: floatWiggle 6s infinite linear;
}

@keyframes floatWiggle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(10px, -50px) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-5px, -100px) scale(1);
    opacity: 0;
  }
}

/* SOCIAL ICON NAV */
#social-links {
  position: relative;  /* customizable */
  bottom: 12.5rem;     /* or wherever you want it */
  left: 50%;
  transform: translateX(-50%) !important;
  transform: translateY(-3%);
  z-index: 999;     /* above all bubbles and other layers */
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}


.social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid #1E1675;
  border-radius: 50%;
  background: rgba(0,0,0,0); /* transparent */
  transition: all 0.3s ease;
}

.social-btn img {
  width: 28px;
  height: 28px;
  filter: invert(40%) sepia(72%) saturate(2500%) hue-rotate(95deg) brightness(92%) contrast(92%);
  transition: filter 0.3s ease;
}

.social-btn:hover img {
  filter: invert(97%);
}


.social-btn:hover img {
  fill: #F2F2F2; /* turns white on hover */
}


.social-btn:hover {
  border-color: #F2F2F2;
  background: rgba(30,22,117,0.1);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.social-btn:hover img {
  filter: brightness(0) invert(97%);
  cursor: url('images/hover_cursor.png'), pointer;
}