* {
    margin: 0;
    /* Remove as margens padrão */
    padding: 0;
    /* Remove os espaçamentos internos padrão */
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    /* Define a fonte do site todo */
    background: #240a6d;
    /* Cor de fundo da página */
    color: white;
    /* Cor padrão do texto para todos pagina */
}

header {
    display: flex;
    /* Organiza os elementos em linha */
    justify-content: space-around;
    /* Organiza os itens com espaços */
    align-items: center;
     /* Coloca os itens no centro */
    padding: 22px 8%;
    /* Espaçamento interno */
    background-color: #21056d;
    /* Cor de fundo */
    box-shadow: 0 4px 20px #6b4ac7;
    /* Adiciona sombra */
    position: sticky;
    /* Mantém o cabeçalho fixo ao rolar */
    top: 0;
    /* Fica colado ao topo */
    z-index: 10;
    /* Define a prioridade de exibição */
}


.Inicio {
    text-align: center;
    /* Centraliza o texto */
    padding: 50px;
    /* Espaçamento interno */
}

/* Logo */

.logo {
    font-size: 1.4rem;
    /* Tamanho da fonte */
    font-weight: bold;
    /* Texto em negrito */
    color: rgb(114, 187, 255);
    /* Cor do texto da logo*/
}

/* menu */

nav a {
    text-decoration: none;
    /* Remove o sublinhado */
    color: antiquewhite;
    /* Cor do link */
    margin-left: 25px;
    /* Espaço à esquerda */
    font-weight: bold;
    /* Texto em negrito */
    transition: 0.3s ease;
    /* Transição suave */
}

nav a:hover {
    color: rgb(65, 255, 192);
    /* Quando o mouse  passa em cima e muda de cor */
}

/*Playlist de Musica  */

.Playlist {
    padding: 10px 8%;
    /* Espaçamento interno, para fica no meio da pagina*/
}

.Playlist h2 {
    text-align: center;
    /* Centraliza o texto */
    padding: 20px;
    /* Espaçamento interno */
    color: rgb(255, 0, 0);
    /* Cor do título */
    width: 100%;
    /* Ocupa toda a largura */
}


.Musica {
    display: flex;
    /* Organiza os elementos em linha */
    justify-content: space-between;
    /* Deixa os itens separados */
    align-items: center;
     /* Coloca os itens no centro */
    
    padding: 15px ;
    /* Espaçamento interno */
    background: #0f0f0f;
    /* Cor de fundo */
    border-radius: 15px;
    /* Bordas arredondadas */
    margin: 15px auto;
    /* Centraliza e adiciona margem */
}

.Musica a {
    display: inline-block;
    /* Permite definir tamanho e espaçamento */
    color: rgb(241, 250, 247);
    /* Cor do texto */
    text-decoration: none;
    /* Remove o sublinhado */
    padding: 10px 25px;
    /* Espaçamento interno */
    border-radius: 20px;
    /* Bordas arredondadas */
    background: #615f61;
    /* Cor de fundo */
    transition: 1.3s;
    /* Transição suave */
}

.Musica a:hover {
    background: #0acccc;
    /* Altera a cor de fundo */
    color: #0f0f0f;
    /* Altera a cor do texto */
    box-shadow: 0 0 15px #0acccc;
    /* Adiciona brilho */
}

/* Albuns  */

.Albuns {
    display: flex;
    /* Deixa os elementos na mesma linha */
    padding: 30px;
    /* Espaçamento interno */
    gap: 20px;
    /* Espaço entre os elementos */
    justify-content: center;
    /* Coloca os itens no centro */
    flex-wrap: wrap;
    /* Quebra linha quando necessário ,usado para deicha o texto embaixo da foto   */
}

.Albuns h2 {
    text-align: center;
    /* Centraliza o texto */
    width: 100%;
    /* Ocupa toda a largura */
}

.galeria {
    background: #0f0333;
    /* Cor de fundo */
    padding: 15px;
    /* Espaçamento interno */
    border-radius: 12px;
    /* Bordas arredondadas */
    width: 150px;
    /*definir largura*/
    text-align: center;
    /* Centraliza o texto */
    transition: 0.3s;
    /* Transição suave */
}

.galeria:hover {
    transform: scale(1.1);
    /* Aumenta o tamanho */
    box-shadow: 0 0 30px #00ffff;
    /* Adiciona brilho */
}

.galeria img {
    width: 100%;
    /* Ocupa toda a largura */
    border-radius: 8px;
    /* Bordas arredondadas */
}

.galeria p {
    margin-top: 12px;
    /* Espaço acima do texto */
}

/* Gareria de fotos  */
.Fotos {
    text-align: center;
    /* Centraliza os itens */
    margin: 50px auto;
    /* Centraliza e adiciona margem */
}

.Fotos img {
    width: 150px;
    /* Largura da imagem */
    height: 150px;
    /* Altura da imagem */
    margin: 10px;
    /* Espaço ao redor */
    border-radius: 10px;
    /* Bordas arredondadas */
}

.Fotos h2 {
    text-align: center;
    /* deixa o texto no centro */
    width: 100%;
    /*definir largura*/
}

/* filtro da Galeria */
.foto-item1 {
    filter: brightness(200%);
    /* Aumenta o brilho da imagem */
}

.foto-item2 {
    filter: grayscale(100%);
    /*Deixa a imagem em preto e branco*/
}

.foto-item3 {
    filter: sepia(100%);
    /* Aplica um efeito sépia, deixando a imagem com aparência de foto antiga */
}

.foto-item4 {
    filter: none;
    /* Mantém a imagem com as cores originais */
}

.foto-item5 {
    filter: invert(100%);
    /* Inverte as cores da imagem */
}


/* campo de deixar comentarios */
.comentario {
    background-color: #582df5;
    padding: 30px;
    /* criar um espaçamento */
    border-radius: 1rem;
    width: 300px;
    /*definir largura*/
    margin: 12px auto;
    /*Deixa um espaço acima e abaixo e centraliza o elemento*/
}

h2 {
    color: antiquewhite;
    /*cor da letra*/
    text-align: center;
    /*deichar a letra do centro*/
    margin-bottom: 1.5rem;
    /*Cria um espaço abaixo do elemento*/
}

input,
textarea {
    width: 100%;
    /* Ocupa toda a largura */
    margin-bottom: 12px;
    /*Cria um espaço abaixo do elemento*/
    border: none;
    /* Remove a borda */
    border-radius: 0.5rem;
    /* arredondar as bordas do elemento */
    background-color: #050a3a;
    /*cor de fundo*/
    color: azure;
    /*cor da letra*/
    font-size: 2rem;
    /*aumentar o tamanho da letra*/
}

button {
    width: 100%;
    /* Ocupa toda a largura */
    padding: 0.75rem;
    /* criar um espaçamento */
    background-color: #190e3a;
    /* colocar a cor de fundo do botão */
    color: #ffffff ;
    /* definir a cor do texto */
    border-radius: 0.5rem;
    /* arredondar as bordas do elemento */
    font-size: 1rem;
    /*aumentar o tamanho da letra*/
}


/* rodape */
.rodape {
    background: #8c3bd879;
    /*colocar a cor de fundo*/
    text-align: center;
    /* Deixa o texto centralizado */
    padding: 15px;
    /* criar um espaçamento */

}

/*definir o tamanho para os icones*/
.rodape img {
    width: 30px;
    /* definir largura*/
    height: 30px;
    /*definir altura*/
    margin: 0 10px;
    /* criar espaço ao redor dos elementos*/
    transition: 0.3s;
    /*faze uma Transição  suave */

}

/* Efeito de crescimento*/
.rodape img:hover {
    transform: scale(1.2);
    /* Aumenta o tamanho ao passar o mouse */
}


footer p {
    margin: 5px 0;
}

@media(max-width: 768px)
{
    header{ 
        flex-direction: column; /* Coloca os itens um abaixo do outro */
        gap: 15px; /* Cria espaço entre os itens */
    }

    nav a{
        margin: 0 8px; /* Adiciona espaço nas laterais dos links */
    }

    .comentario{
        width: 90%; /* Diminui a largura em telas menores */
    }

    .sobre{
        width: 90%; /* Ajusta a largura da seção Sobre */
    }

    .Musica{
        flex-direction: column; /* Coloca os itens um abaixo do outro */
        gap: 10px; /* Cria espaço entre os itens */
        text-align: center; /* Centraliza o texto */
    }

    .Fotos img{
        width: 120px; /* Diminui a largura da imagem */
        height: 120px; /* Diminui a altura da imagem */
    }

    .sobre {
        width: 90%; /* Ajusta a largura para telas menores */
    }

    .sobre h2 {
        font-size: 28px; /* Diminui o título */
    }

    .sobre p {
        font-size: 18px; /* Diminui o texto */
    }
}