* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: Arial, sans-serif;
 background: #d6d6d6;
}

.prova {
 width: 100%;
 max-width: 900px;
 margin: 20px auto;
 background: #f2f2f2;
 padding: 20px;
 border: 1px solid #999;
}

.topo {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 background: #e0e0e0;
 padding: 10px;
 border: 1px solid #aaa;
 flex-wrap: wrap;
}.topo img{
 width: 200px !important;
 height: auto !important;
 display: block;
}



.painel {
 margin: 15px 0;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

button {
 padding: 8px 12px;
 cursor: pointer;
}

.ativo {
 background: #1e5eff;
 color: white;
}

.bloco {
 background: white;
 border: 1px solid #aaa;
 padding: 15px;
 margin-bottom: 15px;
}

textarea {
 width: 100%;
 height: 120px;
 font-size: 16px;
 border: 1px solid #999;
}

#texto,
#comparacao {
 width: 100%;
 word-break: break-word;
}

#comparacao {
 font-family: monospace;
 line-height: 1.6;
}

.ok {
 color: black;
}

.erro {
 color: red;
 background: #ffe5e5;
}

#resultadoFinal {
 font-weight: bold;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 background: white;
 margin: 5px 0;
 padding: 8px;
 border: 1px solid #ccc;
}

@media (max-width: 768px) {
 .prova {
 margin: 0;
 padding: 12px;
 border-left: none;
 border-right: none;
 }

 .topo {
 flex-direction: column;
 align-items: flex-start;
 }

 .painel button {
 width: 100%;
 }

 h1 {
 font-size: 22px;
 margin: 0;
 }

 h2 {
 font-size: 18px;
 }

 textarea {
 height: 160px;
 }
}
img{
 width: 200px;
 height: auto;
}