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

body {
    background-color: #19211d;
}

.contGeneral {
    height: 100vh;
    width: 100vw;
    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;
    text-shadow: 1px 1px 5px black;

}

.header img {
    height: 4.5rem;
    align-self: center;
    filter: drop-shadow(1px 1px 5px black);
}

.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;
    text-shadow: 1px 1px 5px black;


}

.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;
    text-shadow: 1px 1px 5px black;


}

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

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

.asideIzq h1 {
    text-decoration: underline black 2px;
    text-underline-offset: 4px;
    text-shadow: 1px 1px 5px black;

}


/* 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);

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;
    align-items: center;


}

.main h1 {
    color: white;
    font-family: 'La Roja AnchaBold';
    font-size: larger;
    padding-left: 10px;
    text-shadow: 1px 1px 5px black;
    margin-bottom: 40px;

}

.main h2{
    color: white;
    font-family: 'La Roja AnchaBold';
    font-size: small;
    padding-left: 10px;
    text-shadow: 1px 1px 5px black;
    margin-bottom: 40px;
}

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

.main img {
    border-radius: 5px;
    filter: drop-shadow(1px 0px 5px black);
    box-shadow: 1px 5px 5px 2px black;
    width: 25em;
    margin-bottom: 20px;
    background: linear-gradient(145deg, #000000, rgb(228, 0, 43));


}

.principal {
    animation: pulso 1s infinite alternate;

}

#playoff {
    width: auto;
}

.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;
    text-shadow: 1px 1px 5px black;

}

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

.asideDer h1 {
    text-decoration: underline rgb(0, 0, 0) 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;
    text-shadow: 1px 1px 5px black;

}

.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;
    text-shadow: 1px 1px 2px grey;

}

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

}

.footer img {
    height: 2em;
    filter: drop-shadow(1px 0px 5px rgb(0, 0, 0));

}

/* } */



@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
}

@keyframes pulso {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}