body, h1, h2, h3, h4, h5, input, textarea {font-family: "Rubik", "Segoe UI", "Bitstream Vera Sans", "Bitstream Charter", "Bitstream Vera Sans Mono", Arial;}
h5, h4, h3 {font-weight: normal; margin-bottom: 0px;}
a, a:hover {text-decoration: none; outline: none;}
dl, ol, ul {margin-bottom: 0rem;}
input, textarea, select {font-family: "Rubik"}
.card-container {perspective: 1000px;}
.card-inner {position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer;}
.card-inner.is-flipped {transform: rotateY(180deg);}
.card-front {background-image: url("../images/card-front-bg.jpg"); background-repeat: no-repeat;}
.card-front, .card-back {position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1);}
.card-back { transform: rotateY(180deg); background-color: #f8fafc;  background-image: url("../images/card-back-bg.jpg"); background-repeat: no-repeat;}
.text-subheading {color: #ccc;}
#card-answer ul {list-style-type: disc !important; padding-left: 20px !important; margin-top: 10px; text-align: left;}
#card-answer li {margin-bottom: 8px; display: list-item !important;}
/* Main "THE END" Style */
.the-end {
  font-family: "Times New Roman", Times, serif;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 0;

  /* Metallic Gradient Effect */
  background: linear-gradient(
    to bottom,
    #cfd8dc 0%,   /* Light top highlight */
    #90a4ae 45%,  /* Mid-tone */
    #455a64 50%,  /* Darker "horizon" line */
    #90a4ae 55%,  /* Mid-tone reflection */
    #cfd8dc 100%  /* Bottom highlight */
  );
  
  /* Masking the gradient to the text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Subtle drop shadow for depth */
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.8));
}

/* Subtext Style */
.subtext-the-end {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #b0bec5;
  margin-top: 10px;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
}
@media (min-width: 1200px) and (max-width: 1399.98px)
{
	
}

@media (min-width: 992px) and (max-width: 1199.98px)
{
	
}
@media (min-width: 768px) and (max-width: 991.98px)
{
	
}
@media (min-width: 576px) and (max-width: 767.98px)
{
	
}
@media (max-width: 575.98px)
{
	
}