body {

    font-family: 'Arial', sans-serif;

    margin: 0;

    background-color: #1c1c1c;

    color: #fff;

}



header {

    background-color: #FF6A13;

    color: white;

    padding: 20px;

    text-align: center;

    font-size: 2.5em;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

}



nav {

    background-color: #0074CC;

    text-align: center;

    padding: 15px;

}



nav a {

    color: white;

    margin: 0 20px;

    text-decoration: none;

    font-weight: bold;

    font-size: 1.1em;

}



nav a:hover {

    color: #FF6A13;

    text-decoration: underline;

    transition: color 0.3s ease;

}

.logo{
    width: 100px;
    height: auto;
}

.contenedor {

    padding: 20px;

    max-width: 1000px;

    margin: auto;

    background-color: #333;

    border-radius: 10px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

}





h2, h3 {

    color: #FF6A13;

    text-align: center;

    font-size: 2em;

    margin-top: 20px;

}



p {

    color: #fff;

    font-size: 1.1em;

    line-height: 1.6;

    text-align: center;

    margin: 10px 0;

}



table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 30px;

    border-radius: 10px;

    overflow: hidden;

}



th, td {

    border: 1px solid #ccc;

    padding: 15px;

    text-align: center;

    background-color: #222;

    color: #fff;

    font-size: 1.1em;

}



th {

    background-color: #FF6A13;

    color: white;

}



tr:nth-child(even) {

    background-color: #444;

}



tr:nth-child(odd) {

    background-color: #333;

}



tr:hover {

    background-color: #0074CC;

    color: white;

}



.video-container {

    margin: 20px 0;

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: 10px;

}



footer {

    background-color: #222;

    color: #fff;

    text-align: center;

    padding: 10px;

    margin-top: 20px;

    font-size: 1.2em;

}



footer a {

    color: #FF6A13;

    text-decoration: none;

}



footer a:hover {

    text-decoration: underline;

    transition: color 0.3s ease;

}

.container2 {
    width: 100%;
    height: 100vh; /* Asegura que el contenedor ocupe toda la altura de la ventana */
    background-image: url('https://www.rocketleague.com/_next/image?url=https%3A%2F%2Fus-west-2-epicgames.graphassets.com%2FA0Gpf4ZpfQzaTePr3NRc1z%2Fresize%3Dfit%3Aclip%2Cheight%3A1080%2Cwidth%3A1920%2Foutput%3Dformat%3Awebp%2Fcm9lgrdqi0zco06odp0jzsh0u&w=3840&q=75');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita si no cubre todo el espacio */
}

.imagen-centro {
    display: block;
    margin:  auto; /* Centra la imagen y añade espacio */
    width: 50%; /* Ajusta este valor según el tamaño que desees */
    max-width: 800px; /* Evita que sea demasiado grande en pantallas grandes */
    height: auto; /* Mantiene proporción */
    border-radius: 8px; /* Opcional: esquinas redondeadas para mejor estética */
}