@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;1,300&display=swap');

@keyframes animacao {
    0% { margin-left: 0%; }
    
    
    20% { margin-left: -55%; }
   
    30%{margin-left:-110%}
  
    40%{margin-left:-165.5%}
   
    50% { margin-left: -221%; }
     
    60%{margin-left:-276.5%}
    
    70%{margin-left:-332%}
   
    80%{margin-left:-387.5%}
    
    
    100%{margin-left:0%}
}

img{
    width: 200px;
    height: 400px;
}

.titulo{
    margin-left:-50%;
    margin-top:10px;
}
header{
    font-family:'Playfair Display SC', serif;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 70px;
    background-color: black; 
    width: 100%;
    padding: 60px;
    margin-left: -1%;
    margin-top:-1%  
   
}
.intro{
    text-indent: 50px;
    justify-content: fixed center;
    width: 50%;
    text-align: left;
    margin-left:5%;
    margin-right:20%;
    font-size:20px;
    margin-top:0%;
    height:10%;
    font-weight: 500px;
    font-family: 'Titillium Web', sans-serif;
    display: fixed;
    
    
}
.subtit{
    font-family:'Titillium Web', sans-serif;
    margin-left:25%;
    margin-top:2%;
    font-size:35px;
    font-style:bold;
    font-weight: 500px;
}

.links:hover{
    color: white;
    background-color: #800000;
    width: 150px;
    border-radius: 50px;
}

.links{
    text-decoration: none;
    color: black;
}

.sites{
    margin-top: 20px;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 800;
    margin-left: 400px;
    margin-right: 400px;
    border-top: 0.1px solid black;
    border-bottom: 0.1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;
    padding: 10px;
}
.galery {
    width: 640px;
    height: 360px;
   
    overflow: hidden;
    margin-top:-20%;
    margin-left: 60%;
    margin-right:15%
}

.galery .fotos {
    width: 600%;
    animation-name: animacao;
    animation-duration:20s;
    animation-iteration-count: infinite;
}

.galery .fotos img {
    width: 350px;
    height: 550px;
    align-items: center;
    border-radius: 10px;

}
.redesSociais{
    color:rgb(255, 255, 255)
}

footer{
    position: absolute;/*posição absoluta*/
    width:100%;/*largura*/
    font-family:Arial, Helvetica, sans-serif ;/*fonte do texto*/
    display: flex;/*deixa o display flexivel*/
    justify-content: space-around;/*da os espaços do display*/
    bottom: 0;/*deixa tudo no final da pagina*/
    padding: 15px;/*espaço vazio entre os elementos*/
    font-size: 20px;/*muda o tamanho da fonte da letra*/
    color:rgb(255, 255, 255);/*muda a cor da letra*/
    background-color: black;/*coloca cor no fundo*/
    text-align: center;/*alinha os textos no centro*/
    font-family: 'Quicksand', sans-serif;/**/
    align-items: center;/*alinha os itens no centro*/
    margin-left:-1% /*coloca os elementos para a esquerda*/
}

.redes:hover{
    color: #800000; /*cor da letra */   
}

.redes{
    color: white; /*cor do fundo */
    text-decoration: none; /*tira o traço do link */
}

.maps:hover{
  color: #800000;  /*cor da letra */ 
}

.maps{
    color: white; /*cor do fundo */
    text-decoration: none; /*tira o traço do link */
}