body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

/*source: https://olympics.com/cio/news/paris-2024-accueille-les-medias-internationaux-pour-un-point-de-situation-avant-les-jeux-olympiques-et-paralympiques*/
.background {
  background-image: url("../data/laeti/ParisOlympic.jpg");

  height: 100%; 

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}


.main-button {
    position: absolute;
    top: 50%; 
    right: 10%; 
    transform: translateY(-50%);
    padding: 20px 40px;
    font-size: 24px; 
    color: white; 
    background-color: #d4af37; 
    background-image: linear-gradient(145deg, #d4af37, #ffd700); /*gold effect*/
    border: none;
    border-radius: 10px; 
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    animation: move 1s infinite alternate; /*  moving effect */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.743); 
}

.main-button:hover {
    background-color: #b8860b;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15),
                0 4px 6px rgba(255, 255, 255, 0.25); 
}

@keyframes move {
    0% {
        transform: translateY(-50%) translateX(0); /* Initial position */
    }
    100% {
        transform: translateY(-50%) translateX(-8%); /* Move to the left */
    }
}

.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}


/* general styling */
:root {
    --smaller: .75;
  }

  li {
    display: inline-block;
    font-size: 1.5em;
    list-style-type: none;
    padding: 1em;
    text-transform: uppercase;
  }
  
  li span {
    display: block;
    font-size: 4.5rem;
  }

  li .number-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white; 
    padding: 0.3em 0.8em; 
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(255, 215, 0, 0.75); /* Golden shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 5px;
}
  
  li .number-box:hover {
    transform: translateY(-5px); 
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.75); /* black shadow when hover*/
  }


  @media all and (max-width: 768px) {
    h1 {
      font-size: calc(1.5rem * var(--smaller));
    }
    
    li {
      font-size: calc(1.125rem * var(--smaller));
    }
    
    li span {
      font-size: calc(3.375rem * var(--smaller));
    }
  }

  /*align with the olympic logo*/
  .countdown-container {
    position: absolute;
    bottom: 12%; 
    left: 5%; 
    }