/* MOBILE SECTION */
#mobileNotice {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  z-index: 99999;
  padding: 2rem;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media screen and (max-width: 1200px) {
  #mobileNotice {
    display: flex;
  }

  body {
    overflow: hidden;
  }
}


/* INDEX SECTION */

/* Intro Screen Animation */
.intro-screen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: #ffffff;
 color: #000000;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: Helvetica, sans-serif;
 font-size: 2.5rem;
 font-weight: 600;
 z-index: 10000;
 transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
}


.intro-screen.dark {
 background-color: #000000;
 color: #ffffff;
}


.intro-screen.fade-out {
 opacity: 0;
 pointer-events: none;
}




:root {
 --bg-color: #ffffff;
 --text-color: #000000;
}

/* General Website Style */
body.dark-mode {
 --bg-color: #111111;
 --text-color: #ffffff;
}


body {
 margin: 0;
 padding: 0;
 background-color: var(--bg-color);
 color: var(--text-color);
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 font-family: Helvetica, sans-serif;
 transition: background-color 0.3s ease, color 0.3s ease;
}

/* Nav Bar */
.centered-nav {
 position: fixed;
 top: 5%;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 3.8rem;
 font-family: Helvetica, sans-serif;
 font-size: 2rem;
 font-weight: 500;
 z-index: 100;
}

/* Center Circle Text and Image  */
.nav-link {
 position: relative;
 text-decoration: none;
 color: var(--text-color);
 transition: opacity 0.2s ease;
}

.circle-container {
 width: 31.25rem;
 height: 31.25rem;
 position: relative;
 margin-bottom: 0rem; 
}

.center-image {
 position: absolute;
 top: 49%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 25rem;
 height: 25rem;
 object-fit: cover;
 border-radius: 50%;
 z-index: 1;
}

.circle-text {
 width: 100%;
 height: 100%;
}

text {
 font-family: 'Inter', sans-serif;
 font-size: .731rem;
 letter-spacing: .0625rem;
 text-transform: lowercase;
}

.rotate {
 transform-origin: 50% 50%;
 animation: spin 60s linear infinite;
}

@keyframes spin {
 from {
   transform: rotate(0deg);
 }
 to {
   transform: rotate(360deg);
 }
}

/* Nav Link Line Animation */
.nav-link::after {
 content: '';
 position: absolute;
 bottom: -0.25rem;
 left: 50%;
 transform: translateX(-50%);
 height: .0625rem;
 width: 0%;
 background-color: var(--text-color);
 transition: width 0.3s ease;
}

.nav-link:hover::after {
 width: 100%;
}

.nav-link.name {
 font-weight: 600;
 text-transform: none;
}

.nav-link.name::after {
  display: none;
}

/* Cursor Trail */
.cursor-trail {
 position: fixed;
 width: .375rem;
 height: .375rem;
 background: rgb(0, 0, 0);
 border-radius: 50%;
 pointer-events: none;
 transform: translate(-50%, -50%);
 z-index: 9999;
 opacity: 0.8;
 animation: fadeOut 1s ease-out forwards;
}


@keyframes fadeOut {
 from {
   opacity: 0.8;
   transform: scale(1);
 }
 to {
   opacity: 0;
   transform: scale(0.3);
 }
}

/* Bottom Bar */
.bottom-bar {
 position: fixed;
 bottom: 6%;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 align-items: center;
 gap: 9rem; /* adjust for spacing between time and icon */
 z-index: 100;
 font-family: 'Inter', sans-serif;
 font-size: 2rem;
 color: var(--text-color);
}


#chicagoClock {
 opacity: 0.85;
 letter-spacing: 0.5px;
 }


.theme-toggle {
 background: none;
 border: none;
 cursor: pointer;
 transition: transform 0.3s ease;
}


.theme-toggle img {
 width: 2.5rem;
 height: 2.5rem;
 object-fit: contain;
}

.theme-toggle:hover {
  transform: rotate(30deg);
}

/* WORK SECTION */
.coming-soon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-top: 2rem;
}

.coming-soon-img {
  max-width: 50%;
  height: auto;
}


/* ABOUT SECTION */
.about-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  margin-top: 2vh;
  padding: 2rem;
  flex-wrap: wrap;
  text-align: left;
}

.about-image img {
  width: 35rem;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  z-index: 100;
}

.about-content {
  max-width: 35rem;
  font-family: Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  color: var(--text-color);
  z-index: 10;
}

.about-content p {
  margin-top: 0.35rem;   
  margin-bottom: 4rem;   
}

.about-content a {
  color: inherit;            
  text-decoration: none;   
  font-weight: inherit;      
}


.icon-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.35rem;
}

.icon-links img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.icon-links img:hover {
  transform: scale(1.1);
}

body.dark-mode .github-icon {
  filter: brightness(0) invert(1);
}

/* Blob Animation */
.blob {
  width: 18rem;              
  height: 18rem;
  background: #000;
  border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
  animation: morph 8s ease-in-out infinite;
  z-index: 0;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.dark-mode .blob {
  background: #fff;
}

@keyframes morph {
  0%   {
    border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
    transform: translateY(-8px) rotate(0deg)   scale(1);
  }
  25%  {
    border-radius: 70% 30% 40% 60% / 40% 60% 70% 30%;
    transform: translateY( 4px) rotate(90deg)  scale(1.08);
  }
  50%  {
    border-radius: 30% 70% 55% 45% / 60% 40% 30% 70%;
    transform: translateY( 8px) rotate(180deg) scale(0.96);
  }
  75%  {
    border-radius: 60% 40% 30% 70% / 65% 35% 55% 45%;
    transform: translateY(-4px) rotate(270deg) scale(1.07);
  }
  100% {
    border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
    transform: translateY(-8px) rotate(360deg) scale(1);
  }
  
}

.about-inner {
  display: flex;
  gap: 6rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}