/* Configurações básicas do corpo */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: url('/images/totoro.gif') no-repeat center center fixed; /* Substitua pelo caminho da sua imagem de fundo */
    background-size: cover;
}

/* Container central para a janela do navegador */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Janela do navegador */
.browser-window {
    width: 70%;
    max-width: 1000px;
    height: 100%; /* Ajustado para dar mais espaço */
    max-height: 700px;
    border: 4px solid #ffffff; /* Borda branca da janela */
    border-radius: 15px;
    overflow: hidden;
    background-color: rgba(17, 33, 49, 0.9); /* Cor de fundo azul escuro com transparência */
    position: relative; /* Para posicionar os controles corretamente */
}

/* Cabeçalho da janela do navegador */
.browser-header {
    display: flex;
    align-items: center;
    background-color: rgba(10, 25, 41, 0.9); /* Cor da navegação igual à da janela */
    padding: 10px;
    border-bottom: 4px solid #ffffff; /* Borda branca na parte inferior do cabeçalho */
    position: relative; /* Para ajustar os botões de controle */
}

/* Controles da janela do navegador */
.browser-controls {
    display: flex;
    gap: 8px;
    margin-left: auto; /* Move os controles para a direita */
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Botões de controle da janela do navegador */
.control-button {
    width: 16px; /* Ajustado para tamanhos tradicionais */
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff; /* Cor dos botões de controle */
    border: 2px solid #ffffff; /* Borda branca ao redor dos botões */
    cursor: pointer;
}

.control-button.close {
    background-color: #ff6347; /* Tomate para o botão de fechar */
}

.control-button.maximize {
    background-color: #ffd700; /* Ouro para o botão de maximizar */
}

.control-button.minimize {
    background-color: #32cd32; /* Verde limão para o botão de minimizar */
}

/* Aba da janela do navegador */
.browser-tabs {
    display: flex;
    flex-grow: 1;
    margin-top: 15px; /* Espaço acima das abas */
}

.tab-link {
    padding: 10px;
    text-decoration: none;
    color: #ffffff; /* Cor do texto das abas */
    background-color: rgba(10, 25, 41, 0.9); /* Cor de fundo das abas igual à da janela */
    border: 2px solid #ffffff; /* Borda branca ao redor das abas */
    border-radius: 15px; /* Arredondamento das abas */
    margin-right: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tab-link:hover {
    background-color: #ffffff; /* Cor de fundo ao passar o mouse sobre as abas */
    color: rgba(10, 25, 41, 0.9); /* Cor do texto ao passar o mouse */
}

.browser-tabs .tab-link.active {
    background-color: #ffffff; /* Cor de fundo da aba ativa */
    color: rgba(10, 25, 41, 0.9); /* Cor do texto da aba ativa */
    font-weight: bold;
}

/* Conteúdo da janela do navegador */
.browser-content {
    padding: 20px;
    height: calc(100% - 42px); /* Ajuste baseado na altura do cabeçalho */
    overflow-y: auto;
}

/* Página específica */
.page {
    display: none; /* Inicialmente escondido */
}

.page.active {
    display: block; /* Exibe a página ativa */
}

/* Estilização da Página 1 */
.banner {
    margin-bottom: 15px; /* Menos espaço abaixo do banner */
    border: 2px solid #ffffff; /* Borda branca ao redor do banner */
}

.banner img {
    width: 100%;
    max-height: 200px; /* Altura máxima do banner */
    object-fit: cover; /* Mantém a proporção da imagem e cobre a área */
}

.about-me {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
    gap: 5px; /* Reduz o espaçamento entre o texto e os ícones */
    margin-bottom: 15px; /* Menos espaço abaixo da seção */
    color: white;
}

/* Ajustar o espaçamento entre os textos */
.about-text {
    margin: 0; /* Remove a margem padrão dos parágrafos */
    line-height: 1.4; /* Ajusta o espaçamento entre linhas */
    font-size: 18px; /* Reduzido para melhor ajuste */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
    padding: 8px; /* Menos padding para ajuste de tamanho */
    border-radius: 5px; /* Bordas arredondadas */
}

/* Seção de ícones de redes sociais */
.social-icons {
    display: flex; /* Alinha os ícones horizontalmente */
    gap: 15px; /* Espaçamento entre os ícones */
    align-items: center; /* Alinha os ícones verticalmente */
    margin-top: 10px; /* Espaço acima dos ícones */
}

.social-icon {
    width: 42px; /* Ajuste o tamanho dos ícones conforme necessário */
    height: 42px;
    border-radius: 50%; /* Arredonda os ícones */
    overflow: hidden; /* Garante que o conteúdo não ultrapasse o círculo */
    background-color: rgba(255, 255, 255, 0); /* Cor de fundo ligeiramente transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.social-icon img {
    width: 24px; /* Ajuste o tamanho da imagem do ícone */
    height: 24px;
    object-fit: contain; /* Mantém a proporção da imagem */
}

.social-icon:hover {
    transform: scale(1.1); /* Aumenta o ícone ao passar o mouse */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); /* Adiciona sombra ao ícone */
}

.content {
    display: flex;
    gap: 20px;
}

.spotify-playlist {
    flex: 1;
}

.about-me {
    flex: 2;
}

.about-me h1 {
    margin-top: 0;
}

/* Texto da Página 1 */
.about-text {
    font-size: 18px; /* Ajustado para melhor legibilidade */
    line-height: 1.6;
    color: #ffffff; /* Cor do texto */
    margin-bottom: 8px; /* Menos espaçamento entre os textos */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
    padding: 8px; /* Menos padding para ajuste de tamanho */
    border-radius: 5px; /* Bordas arredondadas */
}

/* Estilização da Página 2 */
.page#page2 .banner {
    margin-bottom: 15px; /* Menos espaço abaixo do banner */
    border: 2px solid #ffffff; /* Borda branca ao redor do banner */
}

.page#page2 .banner img {
    width: 100%;
    max-height: 200px; /* Altura máxima do banner */
    object-fit: cover; /* Mantém a proporção da imagem e cobre a área */
}

.page#page2 .content {
    display: flex;
    flex-direction: column;
    gap: 1px; /* Menos espaçamento entre os parágrafos */
}

.page#page2 .clickable {
    font-size: 20px; /* Tamanho da fonte reduzido */
    padding: 8px; /* Menos padding para ajuste de tamanho */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    color: #ffffff; /* Cor do texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
}

.page#page2 .clickable:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Leve cor de fundo ao passar o mouse */
}

/* Cores específicas para os itens clicáveis */
.page#page2 .clickable[data-text="minha namorada, valorant, rocket league, osu, minecraft, haikyuu, hxh, b99, shameless, volei, dormir, coca-cola, doces, chuva, ficar em casa"] {
    background-color: rgba(32, 2, 59, 0.2); /* Verde claro */
}

.page#page2 .clickable[data-text="Brigas, muito barulho, subtwt, tiltado"] {
    background-color: rgba(102, 22, 148, 0.2); /* Vermelho */
}

.page#page2 .clickable[data-text="gosta de valorant, haikyuu, hxh, volei"] {
    background-color: rgba(15, 7, 51, 0.171); /* Azul */
}

.page#page2 .clickable[data-text="é de subtwt, posta ou da rt em nsfw, +24y (so se eu der follow antes)"] {
    background-color: rgba(40, 106, 250, 0.151); /* Laranja escuro */
}

.page#page3 .banner {
    margin-bottom: 10px; /* Menos espaço abaixo do banner */
    border: 1px solid #ffffff; /* Borda branca ao redor do banner */
}

.page#page3 .banner img {
    width: 100%;
    max-height: 150px; /* Altura máxima menor para o banner */
    object-fit: cover; /* Mantém a proporção da imagem e cobre a área */
}

.page#page3 .content {
    display: flex;
    gap: 10px; /* Espaçamento menor entre o iframe e a seção de textos */
}

.iframe-container {
    flex: 1; /* Ocupa a maior parte do espaço disponível */
    display: flex;
    justify-content: center; /* Centraliza o iframe */
}

.iframe-container iframe {
    width: 100%;
    height: 250px; /* Altura reduzida do iframe */
    border: 1px solid #ffffff; /* Borda branca ao redor do iframe */
}

.text-section {
    flex: 1; /* Ocupa o espaço restante */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaçamento menor entre as linhas de texto */
}

.text-line {
    color: #ffffff; /* Cor do texto */
    font-size: 20px; /* Aumentado para melhor legibilidade */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
    padding: 8px; /* Padding ajustado para o novo tamanho do texto */
    border-radius: 5px; /* Arredondamento das bordas */
}

.text-link {
    color: #ffffff; /* Cor do link */
    text-decoration: none; /* Remove o sublinhado do link */
}

.text-link:hover {
    color: #ffcc00; /* Cor do link ao passar o mouse */
}

/* Logo clicável para a Página 3 */
.logo {
    display: inline-block;
    margin: 5px 0; /* Espaçamento acima e abaixo da logo */
}

.logo img {
    height: 50px; /* Altura da logo */
    width: auto; /* Mantém a proporção da imagem */
}

/* Conteúdo adicional */
.additional-content {
    margin-top: 10px; /* Ajustado para estar abaixo dos itens clicáveis */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente para o conteúdo adicional */
    border-radius: 5px;
    color: #ffffff; /* Cor do texto do conteúdo adicional */
}

.additional-content p {
    margin: 0;
}

/* Definição de variáveis de cores para fácil modificação */
:root {
    --border-color: #ffffff; /* Cor da borda da janela */
    --window-bg-color: rgba(17, 33, 49, 0.9); /* Cor de fundo da janela do navegador com transparência */
    --header-bg-color: rgba(17, 33, 49, 0.9); /* Cor do fundo do cabeçalho */
    --tab-text-color: #ffffff; /* Cor do texto das abas */
    --tab-bg-color: rgba(17, 33, 49, 0.9); /* Cor de fundo das abas */
    --tab-hover-bg-color: #ffffff; /* Cor de fundo ao passar o mouse sobre as abas */
    --tab-active-bg-color: #ffffff; /* Cor de fundo da aba ativa */
    --control-button-color: #ffffff; /* Cor dos botões de controle */
    --clickable-text-color: #ffffff; /* Cor do texto dos itens clicáveis */
}