body {
        background-image: url('background.jpg');
        font-family: 'Comic Sans MS', cursive, sans-serif;
        margin: 0;
        padding: 0;
    }

    /* Page layout */
    
    .layout h1{
      text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px  1px 0 black, 1px  1px 0 black;
      color: pink;
    }
    
    .layout {
        background-image: url('mainbg.png');
        background-size: 100vw 100vw;  
        top: 0;
        color: purple; font-weight: bold; 
    }
    .layout2{
      align-items:center;
      width: 75vw;
      display: grid;
        grid-template-areas:
            "cute books meals cute2"
            "art quote life climb"
            ". run notes .";
        gap: 20px;
        padding-left: 200px;
    }

    .card {
        background-color: white;
        border: 6px dashed pink;
        border-radius: 15px;
        padding: 10px;
        width: 250px;
        text-align: center;
        transition: transform 0.3s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }

    .card img {
        width: 100%;
        border-radius: 10px;
    }

    /* Hover zoom */
    .card:hover {
        transform: scale(1.15);
    }
    .cute { grid-area: cute; transform: rotate(179deg); background-color: transparent; border: none; box-shadow: none;}
    .cute2 { grid-area: cute2; transform: rotate(32deg); background-color: transparent; border: none; box-shadow: none;}
    .quote {
      display: grid;
      place-items: center;
      background-image: url('background.jpg');
      grid-area: quote;
      width: 250px;
      height:250px;
      border: 6px dashed purple;
    }
    .life {
      display: grid;
      place-items: center;
      border: 6px dashed purple;
      background-image: url('background.jpg');
      grid-area: life;
      width: 250px;
      height:250px;
    }
    /* Different section styles */
    .run { grid-area: run; transform: rotate(-8deg);}
    .books { grid-area: books; transform: rotate(-8deg);}
    .climb { grid-area: climb; transform: rotate(8deg);}
    .meals { grid-area: meals; transform: rotate(8deg);}
    .art { grid-area: art; transform: rotate(-8deg);}
    .notes { grid-area: notes;  transform: rotate(8deg);}