html {
        min-height: 100vh;
        text-align: center;

      }
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      .layout{
        max-width:1000px;
        margin:auto;
        padding:0 20px;
      }
      h1 {
        font-family: sans-serif;
        color: darkslateblue;
      }
      .rounded {
        background-color: #ffffff;
        color: black;
        border: 2px solid darkslateblue;
        border-radius: 30px;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,1);
        margin: 15px 0;
      }
      .minicard {
        background-color: rgba(0.7,0.7,0.7,0.7);
        color: white;
        border: 2px solid darkslateblue;
        border-radius: 30px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,1);
        margin: 10px 0;
      }
      a {
        text-decoration: none;
      }
      @media (min-width: 30em) {
        .row {
           display: grid;
           /* Crea columnas automáticas adaptables para tus minicards */
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 20px;
        } }
      .betterpadding {
        padding: 12px 24px; /* 12px arriba/abajo, 24px a los lados */
      }
      .horizontal-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas perfectas */
        gap: 15px;
      }
      nav{
    position:relative;
    background:linear-gradient(to bottom,#7a00ff,#5200d9);
    color:white;
    text-align:center;
    padding:18px 0 40px;
}

nav h1{
    font-size:24px;
}

nav svg{
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:45px;
}