@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Chiron+Sung+HK:ital,wght@0,200..900;1,200..900&display=swap');

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
        }
        .Fondo {
            min-height: 100vh;
            position: relative;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .Fondo::before {
            content: '';
            background-image: url(lucy.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0.40;
            z-index: -1;
        }
        h1 {
            font-family: "Chiron Sung HK", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 70px;
            color: #002c41;
            position: relative;
            margin-bottom: 50px;
        }
        a {
            font-family: "Abril Fatface", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 30px;
            text-decoration: none;
            font-weight: bold;
            color: #8367c7; 
        }
        #MENU {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .MENU-LIST {
            list-style: none;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            position: relative;
        }
        .MENU-LIST li a {
            font-size: 3rem;
            font-weight: 600;
            transition: 250ms;
            position: relative;
            display: inline-block;
            z-index: 2;
            padding: 5px 10px;
            color: #6795db;
        }

        .MENU-LIST li a::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            color: rgba(255, 255, 255, 0); 
            transition: color 250ms, letter-spacing 250ms; 
            z-index: -1; 
            white-space: nowrap;
        }

        .MENU-LIST li a:hover {
            color: #190b79;
        }

        .MENU-LIST li a:hover::before {
            letter-spacing: 10px;
        }
        .MENU-LIST li:nth-child(1) a:hover::before {
            color: hsl(267, 60%, 76%, 1); 
        }
        .MENU-LIST li:nth-child(2) a:hover::before {
            color: hsl(174, 60%, 43%, 1);
        }
        .MENU-LIST li:nth-child(3) a:hover::before {
            color: hsl(305, 73%, 83%);
        }
        .MENU-LIST:hover li a:not(:hover) {
            opacity: 0.3; 
        }
        audio{
            position: fixed;
            z-index: 2;
        }
        p{
            font-family: "Caprasimo", serif;
            font-weight: 400;
            font-style: normal;
            color:#1c5166;
        }
        @media (min-width: 600px){
    .contenedor{
        grid-template: 
        "encabezado   encabezado" 80px
        "BarraNav     BarraNav"  60px
        "imagenes     pasatiempos" auto
        "pie          pie"       50px /
        300px     auto;
    }
}
    @media (max-width: 768px) {
      /* Estilos para pantallas con un ancho máximo de 768px (tabletas y móviles) */
      body {
        font-size: 14px;
      }
      .container {
        width: 95%;
      }
    }