body { font-family: Arial, sans-serif; background-color: #fdfdfd; margin: 0; padding: 20px; } h1, h2 { color: #ff6f00; } .tabs { display: flex; border-bottom: 2px solid #ffca28; margin-bottom: 10px; cursor: pointer; } .tab { padding: 10px 20px; background: #ffe082; margin-right: 2px; border-radius: 5px 5px 0 0; } .tab.active { background: #ffca28; font-weight: bold; } .tab-content { display: none; padding: 15px; border: 2px solid #ffca28; border-top: none; border-radius: 0 5px 5px 5px; background: #fff; } .tab-content.active { display: block; } .vocab, .answer { position: relative; cursor: help; border-bottom: 1px dotted #000; } .vocab:hover::after, .answer:hover::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: 100%; background: #333; color: #fff; padding: 5px; border-radius: 5px; white-space: nowrap; font-size: 0.9em; z-index: 10; } input[type=”text”] { width: 200px; padding: 5px; margin: 5px 0; } textarea { width: 100%; height: 120px; padding: 10px; margin-top: 5px; } label { display:block; margin: 3px 0; } .instructions { background: #ffca28; padding: 8px; border-radius: 5px; margin-bottom: 10px; font-style: italic; } .ai-instructions { background: #ffe082; padding: 10px; border-radius: 5px; margin-bottom: 15px; font-weight: bold; }

Aprender Português com Histórias

Template de História – Diálogo Backpackers