style.css

/* Global reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    cursor: url(/assets/cursors/sparkle-cursor.png), default; /* Custom cursor */
      overflow-x: hidden;
  }

body {
  height: 100%;
  font-family: "Inter";
  transition: background-color 0.3s, color 0.3s;
  background-color: black; /* Default dark mode background */
  color: white; /* Default dark mode text */
}

h1, h2 {
  text-align: center;
  color: #170B3B;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-family: "Inter", sans-serif;
}

body.light-mode {
  background-color: white; /* Light mode background */
  color: black; /* Light mode text */
}

#Taskbar-container a {
  color: white; /* Default dark mode text for links */
}

body.light-mode #Taskbar-container a {
  color: black; /* Light mode text for links */
}

#Taskbar-container a:hover {
  color: #170B3B; /* Hover effect for both modes */
}



/* Hero section */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Full height on larger screens */
  overflow: hidden;
}

.hero-section video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.7);
  animation: fadeIn 1.5s ease-in-out;
  transition: opacity 0.5s ease; /* Smooth transition for poster image */
}

.hero-section video::-webkit-media-controls {
  display: none !important; /* Hides the play button for WebKit browsers */
}

video::-webkit-media-controls {
  display: none !important;
}

.hero-section video {
  pointer-events: none; /* Disables interactions with the video */
}


.hero-section video[poster] {
  opacity: 1;
}

.hero-section video:playing {
  opacity: 1; /* Ensure full opacity once video starts playing */
}

/* Fade in animation for the hero video */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Adjust hero section height on smaller screens */
@media only screen and (max-width: 768px) {
  .hero-section {
    height: 80vh; /* Smaller height on medium screens */
  }
}

@media only screen and (max-width: 480px) {
  .hero-section {
    height: 60vh; /* Further reduce height for mobile screens */
  }
}

/* Adjust hero section video for mobile */
@media only screen and (max-width: 768px) {
  .hero-section video {
     object-fit: cover;
     width: 100%;
     height: 100%;
     filter: none; 
  }
}


@media only screen and (max-width: 768px) {
  .overlay {
     background: rgba(0, 0, 0, 0.3); /* Slightly lighter overlay for fallback image */
  }
}


.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* Ripple effect background & editors note (index page)*/

.editor-note {
  position: absolute;
  font-family: "Inter";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.8em; /* Slightly smaller text size */
  color: #FFFFFF;
  z-index: 3; /* Ensure this stays on top */
  line-height: 1.5em;
  background: none; /* Remove the background box */
  padding: 0;
}

#bg-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

#bg-wrap svg {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

@media only screen and (max-width: 768px) {
  #bg-wrap {
    height: 60vh; /* Smaller height for mobile */
  }
}

@media only screen and (max-width: 480px) {
  #bg-wrap {
    height: 40vh; /* Make ripple effect more prominent on mobile */
  }
}

#Featured-Article {
  font-family: "Inter";
  display: flex;
  flex-direction: column; /* Stack the heading and image vertically */
  padding: 50px;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
  position: relative; /* Keep for positioning the title over the image */
  cursor: pointer;
  overflow: hidden;
}

#Featured-Article h1 {
  font-size: 2.5rem;
  letter-spacing: 2px;
  margin-bottom: 30px; /* Increased space between heading and image */
  color: #ffffff;
  z-index: 2; /* Title above the image */
  position: relative;
}

#Featured-Article img {
  display: block;
  margin: 0 auto; 
  height: auto;
  width: 100%;
  max-width: 400px; /* Keep this to maintain the image size */
  border-radius: 10px; /* You can remove this if you don't want rounded corners */
  margin-bottom: 60px; /* Space below the image */
  transition: transform 0.3s ease;
  box-shadow: none; /* Remove box shadow */
}

#Featured-Article img:hover {
  transform: scale(1.05); /* Slight zoom effect without shadow */
}


#Featured-Article:hover {
  transform: scale(1.02); /* Slight zoom effect on hover */
}

#Featured-Article .article-title {
  position: absolute; /* Keep this to overlay */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1; /* Ensure it's above the image */
}

#Featured-Article:hover .article-title {
  opacity: 1; /* Make title visible on hover */
}

/* spotify section (index page) */
.spotify-section {
  position: relative;
  border-radius: 15px;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.kismet-notes {
  position: relative; 
  z-index: 2; 
  font-family: 'Cursive', sans-serif; /* Whimsical font */
  color: #333;
  max-width: 500px;
  padding: 20px;
  border: none;
  box-shadow: none;
  border-radius: 15px; /* Rounded corners */
  animation: fadeIn 2s ease-in-out;
}

.kismet-notes h2 {
  font-size: 2rem;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.kismet-notes p {
  line-height: 1.5; 
  position: relative;
  margin-top: 20px; 
  margin-bottom: 20px;
  font-size: 1.2rem; /* Larger font for emphasis */
}

.kismet-notes p em {
  color: #666;
  font-style: italic;
  font-size: 1.1rem;
  display: block;
  text-align: center;
}

.kismet-notes p strong {
  display: block;
  margin-top: 20px;
  font-size: 1.3rem;
  color: #333;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.spotify-section iframe {
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin-right: 30px;
}

.spotify-section:hover {
  transform: scale(1.02); 
}

@media only screen and (max-width: 768px) {
  .spotify-section {
    flex-direction: column; 
    padding: 30px;
  }

  .spotify-section iframe {
    margin-right: 0; 
    margin-bottom: 20px; 
    width: 100%; 
    max-width: 400px;
  }

  .kismet-notes {
    max-width: 100%; 
    text-align: center;
  }
}

@media only screen and (max-width: 480px) {
  .spotify-section {
    padding: 20px;
  }

  .kismet-notes h2 {
    font-size: 1.5rem;
  }

  .kismet-notes p {
    font-size: 1rem;
  }
}

/* icons in .contact-us */
.icons {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 50px 20px; /* Add consistent padding */
  border: none; /* Ensure no border is set */
}

.icons a {
  margin: 0 10px; 
  transition: transform 0.3s ease, opacity 0.3s ease;
  border: none; 
  outline: none; 
}

.icons a img {
  width: 20px; 
  height: 20px; 
  filter: grayscale(100%); 
  transition: filter 0.3s ease; 
}

.icons a:hover img {
  filter: grayscale(0%); /* Colorful on hover */
}

.icons a:hover {
  transform: scale(1.2); 
  opacity: 0.8;
}

/* Media query for screens smaller than 768px */
@media only screen and (max-width: 768px) {
  .icons {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 2%;
  }
  
  .icons a {
    margin: 0 10px; /* Maintain horizontal spacing */
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: none; /* Ensure no border is set on links */
    outline: none; /* Remove focus outline for links */
  }
  
  .icons a img {
    width: 20px; /* Maintain smaller icon size */
    height: 20px; /* Maintain smaller icon size */
    filter: grayscale(100%); /* Black and white */
    transition: filter 0.3s ease; /* Smooth transition */
  }
  
  .icons a:hover img {
    filter: grayscale(0%); /* Colorful on hover */
  }

  .icons a:hover {
    transform: scale(1.2); 
    opacity: 0.8; 
  }
}

/* Media query for screens smaller than 480px */
@media only screen and (max-width: 480px) {
  .icons {
    padding: 1%; /* Further reduce padding for very small screens */
  }

  .icons a img {
    width: 15px; /* Even smaller icon size for better fit on very small screens */
    height: 15px; /* Even smaller icon size for better fit on very small screens */
  }
}

/* mission statement (about page)*/
.mission-statement-header {
  color: white; /* default color */
  font-family: 'Inter';
}

.mission-statement {
  position: center;
  margin: 20px auto;
  font-size: 1.4rem;
  font-family: 'Inter';
  color: #C19EEA; /* #51289C; */
  max-width: 600px;
  line-height: 1.6;
  border-bottom: 2px solid #723ABF;
  padding-bottom: 10px;
  letter-spacing: 0.05em;
  animation: fadeIn 1.5s ease-in;
}

/* Officer section (about page) */

.officer-heading {
  color: white; /* default color */
}

.officer-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  gap: 20px; 
  font-family: 'Inter';
}

/* Officer card (tarot-like) styling */
.officer-card {
  background: linear-gradient(145deg, #723ABF, #51289C);
  border-radius: 15px;
  width: 240px;
  height: 380px;
  margin: 15px;
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  opacity: 0.95;
  font-family: 'Inter';
}

.officer-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #51289C, #2F1678); /* Darker gradient on hover */
  opacity: 1;
  cursor: pointer;
}

.officer-card img {
  width: 200px;
  height: 250px; /* Set a fixed height */
  object-fit: cover; /* Ensures the image scales to fill the box while keeping its aspect ratio */
  border-radius: 10px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.officer-card:hover img {
  transform: rotate(5deg); 
  opacity: 0.9;
}

.officer-card h2 {
  font-size: 1.1rem;
  font-family: 'Inter';
  color: #fff;
  background-color: #2F1678; 
  width: 100%;
  padding: 10px 0;
  margin: 0;
  border-top: 2px solid #723ABF;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.officer-card:hover h2 {
  background-color: #170B3B; 
}

/* Fade-in effect for mission statement */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.photo-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* Ensures images stay within the page view */
}

.floating-photo-wrapper {
  position: absolute;
  animation: float 12s infinite ease-in-out; /* Updated floating animation */
  z-index: 1;
  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transitions */
}

/* Style for floating photos */
.floating-photo {
  width: 150px;
  height: 150px;
  background-size: cover;
  background-position: center;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, filter, box-shadow;
  border-radius: 50%; 
}

.floating-photo:hover {
  transform: scale(1.4) rotate(12deg); 
  filter: brightness(1.6) contrast(1.2); 
  box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5); 
  border: 4px solid rgba(255, 255, 255, 0.9); 
  cursor: pointer; 
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
              filter 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
}


/* Smoother keyframes for floating animation */
@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -15px) rotate(-2deg);
  }
  50% {
    transform: translate(-15px, 10px) rotate(1deg);
  }
  75% {
    transform: translate(15px, 5px) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* dark/light mode*/
.change-mode {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2; /* Make sure it's on top of other elements */
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}


.change-mode:hover {
  background-color: #3700b3; /* Darker shade on hover */
  transform: scale(1.05); 
}

/* Taskbar container styling with transparent background */
#Taskbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;  
  position: fixed;    
  padding: 10px 20px;              
  background-color: rgba(255, 255, 255, 0);               
  width: 100%;                    
  top: 0;                          
  z-index: 1000;  
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px 20px;              
}

/* When the user scrolls down, we can add a slight background color */
.hidden {
  transform: translateY(-100%); /* Move the taskbar off-screen when hidden */
}

.visible {
  transform: translateY(0); /* Slide it back into view */
  background-color: rgba(255, 255, 255, 0.2); /* Add a subtle background when visible */
  transition: background-color 0.3s ease;
}

#Taskbar-container {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow if you want */
}

#Taskbar-container .logo-link {
  margin-right: auto; 
}

#Taskbar-container .logo {
  height: 50px; 
  width: auto;  
  transition: opacity 0.3s ease;
}

#Taskbar-container .logo:hover {
  opacity: 0.8; 
}

/* Styles for the links in the taskbar */
#Taskbar-container a {
  margin: 0 15px;
  text-decoration: none;
  font-size: 1.2em;
  color: white;
  font-family: 'Inter';
  transition: color 0.3s ease;
}

/* Hover effect for the links */
#Taskbar-container a:hover {
  color: #170B3B;
}


/* Container for the issue covers */
.issues-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images per row for larger screens */
  gap: 0; /* No gap between images */
  padding: 0;
  height: 100vh; /* Full viewport height */
}

/* Styling for each issue cover */
.issue {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  height: 100%; /* Ensure covers take full height of the container */
}

/* Ensure all images cover their grid cell */
.issue img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes sure the image covers the full area without distortion */
  display: block;
  transition: transform 0.3s ease;
}

/* Hover effect for the image */
.issue:hover img {
  transform: scale(1.1); /* Zoom in slightly on hover */
}

/* Title overlay on hover */
.issue-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw; /* Responsive font size */
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.issue:hover .issue-title {
  opacity: 1;
}

/* Media Queries for smaller screens (tablets, mobile) */
@media (max-width: 1024px) {
  .issues-container {
    grid-template-columns: repeat(2, 1fr); /* 2 images per row for tablets */
  }
}

@media (max-width: 768px) {
  .issues-container {
    grid-template-columns: 1fr; /* 1 image per row for mobile screens */
    height: auto; /* Remove fixed height to allow scrolling on mobile */
  }

  .issue {
    height: 50vh; /* Adjust the height for mobile, making the image taller */
  }

  .issue-title {
    font-size: 4vw; /* Make the title larger on mobile */
  }
}

/* Container for the articles */
.articles-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 articles per row for desktop */
  gap: 40px; /* Spacing between articles */
  padding: 40px; /* Padding around the container */
  max-width: 1200px; /* Set a maximum width */
  margin: 0 auto; /* Center the grid container */
}

/* Styling for each article */
.article {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px; /* Optional: rounded corners for a modern look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

/* Ensure all images cover their grid cell and maintain the same size */
.article img {
  width: 100%;
  height: 300px; /* Set a fixed height for all images */
  object-fit: cover; /* Ensures the image fills the area without distortion */
  display: block;
  transition: transform 0.3s ease;
}

/* Hover effect for the image */
.article:hover img {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Title overlay on hover */
.article-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; /* Adjust size as needed */
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.article:hover .article-title {
  opacity: 1;
}

/* Media Queries for smaller screens (tablets and mobile) */
@media (max-width: 1024px) {
  .articles-container {
    grid-template-columns: repeat(2, 1fr); /* 2 articles per row for tablets */
  }
}

@media (max-width: 768px) {
  .articles-container {
    grid-template-columns: 1fr; /* 1 article per row for mobile screens */
    padding: 20px; /* Adjust padding for smaller screens */
  }

  .article {
    margin-bottom: 20px; /* Add space between articles for mobile */
  }

  .article-title {
    font-size: 16px; /* Adjust title size for mobile */
  }
}



@font-face {
  font-family: "LemonMilk";
  src: url(assets/fonts/LEMONMILK-Bold.otf); 

  font-family: "Praktika";
  src: url(assets/fonts/Praktika-Light.otf);

  font-family: "Cardinal";
  src: url(assets/fonts/Cardinal.ttf)

}