body.font-small textarea {
font-size: 20px;
height: 80px;
}

body.font-normal textarea {
font-size: 35px;
height: 150px;
}

body.font-large textarea {
font-size: 50px;
height: 180px;
}

body.font-small .kb_btn {
height: 45px;
font-size: 40px;
line-height: 40px;
}

body.font-normal .kb_btn {
height: 55px;
font-size: 50px;
line-height: 50px;
}

body.font-large .kb_btn {
height: 65px;
font-size: 60px;
line-height: 60px;
}


.layout_3col {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}

.center {
width: 100%;
}

.side {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 80px;
}

.sponsor_box {
width: 300px;
text-align: center;
}

.topo_linha {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

.flag_btn_img {
width: 57px;
height: 42px;
object-fit: contain;
display: block;
}


.band {
height: 60px;
width: auto;
}

.btn_cfg {
height: 54px;
width: 64px;
font-size: 34px;
cursor: pointer;
background: #eeeeee;
border: 2px solid #555;
border-radius: 8px;
}

.config_panel {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}

.config_box {
width: 390px;
background: white;
border-radius: 12px;
padding: 22px;
box-shadow: 0 0 25px rgba(0,0,0,0.35);
font-size: 18px;
}

.config_box h2 {
text-align: center;
margin-top: 0;
}

.config_box label {
display: block;
margin-top: 14px;
margin-bottom: 5px;
}

.config_box select {
width: 100%;
height: 40px;
font-size: 17px;
}

.cfg_line {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 14px;
}

.cfg_line input {
width: 24px;
height: 24px;
}

.cfg_save {
width: 100%;
height: 46px;
margin-top: 20px;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
}

.hidden {
display: none;
}


.help_page {
width: 100%;
box-sizing: border-box;
padding: 10px 40px;
}

.help_img_row {
display: grid;
grid-template-columns: 60% 1fr;
gap: 30px;
align-items: center;
margin: 36px 0;
}

.sponsors {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.sponsor_box {
width: 180px;
text-align: center;
}

.sponsor_title {
font-size: 14px;
color: black;
margin-bottom: 6px;
}

.sponsor_logo {
width: 100%;
opacity: 1;
transition: 0.2s;
}

.sponsor_logo:hover {
opacity: 1;
transform: scale(1.03);
}

.help_img {
width: 90%;
border: 2px solid black;
box-sizing: border-box;
}

.help_img_text {
font-size: 26px;
line-height: 1.45;
}

.help_box {
width: 100%;
max-width: none;
margin: 0;
font-size: 22px;
line-height: 1.55;
}

.help_box h2 {
margin-top: 34px;
font-size: 36px;
}

.help_box p {
margin: 14px 0;
}

.return_box {
text-align: left;
margin: 42px 0;
}

.return_btn {
display: inline-block;
font-size: 32px;
font-weight: bold;
background: #5AAEFA;
color: white;
padding: 14px 34px;
border-radius: 8px;
text-decoration: none;
border: 1px solid black;
}


body {
font-family: Arial, Helvetica, sans-serif;
background: #f0f0f0;
margin: 0;
color: black;
}

h1 {
text-align: center;
font-size: 42px;
margin: 18px 0;
}

.help_page h3 {
text-align: center;
font-size: 30px;
margin: 18px 0;
}


.main {
width: 700px;
max-width: 95%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}

.editor {
width: 100%;
}


.rodape {
text-align: center;
font-size: 25px;
margin: 22px 0 30px 0;
color: #333;
}

.rodape a {
color: #1d4ed8;
font-weight: bold;
text-decoration: none;
}

.rodape a:hover {
text-decoration: underline;
}

.botoes button {
height: 45px;
min-width: 100px;
font-size: 20px;
background: #eeeeee;
border: 2px solid #555;
border-radius: 6px;
cursor: pointer;
}

textarea {
width: 100%;
height: 200px;
font-size: 50px;
padding: 16px;
box-sizing: border-box;
border: 2px solid #555;
resize: vertical;
}

.teclado {
width: 100%;
background: #f0f0f0;
border: 2px solid black;
box-sizing: border-box;
padding: 8px 8px;
margin-top: 4px;
}

.kb_area {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 2px;
}

.kb_btn {
height: 55px;
font-size: 50px;
line-height: 50px;
padding: 0;
margin: 0;
background: #f0f0f0;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.kb_extra {
display: grid;
grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
gap: 8px;
border-top: 0px solid #f0f0f0;
padding: 6px 2px 2px 2px;
margin-top: 4px;
}

.kb_extra button {
height: 45px;
font-size: 20px;
font-weight: bold;
background:#5AAEFA;
color: white;
border: 0px solid white;
border-radius: 8px;
cursor: pointer;
}

.kb_ctrl {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
padding: 0px 0px 0px;
}
.kb_ctrl button {
height: 45px;
font-size: 40px;
background: #f0f0f0;
border: 1px solid #f0f0f0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

@media (max-width: 900px) {
h1 {
font-size: 34px;
margin: 10px 0;
}
.main {
grid-template-columns: 1fr;
gap: 14px;
padding: 10px;
}


.teclado {
border: 2px solid black;
}
.kb_bar {
height: 44px;
line-height: 44px;
font-size: 22px;
}
.kb_area {
padding: 6px;
gap: 0;
}
.kb_btn {
height: 44px;
font-size: 32px;
}
.kb_extra button {
height: 42px;
font-size: 14px;
}
.kb_ctrl {
padding: 6px 18px;
}
.kb_ctrl button {
height: 56px;
font-size: 44px;
}

.help_box {
max-width: calc(100% - 24px);
font-size: 20px;
line-height: 1.45;
}

.help_box h2 {
font-size: 26px;
}

.return_btn {
font-size: 24px;
padding: 10px 24px;
}

.help_img_row {
grid-template-columns: 1fr;
gap: 12px;
}

.help_img_text {
font-size: 20px;
}



.btn_cfg {
height: 42px;
width: 52px;
font-size: 28px;
}

.config_box {
width: calc(100vw - 28px);
font-size: 20px;
padding: 22px;
}

.config_box select {
height: 46px;
font-size: 18px;
}

.cfg_line {
font-size: 18px;
}

.cfg_line input {
width: 28px;
height: 28px;
}

.cfg_save {
height: 50px;
font-size: 18px;
}

@media (max-width: 900px) {
.layout_3col {
grid-template-columns: 1fr;
}

.side {
display: none;
}
}

}