#ex1 {
    /* spacing */
    font-family: "helvetica neue", helvetica, arial, sans-serif;

    table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
    }

    thead th:nth-child(1) {
        width: 30%;
    }

    thead th:nth-child(2) {
        width: 20%;
    }

    thead th:nth-child(3) {
        width: 15%;
    }

    thead th:nth-child(4) {
        width: 35%;
    }

    th,
    td {
        padding: 20px;
    }

    /* typography */
    thead th,
    tfoot th {
        font-family: "Rock Salt", cursive;
    }

    th {
        letter-spacing: 2px;
    }

    td {
        letter-spacing: 1px;
    }

    tbody td {
        text-align: center;
    }

    tfoot th {
        text-align: right;
    }

    /* graphics and colors */
    thead,
    tfoot {
        background: url(/images/css-mdn/css-styling-basics/leopardskin.jpg);
        color: white;
        text-shadow: 1px 1px 1px black;
    }

    thead th,
    tfoot th,
    tfoot td {
        background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
        border: 3px solid purple;
    }

    /* zebra striping */

    tbody tr:nth-child(odd) {
        background-color: #ff33cc;
    }

    tbody tr:nth-child(even) {
        background-color: #e495e4;
    }

    tbody tr {
        background-image: url(/images/css-mdn/css-styling-basics/noise.png);
    }

    table {
        background-color: #ff33cc;
    }

    /* caption */

    caption {
        font-family: "Rock Salt", cursive;
        padding: 20px;
        font-style: italic;
        caption-side: bottom;
        color: #666;
        text-align: right;
        letter-spacing: 1px;
    }
}