.card {
    width: 400px;
}

.logo-footer {
    width: 100px;
}

.hero-body {
    background-color: #FFFF00;
}

.switch {
    text-align: center;
}

h3 h1 {
  color: var(--primary-text-color) !important;
}

/* DARK MODE */
:root {
    --bg-color: #fff;
    --primary-text-color: #222;
    --secondary-text-color: #616060;
    }

body {
    background: var(--bg-color);
}
.content {
    color: var(--primary-text-color);
    text-align: center;
}
.content p {
    color: var(--secondary-text-color);
}

.dark-mode {
    --bg-color: #3e4c59;
    --primary-text-color: #fff;
    --secondary-text-color: #ddd;
}

/* CAROUSSEL */
.carousel {
  width: 1280px;
  overflow: hidden;
  margin: auto;
  position: relative;
  border: 2px solid #ccc;
  border-radius: 10px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  transform: translateX(0);
}

.carousel-slide {
  min-width: 1280px;
  height: 700px;
  flex-shrink: 0;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TRICKY BOUTON */
.button-area {
    width: 100%;
    height: 300px;
    position:relative;
    overflow: hidden;
    border: 1px solid #ccc;
  }
  
#trickyButton {
  position: absolute;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  left: 50px;
  top: 50px;
}

#incrementer {
  padding: 10px 20px;
  background-color: #3f57c0 !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  left: 50px !important;
  top: 120px !important;
}
  