@charset "utf-8";
/* CSS Document */

/* Reset-ish */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Page content */
#site-content {
  transition: filter 0.3s ease;
}

/* Blur effect */
#site-content.blurred {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* Overlay backdrop */
#age-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}


/* Fade in background */
#age-overlay {
  opacity: 0;
  animation: overlayFadeIn 0.4s ease forwards;
}

/* Fade + slight slide for the box */
#age-overlay .overlay-box {
  opacity: 0;
  transform: translateY(10px);
  animation: boxFadeIn 0.4s ease forwards;
  animation-delay: 0.1s;
	
}

@media (max-width: 600px) {

  #age-overlay .overlay-box {
    width: 90%;
    max-width: 500px;
    padding: 20px 15px;
  }

  #age-overlay .index_text {
    font-size: 16px;
    line-height: 1.6;
  }

  #age-overlay h1 {
    font-size: 20px;
  }

  #verify-age-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

}

/* Keyframes */
@keyframes overlayFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes boxFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#age-overlay {   /* Gives a slight glass/blur effect (modern look), works in newer browsers */
  backdrop-filter: blur(3px);
}


/* Modal box */
.overlay-box {
  background: #111;
  color: #fff;
  max-width: 500px;    /* was 420px originally and then 470px, then 590px */
  margin: 0 auto;	
  width: 90%;
  padding: 30px 25px;  /* was 24px  */
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

.overlay-box h2 {
  margin-top: 0;
}

.overlay-box p {      /* was 14px originally */
  font-size: 20px;
  line-height: 1.2;   /* was 1.5 originally */
}

#age-overlay h1 {
  font-size: 48px;
  margin-bottom: 25px;
}

#age-overlay .index_text {
  line-height: 1.4;     /* suggestion was 1.6 */
  margin-bottom: 12px;
}

#age-overlay .state-message {  /* not sure about using this, will probably keep it */
  font-size: 22px;             /*   added   */
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffecb3;	/*  before was: color: #ffd; also like off-white color: #f2f2f2;  */
}

.privacy-note {
  font-size: 12px;
  opacity: 0.8;
}

.AV_req   {      /* added to make AV Verification text larger */
	font-weight: normal;
	font-family: Vollkorn, "Times New Roman", serif;
	color: #ca63e4;
	font-style: italic;
	font-size: 2.5em;   /* was 2.5em; before  */
	text-align: center;
	letter-spacing: 1px;
	line-height: 90%;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Button */
#verify-age-btn {
  margin-top: 16px;  /* was 16px */
  padding: 22px 28px;  /* was 12px 18px originally, then 22 px 28px */
  font-size: 20px;  /* was 15px originally then 20px */
  font-weight: bold;
  background: #c2185b;  /* was #c2185b; originally */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#verify-age-btn:hover {
  background: #d81b60;
}