/* ---------------- Aca seteamos las propiedades del nombre con efecto de luz parpadeante ------------------- */
.other_name{
    /* Centramos el contenido de la sección y determinamos el color de fondo */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
}

.light{
    /* Establecemos las características del texto */
    font-size: 6.68vmax;
    text-align: center;
    color: rgb(0, 255, 128);
    font-weight: bold;
    position: relative;
}

.light::before{
    /* Establecemos una sombra utilizando un pseudoelemento con un texto idéntico superpuesto */
    content: attr(data-text);
    position: absolute;
    font-size: 10vmax;
    text-shadow: 0 0 20px  rgb(0, 255, 128);
    filter: blur(7px) brightness(0);
    /* Determianmos la animación */
    animation: parpadeo 2s linear infinite;
    animation-delay: 1s;
}

@keyframes parpadeo {
    /* Establecemos el paso a paso de la animación que queremos realizar */
    0%{
         filter: blur(3px) brightness(1);
    }
    3%{
         filter: blur(3px) brightness(0);
    }
    6%{
         filter: blur(3px) brightness(0);
    }
    7%{
         filter: blur(3px) brightness(1);
    }
    8%{
         filter: blur(3px) brightness(0);
    }
    9%{
         filter: blur(3px) brightness(1);
    }
    10%{
         filter: blur(3px) brightness(0);
    }
    20%{
         filter: blur(3px) brightness(1);
    }
}

/* Configuracion de la seccion de gustos */

.container2{
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.container2 .box{
  position: relative;
  width: 300px;
  max-height: 200px;
  background: #ff0;
  margin: 10px;
  display: inline-block;
  border-radius: 25px;
  transition: filter 0.5s;
}

.container2 .box:hover{
     filter: drop-shadow(0px 0px 10px rgba(0, 0 ,0, 0.65));
}

.container2 .box .imgBox{
  position: relative;
  overflow: hidden;
  border-radius: 25px;
}
.container2 .box .imgBox img{
  max-width: 100%;
  transition: 0.6s;
}

.container2 .box:hover .imgBox img{
  transform: scale(1.2);
  filter: blur(2px);
}
.container2 .box .details{
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.8);
  transform: scaleY(0);
  transition: transform .5s;
  border-radius: 10px;
}
.container2 .box:hover .details{
  transform: scaleY(1);
}
.container2 .box .details .content{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 15px;
  color: #fff;
}
.container2 .box .details .content h1{
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #ff0;
}
.container2 .box .details .content p{
  margin: 10px 0 0;
  padding: 0;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .container2 {
    padding: 0;
  }
  .container2 .box {
  margin: 0;
  }
}

.container2 .box:nth-child(5),
.container2 .box:nth-child(6),
.container2 .box:nth-child(7),
.container2 .box:nth-child(8){
     margin-top: 2.75vh;
}