/* @media (min-width: 1024px) { */

body {
    background-color: #19211d;
}

.contGeneral {
    height: 98vh;
    width: 99vw;
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    /* grid-template-rows: repeat(6, 1fr); */
    /* grid-template-rows: 1fr repeat(3, auto) 1fr; */
    /* grid-template-rows: repeat(2, 1fr) auto repeat(2, 1fr); */
    grid-template:
        "header header navbar navbar navbar" 100px
        "asideIzq main main main asideDer" auto
        "footer footer footer footer footer" 100px/
        1fr 1fr 1fr 1fr 1fr;

    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

/* HEADER */
/* El primer valor (1) es la línea de inicio de la fila (row start).
    El segundo valor (1) es la línea de inicio de la columna (column start).
    El tercer valor (2) es la línea de fin de la fila (row end).
    El cuarto valor (3) es la línea de fin de la columna (column end). */

.header {
    /* grid-area: 1 / 1 / 2 / 3; */
    grid-area: header;
    background-color: rgb(228, 0, 43);
    border-radius: 7px;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-family: 'La Roja AnchaBold', serif;
}

.header img {
    height: 4.5rem;
    align-self: center;
}

.header h1 {
    text-align: center;
    font-size: 1.4rem;
}

/* NAVBAR */
.navbar {
    /* grid-area: 1 / 3 / 2 / 6; */
    grid-area: navbar;
    background-color: rgb(228, 0, 43);
    border-radius: 7px;
    font-family: 'La Roja AnchaBold';
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.abrir-menu,
.cerrar-menu {
    position: fixed;
    opacity: 0;
}

.menu {
    width: 50vw;
    list-style: none;
    /* height: 1em; */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 15px;

}

.menu ul li {
    color: white;
}

.menu a {
    color: white;
    font-size: 1.2rem;
    text-transform: uppercase;
    position: relative;
    text-decoration: none;
    text-underline-offset: 4px;
}

.menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.menu a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* ASIDE IZQUIERDO */
.asideIzq {
    /* grid-area: 2 / 1 / 6 / 2; */
    grid-area: asideIzq;
    border-radius: 7px;
    background-color: #165452;
    color: #fad628;
    font-family: 'La Roja AnchaBold';

    font-size: xx-small;

    display: flex;
    flex-direction: column;
    justify-content: start;
    /* align-items: start; */
    align-items: stretch;
    padding-left: 10px;
    padding-right: 10px;

}

.asideIzq ul {
    list-style: none;
    padding-inline-start: 0px;
}

.asideIzq ul li {
    padding: 1vh;

}

.asideIzq a {
    color: #fad628;
    text-decoration: none;
    font-size: small;
    transition: transform 0.5s ease-in-out;

}

.asideIzq a:hover {
    color: red;
    transform: scale(1.2);
}

.asideIzq a::before {
    content: "⚽ ";
}

.asideIzq h1 {
    text-decoration: underline black 2px;
    text-underline-offset: 4px;
}


/* MAIN */
.main {
    /* grid-area: 2 / 2 / 6 / 5; */
    grid-area: main;
    border-radius: 7px;
    background-color: #165452;
    /* background-image: url(/imagenes/copaDelRey.jpg); */

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(228, 0, 42, 0.711);




}

.compe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}




section p {
    width: 400px;
    text-align: center;
}

section img{
    height: 150px;
    filter: drop-shadow(1px 0px 5px black);

}

.separador {
    border-bottom: 1px solid #ccc;
}

.main h1 {
    color: #fad628;
    font-family: 'La Roja AnchaBold';
    font-size: larger;
    padding-left: 10px;
    text-decoration: underline black 2px;
    text-underline-offset: 4px;
    text-shadow: 1px 1px 5px black;

}

.main p {
    color: white;
    font-family: 'La Roja AnchaBold';
    font-size: x-small;
}

.compe h1 {
    color: white;
    font-family: 'La Roja AnchaBold';
    font-size: larger;
    padding-left: 10px;
    text-decoration: none;
    text-underline-offset: 4px;
}


button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background: linear-gradient(145deg, #000000, rgb(228, 0, 43));
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

button a{
    text-decoration: none;
    color: white;
    font-family: 'La Roja AnchaBold';
    font-size: small;
}

button:hover {
    transform: translateY(-2px);
    transform: scale(1.1);
}


.resultados {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px
}

#WidgetRF_matches_list_1694637791887 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#WidgetRF_matches_list_1694637791887 iframe {
    flex-grow: 1;
    border: none;
    border-radius: 15px;
}

/* ASIDE DERECHO */
.asideDer {
    /* grid-area: 2 / 5 / 6 / 6; */
    grid-area: asideDer;
    border-radius: 7px;
    background-color: #165452;
    color: #fad628;
    font-family: 'La Roja AnchaBold';

    font-size: xx-small;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    padding-left: 10px;
    padding-right: 10px;
}

.asideDer ul {
    list-style: none;
    padding-inline-start: 0px;
}

.asideDer ul li {
    padding: 1vh;

}

.asideDer a {
    color: #fad628;
    text-decoration: none;
    position: relative;
    font-size: small;
}

.asideDer a::before {
    content: "🏆 ";
}

.asideDer h1 {
    text-decoration: underline black 2px;
    text-underline-offset: 4px;
}

.asideDer a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: rgb(228, 0, 43);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.asideDer a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* FOOTER */
.footer {
    /* grid-area: 6 / 1 / 7 / 6; */
    grid-area: footer;
    /* height: 14vh; */
    background-color: rgb(228, 0, 43);
    border-radius: 7px;
    font-family: 'La Roja AnchaBold';
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.rrss {
    width: 50%;
    background-color: rgb(228, 0, 43);
    border: 2px solid white;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.footer p {
    font-size: 0.8em;
    width: 40%;
    color: white;

}

.footer img {
    height: 2em;
}

/* } */



@font-face {
    font-family: 'La Roja AnchaBold';
    src: url("LaRoja-AnchaBold.eot");
    src: url("LaRoja-AnchaBold.eot?#iefix") format("embedded-opentype"), url("/fuentes/LaRoja-AnchaBold.woff2") format("woff2"), url("LaRoja-AnchaBold.woff") format("woff"), url("LaRoja-AnchaBold.ttf") format("truetype"), url("LaRoja-AnchaBold.svg#LaRoja-AnchaBold") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}