/* General styling */
body {
   background-color: #121212;
   color: #e0e0e0;
   font-family: 'Exo', sans-serif;
   margin: 0;
   padding: 0;
}

#content {
   height: auto;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   text-align: center;
   font-family: 'Exo', sans-serif;
}

#content2 {
   height: auto;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start; /* Aligns the content to the top */
   text-align: center;
   font-family: 'Exo', sans-serif;
}


/* Cool Search Bar */
.input-container {
   position: relative;
   width: 100vw;
   max-width: 500px;
}

.input {
   color: #fff;
   font-size: 1rem;
   background-color: rgba(255, 255, 255, 0.1);
   width: 100%;
   box-sizing: border-box;
   padding: 12px 20px 12px 50px;
   border: 2px solid transparent;
   border-radius: 25px;
   transition: all 0.3s ease;
   outline: none;
   font-family: 'Exo', sans-serif;
}

.input:hover, .input:focus {
   border-color: white;
   box-shadow: 0 0 10px white;
}

/* Search Icon */
.input-container .fa-search {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: white;
   font-size: 1.2rem;
   pointer-events: none;
}

/* Placeholder Fade */
.input::placeholder {
   color: #aaa;
   transition: all 0.3s ease;
}

.input:focus::placeholder {
   color: white;
   opacity: 0.6;
}

/* Header Styling */
#content h1 {
   margin-bottom: 0px;
   font-family: "Exo", sans-serif !important; 
   font-size: 96px;
   color: #e0e0e0;
   transition: all 0.3s ease;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px rgba(255, 255, 255, 0.6), 
                0 0 30px rgba(255, 255, 255, 0.4);
}

#content h1:hover {
   color: white;
   text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                0 0 40px rgba(255, 255, 255, 1);
   transform: scale(1.05);
}

#content2 h2 {
   margin-bottom: 0;
   margin-top: 80px;
   font-family: "Exo", sans-serif !important;
   font-size: 50px;
   color: #e0e0e0;
   transition: all 0.3s ease;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px rgba(255, 255, 255, 0.6), 
                0 0 30px rgba(255, 255, 255, 0.4);
}

#content2 h2:hover {
   color: white;
   text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                0 0 40px rgba(255, 255, 255, 1);
   transform: scale(1.05);
}

/* Top Navigation Bar */
.top-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 55px;
   backdrop-filter: blur(10px);
   background: rgba(34, 34, 34, 0.5);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
   z-index: 100;
   box-sizing: border-box;
}

/* Left Section */
.left-section {
   display: flex;
   align-items: center;
}

.left-section img {
   height: 40px;
   margin-right: 10px;
}

.left-section a {
   color: white;
   text-decoration: none;
   font-size: 24px;
   transition: color 0.3s ease;
}

.left-section a:hover {
   color: white;
}

/* Right Section */
.right-section {
   display: flex;
   gap: 15px;
}

.right-section a {
   color: white;
   text-decoration: none;
   font-size: 16px;
   transition: all 0.3s ease-in-out;
}

.right-section a:hover {
   color: white;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px rgba(255, 255, 255, 0.6), 
                0 0 30px rgba(255, 255, 255, 0.4);
   transform: scale(1.1);
}

/* Settings Icon Glow Effect */
.settings-icon {
   color: white;
   font-size: 40px;
   margin-right: 10px;
   text-decoration: none;
   transition: text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.settings-icon:hover {
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px rgba(255, 255, 255, 1);
   transform: scale(1.1);
}



/* GitHub and Vanta Link Glow */
.github-link, .vanta-link {
   transition: text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.github-link:hover, .vanta-link:hover {
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px rgba(255, 255, 255, 1);
   transform: scale(1.05);
}

/* GitHub and Vanta Links Styling */
.github-link {
   color: white;
   position: fixed; /* Ensure it appears */
   bottom: 10px;
   right: 10px;
   z-index: 1000;
   border-radius: 5px;
   font-size: 16px;
   text-decoration: none;
   transition: all 0.3s ease;
}

.github-link:hover {
   background: rgba(255, 255, 255, 0.3);
}

.vanta-link {
   color: white;
   position: fixed; /* Ensure it appears */
   bottom: 10px;
   right: 75px;
   z-index: 1000;
   border-radius: 5px;
   font-size: 16px;
   text-decoration: none;
   transition: all 0.3s ease;
}

.vanta-link:hover {
   background: rgba(255, 255, 255, 0.3);
}