body{
    margin: 0px;
    background-color: rgb(109, 229, 107);
}

.main-background{
    background-color: #fcffb3;
     width: 80%;
    display: flex;
    flex-direction: column;
    margin: 25px auto;
    align-items: center;
    border: 3px solid rgb(90, 56, 12);
}

@font-face {
  font-family: 'AmoreChristmas'; /* Choose any name you like */
  src: url('fonts/AmoreChristmas.otf') format('opentype'); /* Adjust the path and format */
  font-weight: 400; /* Define the weight and style of this specific file */
  font-style: normal;
}

@keyframes color-pulse-custom {
    0% {
        /* Base: Rosa pálido com brilho baixo */
        color: #f5c0c0;
        text-shadow: 
            0 0 1em rgba(169, 85, 173, 0.2),      /* #a955ad (Roxo) - Fundo */
            0 0 0.125em rgba(169, 85, 173, 0.3),  /* #a955ad (Roxo) - Contorno */
            1em 0.125em 0.5em rgba(239, 95, 89, 0); /* #ef5f59 (Salmão) - Invisível */
    }
    30% {
        /* Pico 1: Texto fica quase branco (brilho) */
        color: #ffe0e0; 
        text-shadow: 
            0 0 1em rgba(169, 85, 173, 0.5),      /* Brilho Roxo mais forte */
            0 0 0.125em rgba(169, 85, 173, 0.5),  
            -0.5em -0.125em 0.25em rgba(115, 70, 70, 0.2), /* #734646 (Marrom) - Sombra deslocada */
            0.5em 0.125em 0.25em rgba(239, 95, 89, 0.4);   /* #ef5f59 (Salmão) - Luz deslocada */
    }
    40% {
        /* Pico Máximo: Texto muito claro */
        color: #fff0f0;
        text-shadow: 
            0 0 1em rgba(169, 85, 173, 0.5),
            0 0 0.125em rgba(169, 85, 173, 0.9),  /* Roxo intenso */
            0.25em 0.125em 0.125em rgba(134, 28, 28, 0.4); /* #861c1c (Vermelho Escuro) - Detalhe */
    }
    70% {
        /* Retorno: Similar ao 30% mas com direções opostas */
        color: #ffe0e0;
        text-shadow: 
            0 0 1em rgba(169, 85, 173, 0.5),
            0 0 0.125em rgba(169, 85, 173, 0.5),
            0.5em -0.125em 0.25em rgba(115, 70, 70, 0.2),  /* Marrom */
            -0.5em 0.125em 0.25em rgba(239, 95, 89, 0.4);  /* Salmão */
    }
    100% {
        /* Volta ao estado de repouso */
        color: #f5c0c0;
        text-shadow: 
            0 0 1em rgba(169, 85, 173, 0.2),
            0 0 0.125em rgba(169, 85, 173, 0.3),
            -1em 0.125em 0.5em rgba(239, 95, 89, 0);
    }
}

.title-back{
    background-image: url(/title-back.jpeg);
    background-size: 130px;
    margin: -10px 10px 10px 10px;border: 2px solid rgb(90, 56, 12);
    justify-content: center;
    text-align: center;
  
    width: 100%;
}

h1{
  font-family: AmoreChristmas;
    font-size: 5rem;
    color: #f5c0c0;
    text-shadow: 0 0 5px #734646, 0 0 10px #a955ad, 0 0 15px #861c1c, 0 0 20px #ef5f59;
    
    animation: color-pulse-custom 4s infinite;
}

.main{
     width: 80%;
      font-size: 1.2rem; /*se baseia num tamanho de fonte base definido pelo nav. */
      
}

.carousel-container {
  overflow: hidden; /* Hides images outside the viewport */
  position: relative;
  border-radius: 50px;
  border: 2px solid black;
  margin-bottom: 15px;
}

.carousel-slide {
    display: flex; /* Aligns images horizontally */
    width: fit-content; /* Container width expands to fit all images */
    animation: slide-animation 25s linear infinite; /* Animation properties */
}

.carousel-slide img {
  width: 100px;
  height: auto;
  padding: 0px 2px;
  /* Ensures each image takes up the full width of the container at that moment */
  /* Set a consistent height as needed */
}

@keyframes slide-animation {
  0% {
    transform: translateX(0); /* Start position */
  }
  100% {
    transform: translateX(-50%); /* Moves the container to the halfway point (end of the first set of images) */
  }
}

nav{
    padding: 10px;
    border: 3px solid rgb(90, 56, 12);
    margin: 25px 0px;
    display: flex;
    justify-content: center;
    background: rgb(141, 85, 48);
}

nav a{
    color: white;
    font-size: 1.4rem;
    justify-content: space-between;
    text-decoration-line: none;
    margin: 0px 10px;
    padding: 10px;
    transition: transform 0.4s ease-in-out, background-color 0.3s ease-in-out;
    border-radius: 50px;
    cursor: pointer
}

nav a:hover{
    color: rgb(60, 33, 3);
    background-color: #eccfbabf;
    border: 1px solid #4b0303;
    border-radius: 50px;
    transform: scale(1.05);
}

.intro{
    border: 3px solid rgb(90, 56, 12);;
    background-image: url("block-wallpaper.jpeg");
    margin: 15px 0px;
    padding: 20px;
    display: flex;
}

.intro p{
    border: 3px solid rgb(90, 56, 12);;
    font-size: 1.4rem;
    background-color: white;
    padding: 15px;
}

.intro img{
    border: 3px solid rgb(90, 56, 12);;
    margin: 20px;
}