body {


background-image: url("FundoJoio.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;




}
header {

   display: flex;
   justify-content:left ;
   align-items:flex-end ;
   width: 100%;
   height: 120;
   font-family: 'Lucida Sans';
}


.logo {

display: flex;
align-items: center;
justify-content: center;
width: 10%;
font-size: 30px;
color: rgb(245, 224, 224);
margin-right: 1%;
}

.parte1 {
margin-right: 8px;

}

.parte2 {

font-weight: bold;

}
.menu {

display:flex;
align-items: center;
justify-content: left;
width: 66%;
font-size: 18px;
color: rgb(245, 224, 224);

}

.item-menu {
margin-right:9%;   
transition: 0.2s;

}
.item-menu:hover{
color: rgb(238, 159, 159) ;
cursor: pointer;
text-decoration: underline;
scale: 1.05;
opacity: 1;
}


.usuario {
display:flex;
align-items: center;
justify-content: center;
width: 24%;
font-size: 14px;
color: rgb(245, 224, 224);

}
.login{

   margin-right: px;
   background-color: rgb(28, 63, 80) 
   width: 20%;
   height: 40px;
   display: flex;
   align-items: :left;
   justify-content: :left;
   
}

.cadastro{

   background-color: rgb(28, 63, 80) ;
   width: 20%;
   height: 40px;
   border-radius: 45px;

   display: flex;
   align-items: right;
   justify-content: right;

   transition: 0.2s;

}
.cadastro:hover{
    background-color: rgb(97, 141, 115) ;
color: rgb(238, 159, 159) ;
cursor: pointer;  
text-decoration: underline;
scale: 1.05;
}

.login:hover{

color: rgb(234, 187, 187) ;
cursor: pointer;  
text-decoration: underline;
scale: 1.05;
}
.homecompleta{

width: 100%;
height: 700px;
display:flex;
align-items: center;
justify-content: left;
}

.home{

width: 35%;
height: 500px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-items:center;
align-items:center ;
font-family:'Lucida Sans';
color:rgb(255, 255, 255) ;
}

.titulo{
font: size 200px;
margin-bottom: 20px;

margin-left: 10%;
width: 50%;
justify-content: left;
text-shadow: 4px 4px 4px black;


}

.subtitulo{
font: size 50px;
margin-bottom:40px;

margin-left:-30%;
width: 50%;
justify-content: left;

text-shadow: 4px 4px 4px black;

}

.botão{


font-size: 20px;

margin-left:5%;
width: 70%;
text-shadow: 4px 4px 4px black;
transition: 0.2s;

}

.botão:hover{

color: red;
cursor: pointer;
text-decoration: underline;
scale: 1.05;
opacity: 1;

}

/* 1. Comando principal para fixar no canto */
.galeria-canto-direito {
    position: absolute; /* Tira o elemento do fluxo normal */
    top: 100px;    /* Distância do topo da página (ajuste este valor) */
    right: 25px;  /* Distância do lado direito da página (ajuste este valor) */
    width: 200px; /* Largura da galeria */
    padding: 10px;
    flex-direction: column;
}

/* 2. Comando para organizar as imagens dentro da galeria (usando Flexbox) */
.galeria-canto-direito {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Espaçamento entre as fotos */
    justify-content: flex-start; /* Alinha as fotos à esquerda do contêiner da galeria */
    flex-direction: column;
}

.galeria-canto-direito img {
    width: 200px;  /* Largura da miniatura */
    height: 200px; /* Altura da miniatura */
    object-fit: cover;
    flex-direction: column;


}