/* code summary */
/* we use before and after pseudos to achieve a false moving bg and shadow respectively */

@property --degree {
    syntax: "<angle>";
    inherits: false;
    initial-value: 10deg;
   }
   .main-container {
    text-align: center;
    margin: 2px auto;
    border-radius: 10px;
    width: 70%;
}
.main-container h2{
    color:white;
}
.main-container p{
    color:white;
}
.horizontal-line {
    width: 60%;
    margin: -9px auto;
    border-bottom: 2px solid white;
}
.secondary-container {
    background-color: #f0f0f0;
    padding: 20px;
    border: 2px solid black;
    border-radius: 10px;
    width: 70%;
    margin: 20px auto;
}
.titulo_ganadores{
  line-height: 0.8rem;
}
.titulo_g{
  font-size: 1.2rem;
  color: white;
  font-family: 'Cinzel-Black';
  padding: 0px;
}

i {
  cursor: pointer;
  color: white;
  font-size: 1.2rem;
}

/* Estilos para el texto de "Ir o Leer" */
.hover-text {
  position: absolute;
  display: none;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.8rem;
    left: 80%;
    transform: translateX(-50%);
}

/* Estilos para mostrar el texto al pasar el mouse sobre el ícono */
a:hover .hover-text {
  display: block;
}
.autor{
  font-family: 'Cinzel-Regular';
}
   .card {
     font-family: 'NotoSans-Regular';
    padding: 1vw;
    position: relative;
    background-color: hsl(284deg 89% 28%);
    font-size: 15px;
    text-align: center;
    border-radius: 20px;
   }
   .card::before {
    content: "";
    position: absolute;
    width: 101.3%;
    height: 101.3%;
    top: -0.4%;
    left: -0.6%;
    background: linear-gradient( var(--degree),
    hsl(295, 100%, 23%) 20%, 
    hsl(286, 100%, 60%) 60%, 
    hsl(300, 100%, 60%) 100% );
    border-radius: inherit;
    /* filter: blur(40px); */
    z-index: -1;
    animation: spin 20s infinite ease-in-out;
    will-change: contents;
   }
   .card::after {
    content: "";
    position: absolute;
    width: 105%;
    height: 105%;
    top: -1%;
    left: -1%;
    background: linear-gradient(
     var(--degree),
     hsl(295, 100%, 23%) 20%,
     hsl(300, 77%, 57%) 100%
    );
    border-radius: inherit;
    filter: blur(40px);
    z-index: -2;
    animation: spin 20s infinite ease-in-out;
    will-change: contents;
   }
   
   @keyframes spin {
    0% {
     --degree: 1deg;
    }
    100% {
     --degree: 360deg;
    }
   }
   
   .list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .list li {
    border-bottom: 1px solid #ccc;
    padding: 5px;
    color: white;
  }
  
  .list li:last-child {
    border-bottom: none;
  }