.body-g1 {
      background: linear-gradient(270deg,
        #D4FC79, white, #e2ebf0, #a1c4fd, #c2e9fb,
        #faffd1, #fad0c4,white);
      background-size: 600% 600%;
	  color:#3f3f3f;
      animation: gradientBG 160s ease infinite;
      font-family: 'Roboto', sans-serif;
	  min-height: 100vh;
	  font-family: 'Roboto','Nunito', sans-serif; /* ✅ Nunito font */
	  font-weight:400;	  
    }
    .body-g2 {
      background: linear-gradient(135deg,#D4FC79,#A1C4FD, #C2E9FB, #FBC2EB, #A6C1EE);
      background-size: 600% 600%;
	  color:#3f3f3f;
      animation: gradientBG 160s ease infinite;
      font-family: 'Roboto', sans-serif;
	  min-height: 100vh;
	  font-family: 'Roboto','Nunito', sans-serif; /* ✅ Nunito font */
	  font-weight:400;	  
    }	
    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    h1, h2, h3 { font-weight: bold; }
    .section { padding: 60px 0; }
    .translucent { background: rgba(255, 255, 255, 0.3); border-radius: 12px; }
	.translucent2 { background: rgba(255, 255, 255, 0.3); border-radius: 12px; }
	.translucent3 { background: rgba(255, 255, 255, 0.7); border-radius: 12px; }
    .btn-primary { background-color: #fff; color: #333; border: none; }
    footer { background: rgba(0, 0, 0, 0.1); padding: 40px 0; text-align: center; }
  /*  .info-pill {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    color: #000;
    font-size: 1.1rem;
  }*/
  
  .info-pill {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #dee2e6;
    border-radius: 2px;
    padding: 1rem;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
	font-size:110%;
	color:#3f3f3f;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
  }

  .info-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  }  

  .icy-info-pill {
    /*background: rgba(255, 255, 255, 0.3);*/
	background: radial-gradient(
	  circle at 50% 50%, 
	  rgba(255, 255, 255, 0.9),  /* #e2f7f2 with 70% opacity */
	  rgba(247, 200, 231, 0.1)   /* #f7e2e7 with 70% opacity */
	);
    
    padding: 1rem;
	color:#3f3f3f;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
  }

  .icy-info-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  } 
 
  .icy-info-pill2 {
    

    font-family: 'Roboto', sans-serif;

    transition: transform 0.2s ease;
  }

  .icy-info-pill2:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  } 
  
.googly-eyes {
  display: flex;
  gap: 4px;
}

.eye {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

.pupil {
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  left: 6px;
  transition: transform 0.1s ease;
}

.typed-fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}
#typed-output2 {
  opacity: 1;
  transition: opacity .6s ease;  /* needed for the fade animation */
}
#typed-output2.typed-fade-out {
  opacity: 0 !important;         /* ensure it wins over other styles */
}

.typed-text {
  display: inline-block;
  white-space: wrap !important;   /* ✅ allows wrapping */
  word-wrap: break-word; /* ✅ break long words if needed */
  max-width: 100%;       /* ✅ keeps it inside screen */
}