body {
    font-family: Arial, sans-serif;
    background-color: #47bfbe;
  }
  
  .container {
    max-width: 80%;
    margin: 5% auto;
    padding: 5%;
    border-radius: 1%;
    background-color: #ffffff;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
  }
  
  
  .container h2 {
    text-align: center;
  }
  
  .container p {
    text-align: center;
  }
  
  #question {
    margin-bottom: 20px;
  }
  
  .reacoes {
    display: flex;
    justify-content: center;
  }
  
  .reacoes input[type="radio"] {
    display: none;
  }
  
  .reacao-label {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 0 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 24px;
    background-color: #eceaea;
    color: white;
  }
  
  .reacao-label:hover {
    background-color: grey;
  }
  
  .reacao-label:hover::before {
    content: attr(for);
  }
  
  .reacao-label::before {
    position: relative;
    top: 5px;
  }
  
  #reacao0 + .reacao-label::before {
    content: "0";
  }
  .zero{
    background-color: #c50012;
  }
  
  #reacao1 + .reacao-label::before {
    content: "1";
  }
  
  .one{
    background-color: #e7001e;
  }

  #reacao2 + .reacao-label::before {
    content: "2";
  }
  
  .two{
    background-color: #f93504;
  }

  #reacao3 + .reacao-label::before {
    content: "3";
  }
  
  .three{
    background-color: #ff6503;
  }

  #reacao4 + .reacao-label::before {
    content: "4";
  }

  .four{
    background-color: #fab104;
  }
  
  #reacao5 + .reacao-label::before {
    content: "5";
  }

  .five{
    background-color: #fed600;
  }
  
  #reacao6 + .reacao-label::before {
    content: "6";
  }

  .six{
    background-color: #e3ec00;
  }
  
  #reacao7 + .reacao-label::before {
    content: "7";
  }

  .seven{
    background-color: #daec01;
  }
  
  #reacao8 + .reacao-label::before{
    content: "8";
  }

  .eight{
    background-color: #b5e419;
  }
  
  #reacao9 + .reacao-label::before {
    content: "9";
  }

  .nine{
    background-color: #9cdd24;
  }
  
  #reacao10 + .reacao-label::before {
    content: "10";
  }

  .ten{
    background-color: #36c547;
  }
  
  button {
    display: block;
    margin: 20px auto;
    margin-top: 4%;
    padding: 20px 30px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  #mensagem {
    text-align: center;
    margin-top: 20px;
  }

  /* Adiciona um estilo especial quando o botão de classificação estiver selecionado */
    .reacao-label.selected {
        background-color: rgba(0, 0, 0, 0.1);
        color: #050505; /* Cor do texto branca para melhor legibilidade */
        font-weight: bold; /* Texto em negrito para destacar */
    }

    .reacao-label.selected:hover {
        background-color: #ffd700; /* Mantém a cor de fundo amarela ao passar o mouse sobre o botão selecionado */
    }

    /* Mantém o texto visível mesmo quando o botão é selecionado */
    .reacao-label.selected::before {
        content: attr(for);
    }

    textarea {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        background-color: #f8f8f8;
        resize: vertical;
        font-family: Arial, sans-serif;
        font-size: 14px;
      }
      
      label[for="observacoes"] {
        display: block; 
        margin-top: 20px;
        font-size: 16px;
        color: #333;
      }
    
      .imagem-container {
        width: 100%; /* Ajusta a largura da div ao contêiner pai */
        max-width: 300px; /* Máxima largura da div para evitar que a imagem fique muito grande */
        margin: 20px auto; /* Centraliza a div */
        border-radius: 8px; /* Opcional: arredonda as bordas da div */
        overflow: hidden; /* Garante que o conteúdo da div não ultrapasse os limites definidos */
      }
      
      .imagem-container img {
        width: 50%; /* Faz a imagem preencher a largura da div */
        height: auto; /* Mantém a proporção da imagem ajustando automaticamente a altura */
        display: block; /* Remove qualquer espaço abaixo da imagem */
      }
      
      #img1 {
        position: absolute;
        top: 10%; /* Posiciona no topo do contêiner pai */
        right: 70%; /* Alinha ao lado direito do contêiner pai */
      }
      
      #img2 {
        position: absolute;
        top: 10%; /* Posiciona no topo do contêiner pai */
        right: 1%; /* Alinha ao lado direito do contêiner pai */
      }
      
/* Consulta de mídia para dispositivos de tela menores, como celulares e tablets */
@media only screen and (max-width: 1200px) {
  .container {
      max-width: 90%; /* Reduz a largura máxima do contêiner para que ele se ajuste a telas menores */
  }

  .reacao-label {
      width: 40px; /* Reduz o tamanho dos botões de reação para telas menores */
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      margin: 0 3px; /* Reduz a margem entre os botões de reação para telas menores */
  }

  button {
      font-size: 16px; /* Reduz o tamanho da fonte dos botões para telas menores */
  }

  .imagem-container {
      display: none; /* Oculta as imagens em dispositivos de tela menores */
  }
}