#liga2-text {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 32px;
  border: 2px solid #ec5a4d; 
  color: #ec5a4d; 
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
  background-color: transparent; 
}

#liga2-text:hover {
  background-color: #ec5a4d; 
  color: #000;               
  border-color: #ec5a4d;     
}

.grid-item[href="realmadrid/"] {
        background-color: white;
        background-image: url("../img/diagmonds-light.png");
        color: rgb(218, 156, 0);
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="realmadrid/"]:hover {
        background-position: 40px 40px; 
        background-color: #b1b0b0; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }

.grid-item[href="barcelona/"] {
        background: repeating-linear-gradient(
            90deg,
            #00209b,
            #00209b 10px,
            #a01d48 10px,
            #a01d48 20px
        );
        color: #edb700;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="barcelona/"]:hover {
        background-position: 40px 40px; 
        }

.grid-item[href="atleticomadrid/"] {
        background-color: #e1291d;
        background-image: url("../img/gplay.png");
        color: #ffffff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="atleticomadrid/"]:hover {
        background-position: 40px 40px; 
        background-color: #ba2419; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }
.grid-item[href="athleticclub/"] {
        background: repeating-linear-gradient(
            90deg,
            #ee2523,
            #ee2523 10px,
            #fff 10px,
            #fff 20px
        );
        color: #000000;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);        
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="athleticclub/"]:hover {
        background-position: 40px 40px; 
        }


.grid-item[href="villarreal/"] {
        background-color: #ffee00;
        background-image: url("../img/diagmonds-light.png");
        color: #005187;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="villarreal/"]:hover {
        background-position: 40px 40px; 
        background-color: #c4a300; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }

.grid-item[href="betis/"] {
        background: repeating-linear-gradient(
            90deg,
            #00943d,
            #00943d 10px,
            #fff 10px,
            #fff 20px
        );
        color: #000000;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);        
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="betis/"]:hover {
        background-position: 40px 40px; 
        }

.grid-item[href="celta/"] {
        background-color: #8ac3ee;
        background-image: url("../img/diagmonds-light.png");
        color: #000000;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="celta/"]:hover {
        background-position: 40px 40px; 
        background-color: #5ba9e5; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }

.grid-item[href="rayo/"] {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #ffffff 45%,
    #e3351c 45%,
    #e3351c 55%,
    #ffffff 55%,
    #ffffff 100%
  );
  color: #000000;
  font-weight: bold;
  font-size: 1.75rem;
  font-family: 'Roboto Slab', serif;
  text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
  transition: background-position 0.5s ease;
  background-size: cover;
  background-position: center;
}

        .grid-item[href="rayo/"]:hover {
        background-position: 40px 40px; 
        }


.grid-item[href="osasuna/"] {
        background-color: #bd080f;
        background-image: url("../img/gplay.png");
        color: #001247;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="osasuna/"]:hover {
        background-position: 40px 40px; 
        background-color: #81060a; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }


.grid-item[href="realsociedad/"] {
        background-color: #01028e;
        background-image: url("../img/gplay.png");
        color: #ffffff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="realsociedad/"]:hover {
        background-position: 40px 40px; 
        background-color: #0000ac; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }
.grid-item[href="mallorca/"] {
        background-color: #ec1b1e;
        background-image: url("../img/gplay.png");
        color: #000;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="mallorca/"]:hover {
        background-position: 40px 40px; 
        background-color: #b51619; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }


.grid-item[href="valencia/"] {
        background-color: white;
        background-image: url("../img/diagmonds-light.png");
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="valencia/"]:hover {
        background-position: 40px 40px; 
        background-color: #b1b0b0; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }
.grid-item[href="getafe/"] {
        background-color: #0157a0;
        background-image: url("../img/gplay.png");
        color: #fff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="getafe/"]:hover {
        background-position: 40px 40px; 
        background-color: #0068c4; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }

.grid-item[href="espanyol/"] {
        background-color: #1c63b8;
        background-image: url("../img/gplay.png");
        color: #fff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="espanyol/"]:hover {
        background-position: 40px 40px; 
        background-color: #12509b; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }


.grid-item[href="alaves/"] {
        background-color: #002791;
        background-image: url("../img/gplay.png");
        color: #fff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="alaves/"]:hover {
        background-position: 40px 40px; 
        background-color: rgb(12, 51, 99); 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }
.grid-item[href="girona/"] {
        background: repeating-linear-gradient(
            90deg,
            #ffffff,
            #fff 10px,
            #b11b30 10px,
            #b11b30 20px
        );
        color: #eeb505;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="girona/"]:hover {
        background-position: 40px 40px; 
        }

.grid-item[href="girona/"] {
        background-color: #b11b30;
        background-image: url("../img/gplay.png");
        color: #fff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="girona/"]:hover {
        background-position: 40px 40px; 
        background-color: #d60b26; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }
.grid-item[href="sevilla/"] {
        background-color: white;
        background-image: url("../img/diagmonds-light.png");
        color: #eb393a;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="sevilla/"]:hover {
        background-position: 40px 40px; 
        background-color: #b1b0b0; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }

.grid-item[href="levante/"] {
        background: repeating-linear-gradient(
            90deg,
            #b4053e,
            #b4053e 10px,
            #005ca5 10px,
            #005ca5 20px
        );
        color: #fac400;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="levante/"]:hover {
        background-position: 40px 40px; 
        }

.grid-item[href="elche/"] {
        background-color: #0f8b45;
        background-image: url("../img/gplay.png");
        color: #fff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
          text-shadow: 5px 5px 15px rgba(255, 255, 255, 0.6);
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="elche/"]:hover {
        background-position: 40px 40px; 
        background-color: #0e7b3d; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }


      
.grid-item[href="oviedo/"] {
        background-color: #0034a1;
        background-image: url("../img/gplay.png");
        color: #fff;
        font-weight: bold;
        font-size: 1.75rem;
        transition: background-position 0.5s ease;
        background-size: 40px 40px;
        background-position: 0 0;
            font-family: 'Roboto Slab', serif;

        }

        .grid-item[href="oviedo/"]:hover {
        background-position: 40px 40px; 
        background-color: #003dc1; 
          text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
        }