@import url("https://fonts.googleapis.com/css?family=Alata&display=swap");

body {
  margin: 0;
  background-color: #17458F; /* Rotary Donkerblauw */
  font-family: "Alata", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Container & Header styling */
.rotary-container {
  width: 100%;
  max-width: 800px;
  text-align: center;
  position: relative;
}

.rotary-header {
  margin-top: 2rem;
  z-index: 10;
  position: relative;
}

.rotary-logo {
  width: 200px; /* Grootte van het logo */
  height: auto;
  margin-bottom: 0.5rem;
}

.rotary-title {
  color: #FFFFFF;
  font-size: 2.2rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Animatie-lijst styling */
dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  color: whitesmoke;
  height: 50vh; /* Ruimte voor de geanimeerde elementen */
  position: relative;
}

dl * {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

dt {
  --size: 18vmin;
  bottom: 45%;
  width: var(--size);
  height: var(--size);
  font-size: calc(var(--size) - 4vmin);
  opacity: 0;
  transform: translateY(100%);
  animation: dt 28s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

dt:after {
  content: "";
  position: absolute;
  top: 1vmin;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform-origin: 50% 100%;
  animation: dt-pseudo 28s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

/* 4 Items met kleurenschema */
dt:nth-child(1), dt:nth-child(1):after { animation-delay: 0s; }  dt:nth-child(1):after { background-color: #D41367; }
dt:nth-child(3), dt:nth-child(3):after { animation-delay: 7s; }  dt:nth-child(3):after { background-color: #00ADBB; }
dt:nth-child(5), dt:nth-child(5):after { animation-delay: 14s; } dt:nth-child(5):after { background-color: #901F93; }
dt:nth-child(7), dt:nth-child(7):after { animation-delay: 21s; } dt:nth-child(7):after { background-color: #FF7600; }

dd {
  --size: 4.5vmin;
  top: 60%;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 70vmin;
  font-size: calc(var(--size) - 1vmin);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(80%);
  animation: dd 28s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

dd small {
  font-size: 0.8em;
  opacity: 0.9;
  display: block;
  margin-top: 0.3rem;
}

dd:nth-child(2) { animation-delay: 0s; }
dd:nth-child(4) { animation-delay: 7s; }
dd:nth-child(6) { animation-delay: 14s; }
dd:nth-child(8) { animation-delay: 21s; }

/* Keyframes */
@keyframes dt {
  12.5% { transform: translateY(0); opacity: 1; }
  25%   { transform: translateY(0); opacity: 1; }
  37.5% { transform: translateY(2%); opacity: 0; }
}

@keyframes dt-pseudo {
  12.5% { transform: scale(1, 0.1); }
  17.5% { transform: scale(1, 0.1); }
  37.5% { transform: scale(0, 0.1); }
}

@keyframes dd {
  7.5%  { transform: translateY(0); opacity: 1; }
  25%   { transform: translateY(2%); opacity: 0; }
}