:root{
  --header-height : 75px;
  --main-color : rgb(153, 248, 255);
  --secondary-color : rgb(255, 255, 255);
}

body{
  zoom: 1;
}

header{
height: var(--header-height);
background-color: rgba(255, 255, 255, 0.904);
border-bottom: var(--fivth-color) 1px solid;
}

header button{
  height: 50px;
}

.total-price{
  height: fit-content;
}

#bannierer-container{
  width: 50vw;
}

#bannier p{
  min-width: 700px;
}

.btn-container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
}

.aviso{
  display: block;
  padding: 5px;
  font-size: 2.5vh;
}

.btn-container .total-price,.btn-container .carrinho-container
{
  display: flex;
}

.btn-sm{
  font-size: larger;
}

.nameOfProd{
  max-width: 25vw;
  text-align: center;
}

.cima img{
  margin: 5%;
  height: 25vh;
}

.baixo a{
  max-width: 90%;
  max-height: 95%;
}


footer {
  width: 100vw;
  height: 30vh;
  margin: 20px 0px ;
  display: flex;
}

#footer-description {
  background-color: rgba(45, 121, 121, 0);
  flex: 1.3 1;
}

#footer-description > *{
  margin:5%;
}

#estoque-ancors-container{
  display: flex;
  flex-direction: column;
  background-color:rgba(240, 248, 255, 0);
  flex: 1 1;
  align-items: center;
  justify-content: space-around;
}

.estoque-ancor,.estoque-ancor:hover{
  text-decoration: inherit;
  color: inherit; 
  cursor:pointer;
  border: 2px solid var(--main-color);
  border-radius: 5px;
  padding: 10px;
  font-style: none;
  width: 30vw;
  height: 25%;
  text-align: center;
  font-weight: 900;
  color: var(--secondary-color);
  margin: 5px;
  margin-right: 15px;
}

.boticario-btn, .boticario-btn:hover{
  align-self: start;
  background-color: rgb(64, 199, 109);
}

.eudora-btn, .eudora-btn:hover{
  background-color: rgb(130, 27, 226);
}

.OUI-btn, .OUI-btn:hover{
  align-self: end;
  background-color: rgb(196, 23, 23);
}