body {
  --bege: #E6E0D6;
  --marrom-escuro: #816D4F;
  --marrom-claro: #B29463;
  font-family: 'Roboto', sans-serif;
  height: 4000px;
}

input[type=checkbox] {
  border: 2px solid var(--marrom-claro);
  box-shadow: none;
  outline: none;
}

input[type=checkbox]:checked {
  background-color: var(--marrom-claro);
  border-color: var(--marrom-claro);
  box-shadow: none;
  outline: none;
}

input[type=checkbox]:focus {
  border-color: var(--marrom-claro);
  box-shadow: none;
  outline: none;
}

.banner-1 {
  background-image: url(./assets/banner-1.png);
}

.banner-2 {
  background-image: url(./assets/banner-2.png);
}

.banner-3 {
  background-image: url(./assets/banner-3.png);
}

.banners {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* dá o efeito Parallax (consiste em fazer com que as imagens de fundo se movam em uma velocidade diferente do conteúdo à frente delas, criando a ilusão de profundidade e movimento)*/
}

.banners-title {
  --bs-bg-opacity: .3;
}

.default-btn {
  background-color: var(--marrom-claro);
  color: black;
}

.default-btn:hover {
  background-color: var(--marrom-escuro);
}

.input-range::-webkit-slider-thumb {
  background-color: var(--marrom-claro);
}

.footer-area {
  background-color: var(--marrom-claro)
}

[data-bs-theme="dark"] {
  color: white;
  .nav-link, .btn{
    --bs-nav-link-color: white;
    --bs-body-color: white;
  }
}