/*========== variaveis ================*/
:root {
  --header-height: 4.5rem;

  /* colors */
  --hue: 320;
  --hue2: 350;
  --base-color: hsl(var(--hue) 66% 57%);
  --base-color-second: hsla(var(--hue), 75%, 88%, 1);
  --base-color-alt: hsla(var(--hue2), 97%, 70%, 1);
  --title-color: hsla(var(--hue), 41%, 10%, 1);
  --text-color: hsl(0 0% 46%);
  --text-color-light: hsl(0 0% 98%);
  --body-color: hsl(0 0% 98%);

  /* Medidas e padrões de media device, no caso para celulares */
  --FlexGrid: grid;
  --title-font-size: 1.875rem;
  --subtitle-font-size: 1rem;
  --body-font: 'Yanone Kaffeesatz', sans-serif;
}

/*
* ELEMENTOS BÁSICOS DA PÁGINA/TAGS HTML
*/
body {
  background-color: rgb(21, 24, 24);
  color: antiquewhite;
  margin: 0;
  padding: 1fr;
  
}

a {
  text-decoration: none;
  color: #ffffff;

}

span.second {
  color: var(--base-color-alt);
  font-weight: bold;
}

span {
  color: var(--base-color);
  font-weight: bold;
}


/*
* ESTILOS DA PÁGINA
*/

#header {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 2rem;
  display: flex;
  color:black;
  font-size: 0.8 rem;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--body-color);
  width: 100%;
}

div .mensagem {
  font-size: 1rem;
}

img {
  width: 100%;


}

#pageDiv {
  align-self: center;
  padding-top: 15px;
  border-top-style: solid;
  border-top-width: 0px;
  max-width: 800px;
  margin: auto;
}
div {
  align-self: center;
  padding-top: 15px;
  border-top-style: solid;
  border-top-width: 0px;
  max-width: 800px;
  margin: auto;
}

main div {
  font-size: x-large;
}

.intro {
  font-family: 'Dancing Script', cursive;
  font-size: x-large;
  text-align: center;
  padding-right: 15px;
  border: none;
}

.introb {
  font-family: 'Roboto', sans-serif;
  font-size: small;
  text-align: center;
  padding-right: 15px;
}

#title {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  margin: 0px;
  margin-bottom: 1px;
  padding-bottom: 3px;
  padding-left: 15px;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 4px;
  border-bottom-color: rgb(241, 101, 0);
}

.devinfo {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 0.9rem;
  padding: 1rem;
}

/*
* JANELA DE ALERTA PARA O TEMPO DE PREPARO DOS FILÉS
*
*/

#messageAlert {
  font-family:  sans-serif;
  display: block;
  background-color: #1a012e;
  color: #ffffff;
  border-radius: 20px;

  position: fixed;
  top: calc(50% - 100px);
  left: calc(50% - 170px);
  width: 330px;
  /* height: 140px; --- deixei a altura livre para adaptar ao texto */
  padding: 0.5rem 0.5rem 1.2rem 0.5rem;
  text-align: center;
  font-size: 0.9rem;

}

.messageAlert {
  visibility: hidden;
  opacity: 0;
  transform: translateY(120%);
  transition: 1s;
}

.messageAlert.show {
  visibility: visible;
  opacity: 100%;
  transform: translateY(0%);
  transition: 1s;
}



.buttonOk {
	width: fit-content;
  font-size: 1.2rem;
  cursor: pointer;
  background-color: #c7dceb;
  color: #000000;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 4px;
  margin-bottom: 3px;
  border-radius: 16px;
}

.buttonAttention {
	width: fit-content;
  font-size: 1.2rem;
  cursor: pointer;
  background-color: rgb(0, 173, 138);
  color: #ffffff;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 3px;
  margin-bottom: 4px;
  border-radius: 16px;
}

/*
* ICONES DE NAVEGAÇÃO
*
*/

.whatsapp {
 background: rgb(107, 182, 107);
  color: var(--text-color-light);
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  padding: 0.5rem;
  clip-path: circle();
  font-size: 1.8rem;

}

.whatsappbox {
  background: rgb(44, 111, 86);
  font-family: 'Yanone Kaffeesatz', sans-serif;
   color: var(--text-color-light);
   position: fixed;
   border-radius: 15px;
   right: 1.8rem;
   bottom: 1.8rem;
   padding: 0.5rem;
   padding-right: 2.2rem;
   /*clip-path: circle();*/
   font-size: 1.5rem;
 
 }


.deliverybox {
  /*background: rgb(107, 182, 107);*/
  background: var(--base-color-alt);
  font-family: 'Yanone Kaffeesatz', sans-serif;
   color: var(--text-color-light);
   position: fixed;
   border-radius: 15px;
   right: 1.2rem;
   bottom: 4.8rem;
   padding: 0.5rem;
   padding-right: 2.2rem;
   /*clip-path: circle();*/
   font-size: 1.5rem;
 
 }

 .deliveryicon {
 /*background: rgb(107, 182, 107); */
   color: var(--text-color-light);
   position: fixed;
   right: 1rem;
   bottom: 1.4rem;
   padding: 0.5rem;
  /* clip-path: circle(); */
   font-size: 1.8rem;
 
 }

 .langbox {
  /*background: rgb(107, 182, 107);*/
  background: var(--base-color-alt);
  font-family: 'Yanone Kaffeesatz', sans-serif;
   color: var(--text-color-light);
   position: fixed;
   border-radius: 15px;
   right: 1.2rem;
   bottom: 4.8rem;
   padding: 0.5rem;
   padding-right: 2.2rem;
   /*clip-path: circle();*/
   font-size: 1.5rem;
 
 }

 .langicon {
 /*background: rgb(107, 182, 107); */
   color: var(--text-color-light);
   position: fixed;
   right: 1rem;
   bottom: 1.4rem;
   padding: 0.5rem;
  /* clip-path: circle(); */
   font-size: 1.8rem;
 
 }