body {
  font-family: "Instrument Serif", serif;
  text-align: center;
  margin-top: 50px;
  background: #fafafa;
}

#disclaimerScreen p {
  font-size: 25px;
  line-height: 1.5;
  color: #333;
  margin-top: 20px;
}

#disclaimerScreen, #counterScreen {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: white;
}

button {
    font-family: "Instrument Serif", serif;
  padding: 20px 40px;
  font-size: 22px;
  margin: 20px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
}

#countBtn {
  background-color: #ff0000; /* classic red */
  color: white;
  font-size: 2rem;
  font-weight: bold;
  padding: 30px 60px;
  border: 5px solid #880000;
  border-radius: 15px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #880000;
  transition: all 0.1s ease-in-out;
  text-transform: uppercase;
}

/* Pressed effect */
#countBtn:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 #880000;
}

#notLectureDayOverlay {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,1); /* semi-transparent overlay */
  z-index: 999;
  color: white;
  text-align: center;
  opacity:  1;
  transition: opacity 1s ease;
}

#notLectureDayOverlay.fade-out {
  opacity: 0;
}


#notLectureMessage {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px; /* space between message and countdown */
}

#countdownContainer {
  color: gold;
  font-size: 1.5rem;
  font-weight: normal;
}


#footer {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
  text-align: center;
  font-style: italic;
}

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

/* Apply fade-in to disclaimer and counter screens */
#disclaimerScreen, #counterScreen, #notLectureDayOverlay {
  opacity: 0;               /* start hidden */
  animation: fadeIn 0.8s ease forwards; /* ease-in over 0.8s */
}

/* Optional: stagger overlay fade-in slightly later */
#notLectureDayOverlay {
  animation-delay: 0.2s;
}

/* Ad Overlay */
#adOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.7s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ad-box {
  background: white;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  width: 300px;
  position: relative;
  font-family: "Instrument Serif", serif;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transform: scale(0.9);
  animation: popIn 0.4s ease-out forwards;
}

@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ad-box h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.ad-box p {
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.prof-name {
  position: relative;
  color: #ff0000; /* base text color */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Highlight animation using pseudo-element */
.prof-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 0%;
  background: yellow; /* highlight color */
  z-index: -1; /* behind the text */
  transition: width 0.5s ease;
}

.prof-name:hover::after {
  width: 100%; /* animate highlight from left to right */
}

.prof-name:hover {
  color: black; /* optional text color change when highlighted */
}

.ad-box button {
  background: #ff0000;
  color: white;
  font-size: 1rem;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.ad-box button:hover {
  background: #cc0000;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

/* Image inside ad */
.ad-img {
  max-width: 300px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.ad-image-container {
  position: relative;
  display: inline-block;
}

.discount-img {
  position: absolute;
  top: -75px;       /* slightly above the box if you like */
  left: -130px;      /* slightly to the left */
  width: 200px;      /* bigger size */
  height: 200px;     /* bigger size */
  /*transform: rotate(-10deg); /* optional tilt for sticker effect */
  pointer-events: none;      /* don't block clicks */
  z-index: 10;               /* make sure it's above the ad image */
}
/* Optional: Fade in the ad */
#adOverlay {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#adOverlay.show {
  opacity: 1;
}

/* Enlarged state */
.ad-img.enlarged {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  z-index: 3000;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #222;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
  font-size: 14px;
}

.popup.show {
  opacity: 1;
}