*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    cursor: pointer;
}
        /* nav bar */
span{
    font-family: 'Courier New', monospace;
    margin:  auto;
    display: inline-block;
    border-left: 4px solid white ;
    padding: 20px;
    
}

span a {
    color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) ;
}

.gg{
    border-right: 4px solid white;
}

span:hover{
    background-color: rgba(150, 150, 150, 0.5);
    transition: 0.5s;
    cursor: pointer;
}

nav{
    background-color: rgba(200, 180, 180, 0.5);
    text-align: center;
    font-size: 150%;
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 1px;
}

            /*capa*/

.walpaper{
    margin-top: 70px;
    height: 400px;
    background-image: url(imagens/capa/capa2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
}

        /*texto antes da galeria*/

.tadg{
    font-family: 'Great Vibes', cursive;
     color: black;
    font-size: 200%;
    margin: 40px;
    padding: 20px;
    text-shadow: 0px 1px 5px red;
}

        /*galeria*/

.galeria{
    text-align: center;
    box-sizing: border-box;
    padding: 40px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'capa texto1 texto2'
                         'vestidos vestidos vestidos'
                         'imagens imagens imagens'
                         'macacao macacao macacao'
                         'capa2 capa2 capa2'
                         'imagens2 imagens2 imagens2'
                         'imagens3 imagens3 imagens3'
                         'rodape rodape rodape'   
    ;

    gap: 30px;

}
            /*edeitos de todas as capas*/

 #capa img:hover{
     box-shadow: 0px 0px 20px 0.7px gold;
     transition:  1.5s ;
}
#texto1 img:hover{
     box-shadow: 0px 0px 20px 0.7px gold;
     transition:  1.5s ;
}
#texto2 img:hover{
     box-shadow: 0px 0px 20px 0.7px gold;
     transition:  1.5s ;
}

            /* este ajuste é a da primeira imagem acima da galeria*/
#capa{
    grid-area: capa;
     object-fit: cover;
}
            /*esta provavelmente afetara todas as imagens da galeria*/
.geral{
    margin: auto;
     display: grid;
    gap: 50px;
    padding: 40px;
    grid-template-columns: 1fr 1fr 1fr;
     width: 70%;
}

.geral a img:hover{
     box-shadow: 0px 0px 20px 0.7px gold;
     transition:  1.5s ;
}

.galeria a img{
     box-shadow: 0px 0px 20px 7px rgba(0, 0, 0, 0.7);
     border-radius: 5px;
    
}
            /* segunda imagem vertical*/
#texto1{
    grid-area: texto1;
}

            /*terceira imagem vertical*/

#texto2{
    grid-area: texto2;
    width: auto;
}

                    /*esta sera a galeria usar display grid novamente*/

/* nome vestidos antes das fotos */

#vestidos{
    grid-area: vestidos;
    font-size: 300%;
}

#imagens{
    grid-area: imagens;
}
                    /*segundo destack tipo macacao pijama etc*/

/*nome macacao abaixo da primeira galeria*/
#macacao{
    grid-area: macacao;
    font-size: 300%;
}
#capa2{
    grid-area: capa2;
    background-image: url(imagens/capa/quarto_backgrounnd.png);
    background-size: cover;
    background-position: center;
    padding: 0;
    
}

#imagens2{
    grid-area: imagens2;
}
                    /*imagens 3 a config gris dentro de imagens2*/

#imagens3{
     grid-template-columns: 1fr 1fr 1fr;
    display: grid;
}

                    /*parte de baixo do site*/

#rodape{
    grid-area: rodape;
}
                    /*sera apagado é so para identificar as div*/
                    
                    
                                    /*                  comentado
.galeria div{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid blue;
}                   
                                    */