body{
    background-color: #121212;
    color: #e0e0e0;
  }

  main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .contenedorPrincipal {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    max-width: 1200px;
    padding-top: 80px;
}

.contenedorPrincipal h1, 
.contenedorPrincipal h2 {
    font-family: "Futura-Medium";
    width: 100%;
    margin: 20px 0;
    width: fit-content;
}

.contenedorPrincipal h2,
.deportesContainer h2,
main .contenedorPrincipal h5 {
    font-family: "Teko-Regular";
}

.headerContenedor h2 {
    font-size: clamp(55px, 2vw, 45vw);
    margin: 0;
}

.contenedorPrincipal p,
.contenedorPrincipal h3 {
    font-size: clamp(24px, 2vw, 26px) !important;
    font-family: 'Futura-Regular' !important;
}

.contenedorPrincipal p {
    margin-top: 10px;
    flex:1;
}

.contenedorPrincipal h3 {
    font-weight: 350 !important;
}

.headerContenedor {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.fila{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content:center;
    gap:30px;
}
.fila h2{
    align-self: center;
    margin-bottom: 70px;
}
.fila img{
    width: 40%;
    object-fit: contain;
}
.divisor{
    margin:20px 0;
    width: 100%;
    border-top: 1px solid #e0e0e0;
 }
.red, .fila a{
    display: flex;
    flex-direction: column;
    flex:1 ;
    border: 1px solid #1f1f1f;
    padding: 10px;
    transition: 0.5s ease-in-out;
    box-shadow: 0 0 10px black;
    text-align:center;
    text-decoration: none;
    color: #e0e0e0;
}
.indet{
    text-decoration: none;
    color:#e0e0e0;
    transition: 0.5s ease-in-out;
    box-shadow: 0 0 10px black;
    border: 1px solid #1f1f1f;

}
.red:hover, .fila a:hover, .indet{
    transform: translateY(-10%) ;
    cursor: pointer;
}
.contenedorImagen{
    flex:1;
    justify-content: center;
    align-content: center;
    display: flex;
}
.red img, .fila a img{
    width: 70%;
    height: auto;
    object-fit: cover;
    align-self: center;
    justify-self: center;
}


.imagenRed{
    filter: invert(75%);
}
