@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("/styles/header.css");
@import url("/styles/banner.css");
@import url("/styles/menuProdutos.css");
@import url("/styles/modalProdutos.css");
@import url("/styles/cardsProdutos.css");
@import url("/styles/footer.css");

:root {
  --cor-de-fundo: #050505;
  --texto: #f0e3ca;
  --cor-primaria: #625345;
  --cor-secundaria: #ff8303;
  --degrade: linear-gradient(97.54deg, #625345 5.49%, #a35709 165.37%);
  --fonte-principal: "Poppins", sans-serif;
  --fonte-secundaria: "Josefin Sans", sans-serif;
}

body {
  background-color: var(--cor-de-fundo);
  font-family: var(--fonte-principal);
  font-size: 16px;
  font-weight: 400;
  color: var(--texto);
}

#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: var(--texto);
  color: var(--cor-primaria);
  border: none;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  font-size: 30px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  padding: 0;
}

#backToTopBtn:hover {
  background-color: var(--cor-secundaria);
  color: var(--texto);
  opacity: 1;
}