/* ===== Global Styles ===== */

/* Set background image and default text styling */
body {
   color: white; /* White text for better contrast (else u can not see it) */
   font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
   font-size: 12px;
   line-height: 1.5em;
   background: url(Tutor2024.JPG) no-repeat center center fixed;
   background-size: cover;
}

/* Ensure all headings and text are white */
h1, h2, h3, h4, h5, h6, p, a {
   color: white;
   font-weight: bold;
}

/* ===== Homepage (index.html) ===== */

/* Style for the main RKG title */
h1 {
   text-align: center;
   font-family: 'Raleway', sans-serif;
   font-size: 8em; /* Large but not tooo big */
   text-transform: uppercase;
   margin-top: 8%;
   font-weight: 900; /* Extra bold ;) */
}

/* Style for the subtitle under the RKG title */
#fronter h2 {
   text-align: center;
   font-family: 'Raleway', sans-serif;
   font-weight: 700;
   font-size: 36px;
   margin-top: 10px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.4;
}

/* Center the RKG logo */
#fronter img {
   display: block;
   margin: 0 auto;
   max-width: 100%;
}

/* Adjust text sizes for smaller screens */
@media (max-width: 768px) {
   h1 {
      font-size: 5em; /* Reduce title size on small screens */
      margin-top: 8%;
   }
   #fronter h2 {
      font-size: 22px;
      margin-top: 10px;
   }
}

/* Style for the "Scroll ned" text */
.scroll-text {
   display: block;
   text-align: center;
   font-size: 24px;
   font-weight: bold;
   margin: 10px auto;
   opacity: 0.8; /* Slightly transparent */
   animation: fadeInOut 1s infinite alternate;
}

/* Simple fade animation */
@keyframes fadeInOut {
   0% { opacity: 0.5; }
   100% { opacity: 1; }
}


/* ===== Contact Page (contact.html) ===== */

/* "Kontaktinformation" header color + add animation */
.contact-page h1 {
   font-size: 3em;
   margin-top: 2%;
   color: #008CBA; /*Same blue as the button */
   animation: fadeInColor 1.5s ease-in-out; /* Smooth color fade-in */
}

/* Animation: fades in the blue color */
@keyframes fadeInColor {
   0% { color: white; }
   100% { color: #008CBA; }
}


/* ✅ Make the contact box bigger */
.contact-box {
   background: rgba(50, 50, 50, 0.7); /* Grey with 70% opacity */
   padding: 30px; 
   border-radius: 12px;
   text-align: center;
   max-width: 750px; 
   font-size: 22px; 
   margin: 30px auto;
}

/* Adjust box for smaller screens */
@media (max-width: 768px) {
   .contact-box {
      max-width: 90%; /* ✅ Make it more flexible on smaller screens */
      font-size: 18px;
   }
}

/* ===== Buttons ===== */

/* Style for the "Kontaktinformation" button */
.contact-button {
   display: block;
   width: 250px;
   text-align: center;
   background-color: #008CBA;
   color: white;
   padding: 15px;
   margin: 20px auto;
   text-decoration: none;
   font-size: 18px;
   font-weight: bold;
   border-radius: 8px;
   transition: background-color 0.3s ease-in-out;
}

/* Change button color on hover */
.contact-button:hover {
   background-color: #005f73;
}