@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oregano:ital@0;1&display=swap');

:root {
    --linear-gradient: linear-gradient(90deg, rgba(199,189,214,1) 0%, rgba(252,217,223,1) 51%, rgba(122,162,218,1) 100%);
}


*{
  font-family: 'Poppins',sans-serif;
  margin: 0;
  padding:0;
  box-sizing: border-box;
  color: #251A54;
  
  
  
}

header {
  background: var(--linear-gradient);
  box-shadow: 0px 0px 10px rgba(0,0,0,.5);
  margin: 15px;
  padding: 5px;
  border-radius: 8px;
}

header h1 {
  font-family: 'Oregano', sans-serif;
  font-size: 40px;
  color: #251A54;
  
}
header img {
  text-align:start;
  
}

.nav-bar{
  display: flex;
  justify-content:space-between; /*alimento dos itens -lado a lado*/
  padding: 1.5rem 6rem;
}

.logo {
  display: flex;
  align-items:center;
}

/* Formatação do menu*/

.nav-list {
  display: flex;
  align-items: center;
}

.nav-list ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

.nav-list li {
  background-color:transparent;
  border-radius: 5px;
  padding: 5px 20px;
  margin: 2px;
  color: #251A54;
}

.nav-list li:hover{
  background-color: #ffffff;
  box-shadow: 0px 0px 10px rgba(0,0,0,.1);
  
  
  
}

.nav-item {
  margin:10px;
}


.nav-link {
  text-decoration:none;
  font-size: 1.15rem;
  color: #251A54;
  font-weight: 500;
}


.mobile-menu-icon {
  display: none;
}

.mobile-menu{
  display: none;
}


/* resposividade menu */

@media screen and (max-width: 730px) {
  .nav-bar {
    padding: 1.5rem 4rem;
  }
  h1 {
    display:none;
  }
  .nav-item {
    display: none;
  }
  .mobile-menu-icon {
    display: block;
  }
  .mobile-menu-icon button {
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  .mobile-menu ul {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 1rem;
  }
  .mobile-menu li:hover{
    background-color:white ;
    box-shadow: 0px 0px 10px rgba(0,0,0,.1);
    border-radius: 5px;
    padding-bottom: 10px;
  }
  
  .mobile-menu .nav-item {
    display: block;
    padding-top: 1.2rem;
  }
  .open{
    display: block;
  }
}

section h2 {
  text-align: center;
  margin: 10px;
  padding: 10px;
}

section p {
  text-align: center;
  margin: 10px;
  padding: 10px;

}

span{
  font-size: 0.8em;
  font-style: italic;
}



/* botao instrucoes */
#tooltip-button {
  background:var(--linear-gradient); /* Define a cor de fundo do botão como azul */
  color: #251A54; /* Define a cor do texto do botão como branco */
  border: none; /* Remove a borda do botão */
  border-radius: 6px;
  padding: 5px 10px; /* Adiciona espaçamento interno ao botão */
  cursor: pointer; /* Altera o cursor ao passar sobre o botão */
  width: 200px; /*tamanho do botao*/
 
}

#close-tooltip{
  background:var(--linear-gradient); /* Define a cor de fundo do botão como azul */
  color: #251A54; /* Define a cor do texto do botão como branco */
  border: none; /* Remove a borda do botão */
  border-radius: 6px;
  padding: 5px 20px; /* Adiciona espaçamento interno ao botão */
  cursor: pointer; /* Altera o cursor ao passar sobre o botão */
  width: 80%; /*tamanho do botao*/
}

#tooltip-button2 {
  background:var(--linear-gradient); /* Define a cor de fundo do botão como azul */
  color: #251A54; /* Define a cor do texto do botão como branco */
  border: none; /* Remove a borda do botão */
  border-radius: 6px;
  padding: 5px 10px; /* Adiciona espaçamento interno ao botão */
  cursor: pointer; /* Altera o cursor ao passar sobre o botão */
  width: 200px; /*tamanho do botao*/
 
}

#close-tooltip2{
  background:var(--linear-gradient); /* Define a cor de fundo do botão como azul */
  color: #251A54; /* Define a cor do texto do botão como branco */
  border: none; /* Remove a borda do botão */
  border-radius: 6px;
  padding: 5px 20px; /* Adiciona espaçamento interno ao botão */
  cursor: pointer; /* Altera o cursor ao passar sobre o botão */
  width: 80%; /*tamanho do botao*/
}

.tooltip-content ul{
  list-style: none;
  text-align: center;
}

.tooltip-container {
  position:relative;
  display: flex;
  justify-content:center;
  
  
  
}

.tooltip-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #4c1d95;
  border-radius: 3px;
  padding: 10px;
  z-index: 1;
  
  
}

.tooltip-content p {
  margin: 10px;
  
}

.tooltip-content.show {
  display: block;
}

#close-tooltip {
  display: none;
}

.tooltip-content.show #close-tooltip {
  display: block;
}
@media only screen and (max-width: 730px) {
  .tooltip-content {
      max-width: 250px; /* Reduz a largura máxima do tooltip para telas menores */
  }
}

/* grid */
.wrapper {
  display: grid;
  float: center;
  margin: 10px auto;
  max-width: 500px;
  grid-template-columns: repeat(1, 2fr);
  grid-template-rows: minmax(100px, auto);
  gap: 10px;
}

.wrapper div {
  border-radius: 10px;
}
.grid1 {
  grid-column: 1/2;
  box-shadow: 0px 0px 10px rgba(0,0,0,.2);
  margin-top: 10px; 
  background-color: #e1dee7; 
  margin: 10px;
}
.grid2 {
  grid-column: 1/2;
  box-shadow: 0px 0px 10px rgba(0,0,0,.2);
  padding: 10px;
  margin-top: 10px;
  background-color: #e1dee7; 
  margin: 10px;
  
}



/* 1 calculadora  */

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #251A54;
  border-radius: 10px;
  margin: 10px;

}

#calculator {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.111);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#calculator h4 {
  
  position: relative;
}

#calculator h4::before{
  position: absolute;
  content: '';
  height: 3px;
  width: 150px;
  background: var(--linear-gradient);
}

#input_box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  
}

.input-field label {
  font-size: 15px;
  color: #251A54;
  font-weight: 500;
  text-align: justify;
  
}

.input-field input {
  background-color: transparent;
  border: 1px solid #4c1d95;
  border-radius: 5px;
  color: #251A54;
  padding: 5px;
  margin-right: 5px;
}

.input-field input:focus {
  outline: none;
}

#calculate {
  text-align: center;
  background: var(--linear-gradient);
  border: none;
  padding: 5px;
  margin: 5px;
  color: #0f0f0f;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  width: 90px;
  
}



/* footer */

footer#rodape {
  clear: both;
  border-top: 1px solid #4c1d95;
  
}

footer#rodape p { 
  text-align: center;
}