/* Resetten van de CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body achtergrond */
body {
  background-color: #f2f2f2; /* Lichtgrijze achtergrond */
}

/* Header Sectie */
#top {
  padding: 20px;
}

/* Titelcontainer */
.title-container {
  color: #1b6ebe; /* Blauwe tekstkleur */
  text-align: center; /* Center uitlijning */
}

/* Logo */
.logo {
  margin-top: 10px; /* Ruimte boven het logo */
  height: 36px; /* Hoogte van het logo aanpassen */
}

/* Geroteerde letter "a" */
.rotate-a {
  color: #008c36; /* Groene tekstkleur */
  transform: rotate(-45deg); /* Rotatie van -45 graden */
  display: inline-block; /* Zet de "a" weer op dezelfde regel */
  vertical-align: middle; /* Verticale uitlijning in het midden */
  margin-right: 5px; /* Ruimte rechts van de "a" */
}

/* SignIn Button Container */
#signInButtonContainer {
  display: flex; /* Gebruik flexbox */
  justify-content: space-between; /* Verdeel de ruimte tussen de knoppen */
  align-items: center; /* Center de knop verticaal */
  margin-top: 10px; /* Ruimte boven de knop */
}

/* SignIn Button */
#signInButton,
#submitBtn,
#signOutButton {
  background-color: #1b6ebe; /* Blauwe achtergrondkleur */
  color: white; /* Tekstkleur wit */
  border: none; /* Geen rand */
  padding: 10px 20px; /* Binnenste ruimte van de knop */
  font-size: 16px; /* Tekstgrootte */
  cursor: pointer; /* Muisaanwijzer veranderen naar handje */
  transition: background-color 0.3s ease; /* Soepele overgang voor achtergrondkleur */
  border-radius: 5px; /* Afgeronde hoeken */
}

/* Hover effect voor de knoppen */
#signInButton:hover,
#submitBtn:hover,
#signOutButton:hover {
  background-color: #135490; /* Donkerder blauwe achtergrondkleur bij hover */
}

/* Welkomstbericht */
#welcomeMessage {
  color: #1b6ebe; /* Blauwe tekstkleur */
  font-weight: bold; /* Dikgedrukte letters */
}

.days-container {
  display: flex;
  overflow-x: auto; /* Hierdoor blijven de invoervelden naast elkaar en scrollt de container horizontaal op smallere schermen */
  gap: 10px; /* Optioneel: voegt wat ruimte tussen de invoervelden toe */
}

.day {
  width: 100%;
}

.footer {
  position: fixed; /* Zorgt ervoor dat de footer aan de onderkant van het scherm blijft */
  bottom: 0; /* Plaatst de footer onderaan de pagina */
  left: 50%; /* Plaatst de footer in het midden van de pagina */
  transform: translateX(-50%); /* Center de footer horizontaal */
  color: #444; /* Tekstkleur donkergrijs */
  width: 100%; /* Volledige breedte van de pagina */
  padding: 20px 0; /* Ruimte boven en onder de inhoud van de footer */
  text-align: center; /* Centreer de tekst in de footer */
}

.footer a {
  color: #444; /* Kleur van de link in de footer, hetzelfde als de rest van de tekst */
  text-decoration: none; /* Verwijder onderstreping van de link */
}

/* CSS toevoegen om elementen standaard te verbergen */
#userInfoContainer,
#formContainer {
  display: none;
}

/* Stijlen voor de specifieke sectie */
.special-section {
  display: none; /* Verberg de speciale sectie */
}

.special-section p {
  font-weight: bold; /* Maak de tekst vetgedrukt */
  color: #333; /* Geef de tekst een donkere kleur */
}

/* Welkomsttekst na inloggen */
#userInfoContainer {
  display: block; /* Maak de welkomsttekst zichtbaar */
}