.card {
  width: 400px;
}

.logo-footer {
  width: 100px;
}

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

.switch {
  text-align: center;
}

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

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

.card-content {
  background-color: var(--card-bg-color);
}

.card-content p {
  color: var(--secondary-text-color)!important;
}

/* DARK MODE */
:root {
  --card-bg-color: #2f3943;
  --bg-color: #fff;
  --primary-text-color: #222;
  --secondary-text-color:  #ddd;
}

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

.dark-mode {
  --card-bg-color: #fff;
  --bg-color: #2f3943;
  --primary-text-color: #fff;
  --secondary-text-color: #787777;
}

/* CAROUSSEL */
.carousel {
  width: 100%;
  max-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: 100%;
  height: 70vh;
  flex-shrink: 0;
}

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


/* TRICKY BOUTON */
.button-area {
  width: 80%;
  height: 300px;
  position:relative;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 0 auto;
}

.contour {
  border: 1px solid #ccc;
  width: 80%;
  margin: 0 auto;
}
  
#trickyButton {
  position: absolute;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  left: 50px;
  top: 50px;
}

/* COMPTEUR */
#incrementer {
  margin-top: 5px;
  padding: 10px 20px;
  background-color: #3f57c0;
  color: white;
  border: none;
  cursor: pointer;
  left: 50px;
  top: 120px;
}