*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: auto;
}
body{
  margin: 0;
  background-color: #c7e5e3;
}
         
        .letreiro-container{
            width: 100%;
            overflow: hidden;
            background-color: #0a9396;
            color: azure;
            padding: 10px 0;
            box-shadow: 0 0 15px rgb(0, 0, 0);
            font-family: "Bebas Neue", sans-serif;
            display: flex;
            position: relative;
        }

        .letreiro{
            display: inline-block;
            white-space: nowrap;
            animation: rolar 15s linear infinite;
        }

        @keyframes rolar {
            0%{
                transform: translateX(100%);
            }
            100%{
                transform: translateX(-100%);
            }
        }

        .letreiro span{
            margin: 0 50px;
            font-size: 1.2rem;
            font-weight: bold;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 2px;
            
        }
        .titulo{
          text-align: center;
          background-color: #ffffff;
          margin: 0%;
          padding: 20px;
        }
        
        .recado{
          background-color: #e3e648;
          color: white;
          padding: 10px;
          text-align: center;
          font-family: "Bebas Neue", sans-serif;
          font-size: 1.2rem;
          margin-top: 10px;
          margin: 25px;
          border-radius: 15px;
          padding: 10px 20px;
          border: #ff0303 2px solid;
          
        }
        
        .h2-padrao{
          font-family: "bebas neue", sans-serif;
          color: #0a9396;
          font-size: xx-large;
        }
        .fonte-padrao{
          text-align: center;
          font-family: "bebas neue", sans-serif;
          color: #0a9396;
          font-size: xx-large;
          margin-top: 20px;
        }

        .fonte2-padrao{
          text-align: center;
          font-family: "bebas neue", sans-serif;
          color: #000000;
          font-size: xx-large;
          margin-top: 20px;
        }
        .tema{
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-between;
         width: 100%;
        }
        .nome{
          text-align: center;
          display: flex;
          flex-direction: column;
          width: 40%;
          text-align: start;
        }

        .botaotema{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px;
          border-radius: 15px;
          border: none;
          cursor: pointer;
          background-color: #0a9396;
          font-size: larger;
        }

        .h2-tema{
          font-family: "bebas neue", sans-serif;
          color: #0a9396;
          font-size: xx-large;
        }

        .recado span{
          font-size: xx-large;
          color: #ff0303;
          margin-right: 5px;
        }

        img{
          width: 80px;
          border-radius: 5px;
          margin-bottom: 5px;
        }
        .texto1{
          overflow: hidden;
          padding: 15px;
          background-color: white;
          border-radius: 15px;
          color: #000000;
          font-size: medium;
          border: #0a9396 2px solid;
          margin: 20px;
        }

       .imagem{
         display: flex;
        background-color: #c7e5e3;
        padding: 20px;
        justify-items: center;
        align-items: center;
        flex-direction: row-reverse;
        border-top: 10px solid #0a9396;
       
       }

       .imagem img{
        object-fit: cover;
        width: auto;
        height: 400px;
        animation: flutuar 3s ease-in-out infinite;
        padding: 20px;
       
        
       }
      
       @keyframes flutuar {
        0%{
            transform: translatey(0px);
        }
        50%{
            transform: translatey(-35px);
        }
        100%{
            transform: translatey(0);
        }
       }

       .destaque-padrao{
        font-weight: bold;
        color: #0a9396;
          }

       .temperatura{
        background-image: url(ChatGPT\ Image\ 14\ de\ jul-Photoroom.png);
        padding: 35px;
        font-size: x-large;
        margin-top: 0%;
        background-color: #0a9396;
        color: rgb(0, 0, 0);
        object-fit: cover;
       }

       .temperatura .p2{
          font-weight: bold;
       }
       .fundotexto-t{
        backdrop-filter: blur( 35px);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 15px rgb(0, 0, 0);
       }
       
        .informacao-video {
            text-align: center;
            margin-top: 20px;
            background-color: #c7e5e3;
            padding: 10px;
            border-radius: 15px;
            width: 100%;
        }
        .informacao-video p{
            font-weight: bold;
            margin: 10px;
        }
        
        .informacao-video li{
            list-style-type: none;
            padding: 0;
            margin: 10px;
            
        }

        .informacao-video ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .fórmulas{
         margin: 20px;
        }
        .quiz{
          align-items: center;
          justify-content: center;
          background-color: #c7e5e3;
          border-radius: 15px;
          padding: 20px;
          margin: 20px;
          
        }
        .quiz p{
          margin-top: 15px;
          margin-bottom: 15px;
        }
        .quiz input{
          border-radius: 5px;
          position: relative;
          margin-bottom: 10px;
          
        }

        .temperatura iframe {
        width: 100%;
        max-width: 600px;
        height: 400px;
        border-radius: 15px;
        margin-top: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
     }
   
        /* video responsivo */
        @media screen and (max-width: 700px) {
        .temperatura iframe {
         height: 40vw;
         max-width: 100%;
         min-height: 200px;
      }
      }
.calculadora2{
  padding: 20px;
  border-radius: 15px;
  margin: 30px auto;
  max-width: 600px;
  width: 98%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

}
.calculadora2 input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;

}
.calculadora2 label{
  text-align: start;
  display: block;
  margin-bottom: 5px;
}
.calculadora2 button {
  width: 100%;
  padding: 10px;
  background-color: #0a9396;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}
.calculadora2 button:hover {
  background-color: #94d2bd;
}

.calculadora{
  padding: 20px;
  background-color: #ffffff;
  border-radius: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
}
.calculadora input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;

}
.calculadora label{
  text-align: start;
  display: block;
  margin-bottom: 5px;
}
.calculadora button {
  width: 100%;
  padding: 10px;
  background-color: #0a9396;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}
.calculadora button:hover {
  background-color: #94d2bd;
}

.raiz2 {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
}

.raiz2 input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;

}

.raiz2 label{
  text-align: start;
  display: block;
  margin-bottom: 5px;
}

.raiz2 button {
  width: 100%;
  padding: 10px;
  background-color: #0a9396;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

.raiz2 button:hover {
  background-color: #94d2bd;
}

.calculoporcentagem{
  padding: 20px;
  background-color: #ffffff;
  border-radius: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
}

.calculoporcentagem input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.calculoporcentagem label{
  text-align: start;
  display: block;
  margin-bottom: 5px;
}
.calculoporcentagem button {
  width: 100%;
  padding: 10px;
  background-color: #0a9396;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}
.calculoporcentagem button:hover {
  background-color: #94d2bd;
}
#resultadoconsumo ,#resultadoraiz ,#resultado2, #resultado3, #resultado4 ,#resultadoraiz ,#resultado5 {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}

.consumo{
  padding: 30px;
  background-color: transparent;
  width: 100%;
  backdrop-filter: blur(35px);
  border-radius: 15px;
  margin: 30px auto;
  box-shadow:  0 0 15px rgba(0, 0, 0, 0.5);
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.consumo p { 
  margin-bottom: 15px;
  font-size: 1.2rem;
  color: #000000;
}

.consumo span {
  font-weight: bold;
  color: #6eaef7;}



       /* Estilos para telas menores */
       @media  screen and (max-width: 1030px) {

        .nome{
          max-width: 50%;
        }
        .imagem{
          flex-direction: column;
          align-items: center;
         
        }
        .imagem img{
          width: 100%;
          height: auto;
          margin-top: 20px;
        }
        .texto1, .texto2 h2, .temperatura h1{
          text-align: center;
          margin: 10px;
          justify-items: center;
        }

        .temperatura h1{
          font-size: 8vw;
        }

        .texto2{
          text-align: start;
        }

       }

       /*temas diferentes*/

.texto1-verde{
         overflow: hidden;
          padding: 15px;
          background-color: #ffffff;
          border-radius: 15px;
          color: #000000;
          border: #00ff08 2px solid;
          margin: 20px;
          box-shadow: 0 0 25px #00ff08;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
        }


.h2-verde{
        font-family: "bebas neue", sans-serif;
        letter-spacing: 2px;
        font-size: xx-large;
        color: #00ff08;
       }
      
    .h1-verde {
  color: #00ff08;
  font-family: "bebas neue", sans-serif;
  letter-spacing: 2px;
}
.imagem-verde {
  background-color: #000000;
  padding: 20px;
  justify-items: center;
  align-items: center;
  flex-direction: row-reverse;
  border-top: 10px solid #00ff08;
  display: flex;
  flex-direction: column;
}

.imagem-verde{
  color: #00ff08;
  letter-spacing: 2px;
  font-weight: 700;
}
.letreiro-container-verde{
            width: 100%;
            overflow: hidden;
            background-color: #00ff08;
            color: rgb(0, 0, 0);
            padding: 10px 0;
            box-shadow: 0 0 15px rgb(0, 0, 0);
            font-family: "Bebas Neue", sans-serif;
            display: flex;
            position: relative;
        }

       .fonte-verde{
          text-align: center;
          font-family: "bebas neue", sans-serif;
          color: #00ff08;
          font-size: xx-large;
          margin-top: 20px;
        }

         .botaotema-verde{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px;
          border-radius: 15px;
          border: none;
          cursor: pointer;
          background-color: #00ff08;
          font-size: larger;
        }

        .destaque-verde{
        font-weight: bold;
        color: #00ff08;
       font-size: large;
          }

        .fonte2-verde{
          text-align: center;
          font-family: "bebas neue", sans-serif;
          color: #000000;
          font-size: xx-large;
          margin-top: 20px;
        }

         .temperatura-verde{
        background-image: url(ChatGPT\ Image\ 14\ de\ jul-Photoroom.png);
        padding: 35px;
        font-size: x-large;
        margin-top: 0%;
        background-color: #00ff08;
        color: rgb(3, 3, 3);
        object-fit: cover;
       }

       .temperatura-t-verde{
        backdrop-filter: blur( 50px);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 15px #000000;
       
       }

.calculadora2-verde button {
  width: 100%;
  padding: 10px;
  background-color: #00ff08;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

.calculadora2-verde{
  padding: 20px;
  border-radius: 15px;
  margin: 30px auto;
  max-width: 600px;
  width: 98%;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px #000000;

}
.resultados-verde {
   text-align: center;
  margin-top: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  color: white;
}

.calculadora2-verde label{
  text-align: start;
  display: block;
  margin-bottom: 5px;
  color: white;
}

.informacao-video-verde{
  text-align: center;
  margin-top: 20px;
  background-color: #6eaef7;
  padding: 10px;
  border-radius: 15px;
  width: 100%;
}

.quiz-verde{
  align-items: center;
  justify-content: center;
  background-color: #6eaef7;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;  
}

.consumo-verde{
  padding: 30px;
  width: 100%;
  backdrop-filter: blur(50px);
  border-radius: 15px;
  margin: 30px auto;
  box-shadow:  0 0 15px rgba(0, 0, 0, 0.5);
  color: #000000;
  
}
.consumo-verde p {
  margin-bottom: 15px;
  font-size: 1.2rem;
  color: #000000;
}
.consumo-verde span {
  font-weight: bold;
  color: #fafdff;
}
.consumo-verde h1{
  color: #ffffff;
}
.consumo-verde button{
  background-color: #00ff08;
  color: #000000;
}

.consumo-verde .calculadora{
  padding: 20px;
  background-color: #6eaef7;
  border-radius: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
}

.raiz2-verde {
  padding: 20px;
  background-color: #6eaef7;
  border-radius: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
}

.raiz2-verde button {
  width: 100%;
  padding: 10px;
  background-color: #00ff08;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}
.raiz2-verde #resultadoraiz {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  color: white;
}

.calculoporcentagem-verde {
  padding: 20px;
  background-color: #6eaef7;
  border-radius: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
}

.calculoporcentagem-verde button{
  width: 100%;
  padding: 10px;
  background-color: #00ff08;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}