body {
     margin: 0;
     font: 100% / 1.5 Raleway, sans-serif;
     color: hsl(230, 100%, 95%);
     background: linear-gradient(135deg, hsl(230, 40%, 12%), hsl(230, 20%, 7%));
     height: 100vh;
     display: flex;
     min-height: 100vh;
     /* display: grid; */
     place-items: center;
 }

 :root {
     --bg: #000000;
     --clr-1: #00c2ff;
     --clr-2: #33ff8c;
     --clr-3: #ffc640;
     --clr-4: #e54cff;

     --blur: 1rem;
     --fs: clamp(3rem, 8vw, 7rem);
     --ls: clamp(-1.75px, -0.25vw, -3.5px);
 }

 body {
     min-height: 100vh;
     display: grid;
     place-items: center;

 }

 *,
 *::before,
 *::after {
     font-family: inherit;
     box-sizing: border-box;
 }

 p {
     margin-left: 50px;
     margin-right: 50px;
 }

 .content {
     text-align: center;
 }

 .titulo {
     font-family: "Inter", "DM Sans", Arial, sans-serif;
     font-size: 40pt;
     font-weight: 800;
     letter-spacing: var(--ls);
     position: relative;
     overflow: hidden;
     background: #00000000;
     margin: 0;
 }



 .intro2 {
     position: absolute;
     top: 0;
     left: 0;
     min-width: 100vh;
     min-height: 100vh;
     z-index: 2;
     mix-blend-mode: darken;
     pointer-events: none;
 }

 .intro2obj {
     overflow: hidden;
     position: absolute;
     width: 60vw;
     height: 60vw;
     background-color: var(--clr-1);
     border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
     filter: blur(var(--blur));
     mix-blend-mode: overlay;
 }

 .intro2obj:nth-of-type(1) {
     top: -50%;
     animation: aurora-border 6s ease-in-out infinite,
         aurora-1 12s ease-in-out infinite alternate;
 }

 .intro2obj:nth-of-type(2) {
     background-color: var(--clr-3);
     right: 0;
     top: 0;
     animation: aurora-border 6s ease-in-out infinite,
         aurora-2 12s ease-in-out infinite alternate;
 }

 .intro2obj:nth-of-type(3) {
     background-color: var(--clr-2);
     left: 0;
     bottom: 0;
     animation: aurora-border 6s ease-in-out infinite,
         aurora-3 8s ease-in-out infinite alternate;
 }

 .intro2obj:nth-of-type(4) {
     background-color: var(--clr-4);
     right: 0;
     bottom: -50%;
     animation: aurora-border 6s ease-in-out infinite,
         aurora-4 24s ease-in-out infinite alternate;
 }

 @keyframes aurora-1 {
     0% {
         top: 0;
         right: 0;
     }

     50% {
         top: 100%;
         right: 75%;
     }

     75% {
         top: 100%;
         right: 25%;
     }

     100% {
         top: 0;
         right: 0;
     }
 }

 @keyframes aurora-2 {
     0% {
         top: -50%;
         left: 0%;
     }

     60% {
         top: 100%;
         left: 75%;
     }

     85% {
         top: 100%;
         left: 25%;
     }

     100% {
         top: -50%;
         left: 0%;
     }
 }

 @keyframes aurora-3 {
     0% {
         bottom: 0;
         left: 0;
     }

     40% {
         bottom: 100%;
         left: 75%;
     }

     65% {
         bottom: 40%;
         left: 50%;
     }

     100% {
         bottom: 0;
         left: 0;
     }
 }

 @keyframes aurora-4 {
     0% {
         bottom: -50%;
         right: 0;
     }

     50% {
         bottom: 0%;
         right: 40%;
     }

     90% {
         bottom: 50%;
         right: 25%;
     }

     100% {
         bottom: -50%;
         right: 0;
     }
 }

 @keyframes aurora-border {
     0% {
         border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
     }

     25% {
         border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
     }

     50% {
         border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
     }

     75% {
         border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
     }

     100% {
         border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
     }
 }

 @keyframes lights {
     0% {
         color: hsl(230, 40%, 80%);
         text-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.2),
             0 0 0.125em hsla(320, 100%, 60%, 0.3),
             -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
             1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
     }

     30% {
         color: hsl(230, 80%, 90%);
         text-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.5),
             0 0 0.125em hsla(320, 100%, 60%, 0.5),
             -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
             0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
     }

     40% {
         color: hsl(230, 100%, 95%);
         text-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.5),
             0 0 0.125em hsla(320, 100%, 90%, 0.5),
             -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
             0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
     }

     70% {
         color: hsl(230, 80%, 90%);
         text-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.5),
             0 0 0.125em hsla(320, 100%, 60%, 0.5),
             0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
             -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
     }

     100% {
         color: hsl(230, 40%, 80%);
         text-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.2),
             0 0 0.125em hsla(320, 100%, 60%, 0.3),
             1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
             -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
     }

 }



 p {
     margin: auto;
     font-size: 20pt;
     font-weight: 300;
     animation: lights 5s 750ms linear infinite;
 }


 .menucont {
     display: flex;
     justify-content: space-evenly;

 }

 .menu1 {
     margin: 30px;
     width: 250px;
     height: 210px;
     background-image: url(https://pedro.desarrollowebalcala.es/img/index/mini1.webp);
     background-size: cover;
     background-position: top;
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     transition: transform 0.3s ease;
 }

 .menu2 {
     margin: 30px;
     width: 250px;
     height: 210px;
     background-image: url(https://pedro.desarrollowebalcala.es/img/index/mini2.webp);
     background-size: cover;
     background-position: center;
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     transition: transform 0.3s ease;
 }

 .menu3 {
     margin: 30px;
     width: 250px;
     height: 210px;
     background-image: url(https://pedro.desarrollowebalcala.es/img/index/mini3.webp);
     background-size: cover;
     background-position: top;
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     transition: transform 0.5s ease;
 }

 .menu4 {
     margin: 30px;
     width: 250px;
     height: 210px;
     background-image: url(https://pedro.desarrollowebalcala.es/img/index/mini4.jpg);
     background-size: cover;
     background-position: top;
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     transition: transform 0.3s ease;
 }

 .menu1:hover {
     transform: scale(1.3)
 }

 .menu2:hover {
     transform: scale(1.3)
 }

 .menu3:hover {
     transform: scale(1.3)
 }

 .menu4:hover {
     transform: scale(1.3)
 }