/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  /* Background */
  
  background: url(https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExaTZpOTljZXExZDFneDFydDZpcnE1YXk2M2NnZ3Uya2dzc3M2a3pjbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/j3EExPtEdN2tbJL79M/giphy.gif);
  background-color: black;
  background-repeat: repeat-x;
  background-size: 60vh;
  font-family: Verdana;
  color: white;
  
  height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    overflow: hidden;
}
/* Hide containers by default */
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Make it clear the screen is clickable during dialogue */
#dialogue-container {
    cursor: pointer; 
}

/* Everything starts invisible */
#dialogue-text, #question-text, #quiz-buttons, #result-container {
    opacity: 0; 
    transition: opacity 1.5s ease-in-out; /* Smooth 1.5 second fade */
    font-size: 1.5rem; /* Make text a bit larger */
}

/* We will add this class with JavaScript to trigger the fade */
.fade-in {
    opacity: 1 !important;
}

/* Button Styling */
button {
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 10px 20px;
    margin: 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.2rem;
    transition: background 0.3s;
}

button:hover {
    background: #555;
}

#quiz-buttons {
    margin-top: 20px;
}