body {
    font-family: comic sans ms;
    background-color: hsla(0, 0%, 0%, 0.95);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Usa min-height para garantir que cubra toda a tela */
    text-align: center; /* Centraliza o texto */
}

h1, p {    
    font-family: comic sans ms;
    color: white;
    margin-top: 20px;
}

#flags {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Todas as imagens do mesmo tamanho */
#flags img {
    width: 125px;      /* ajuste como quiser */
    height: 100px;     /* proporção de bandeira */
    object-fit: cover;
    cursor: pointer;
}

#verbInput {
    width: 80%; /* Torna o input responsivo */
    max-width: 300px; /* Limita a largura máxima */
    margin: 10px 0;
    padding: 10px;
    font-size: 1em; /* Tamanho de fonte ajustável */
}

#output {
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    white-space: pre-wrap; /* Preserva quebras de linha */
    word-wrap: break-word; /* Quebra palavras longas */
    max-height: 300px; /* Limita a altura do output */
    overflow-y: auto; /* Adiciona rolagem vertical quando necessário */
    border: 1px solid #ccc; /* Adiciona uma borda para visualização */
    width: 80%; /* Torna o div responsivo */
    max-width: 300px; /* Limita a largura máxima */
    font-size: 0.9em; /* Tamanho de fonte ajustável */
}

.back-button {
  color: #4da6ff;
}
.back-button:hover {
  color: #80bfff;
}


/* Estilo para o seletor de idioma */
.language-selector {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1em;
    padding: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Media query para dispositivos móveis */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Adiciona espaçamento nas bordas */
    }
    
    h1 {
        font-size: 1.5em; /* Ajusta o tamanho da fonte */
    }
    
    #verbInput,
    #output,
    #copyButton {
        width: 100%; /* Faz os elementos ocuparem toda a largura disponível */
        max-width: none; /* Remove a largura máxima */
    }

    #copyButton {
        font-size: 1.2em; /* Aumenta o tamanho da fonte */
        padding: 15px 30px; /* Aumenta o tamanho do botão */
    }

    /* Ajusta o seletor de idioma para dispositivos móveis */
    .language-selector {
        font-size: 1.2em;
        padding: 10px;
    }
}

/* camada dos gatos */
#cat-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* gato base */
.cat {
  position: absolute;
  width: clamp(80px, 18vw, 120px); /* responsivo */
  opacity: 0.85;
  animation: fadeout 5s linear forwards;
}

/* esquerda e direita */
.cat.left {
  left: 5vw;   /* distância proporcional da borda */
  bottom: 10vh;
}

.cat.right {
  right: 5vw;
  bottom: 10vh;
}

@keyframes fadeout {
  0%   { opacity: 0; }
  10%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { opacity: 0; }
}