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

        display: flex;
        flex-direction: column;
        
        justify-content: space-evenly;
        align-items: stretch;


    }

    .main h1{
        color: white;
        font-family: 'La Roja AnchaBold';
        font-size: larger;
        padding-left: 10px;
    }

    .main img{
        border-radius: 5px;
        
    }

    .principal{
        animation: pulso 1s infinite alternate;

    }

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

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