@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Sofia+Sans:ital,wght@0,1;0,400;0,500;0,600;1,200;1,300&display=swap');
/* Importa as fontes 'Poppins' e 'Sofia Sans' do Google Fonts, com diferentes pesos e estilos. */

* {
    margin: 0;
    padding: 0;
}
/* Remove a margem e o preenchimento padrão de todos os elementos para um estilo mais consistente. */

body{
    min-height: 100vh;
    background-image: url("images/fundo.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;  
    font-family: "Poppins";  
    color: #fff;
}
/* Estiliza o corpo da página:
   - Altura mínima de 100% da altura da janela.
   - Fundo com uma imagem que cobre toda a área, sem repetir, centralizada.
   - Fonte padrão 'Poppins'.
   - Cor do texto branca. */

nav{
    display: flex;
    justify-content: flex-end;
}
/* Define o container de navegação como um flexbox e alinha os itens ao final da linha. */

nav ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Estiliza a lista de navegação:
   - Remove os marcadores da lista.
   - Define como flexbox, alinhando os itens ao centro e ao final. */

nav li{
    height: 60px;
}
/* Define a altura dos itens da lista de navegação. */

nav li:first-child{
    margin-right: auto;
}
/* Faz com que o primeiro item da lista empurre os demais para a direita, criando espaço à esquerda. */

nav a{
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #fff;
}
/* Estiliza os links de navegação:
   - Altura total do item da lista.
   - Espaçamento interno horizontal.
   - Remove a decoração do texto (sublinhado).
   - Flexbox para alinhar o conteúdo verticalmente.
   - Cor branca para o texto. */

nav a:hover{
    color: #dcdcdc;
}
/* Define a cor do texto dos links quando o cursor do mouse está sobre eles. */

.icon{
    fill: #fff;
}
/* Define a cor de preenchimento dos ícones SVG. */

.logotipo{
    font-weight: bold;
    font-size: 1.6rem;
}
/* Estiliza o logotipo:
   - Negrito.
   - Tamanho da fonte maior. */

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    z-index: 999;
    background-color: rgba(255,255,255, 0.2);
    box-shadow: -10px 0 10px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    backdrop-filter: blur(10px);
}
/* Estiliza a barra lateral:
   - Posição fixa no canto superior direito.
   - Altura total da janela.
   - Largura de 280px.
   - Alta prioridade na pilha de contexto (z-index).
   - Fundo semi-transparente.
   - Sombra para dar profundidade.
   - Inicialmente escondida.
   - Flexbox vertical.
   - Alinhamento inicial dos itens ao início. 
   - Filtro de desfoque no fundo. */

@media (max-width: 800px){
    .hideMobile{
        display: none;
    }
}
/* Esconde elementos com a classe 'hideMobile' em telas menores que 800px. */

@media (min-width: 800px){
    .hideDesktop{
        display: none;
    }
}
/* Esconde elementos com a classe 'hideDesktop' em telas maiores que 800px. */

.content{    
    display: flex;
    justify-content:center;
    align-items: center;
    height: 90vh;
    color: #fff;
    flex-direction: column;
    text-align: center;    
}
/* Estiliza o conteúdo principal:
   - Flexbox centralizado vertical e horizontalmente.
   - Altura de 90% da altura da janela.
   - Cor do texto branca.
   - Coluna flexível.
   - Texto centralizado. */

.content p{    
    max-width: 400px;
}
/* Limita a largura máxima dos parágrafos dentro do conteúdo a 400px. */