/* Styles for all devices */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Styles for small devices */
@media (max-width: 720px) {
    table {
        border: none;
    }

    /* Display the whole table as a block */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide the table headers */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Add border to rows */
    tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    /* Style for odd rows in small devices */
    tr:nth-of-type(odd) {
        background: #eee;
    }

    /* Style for table cells */
    td {
        /* Behave like a row */
        border: none;
        border-bottom: 1px solid #ccc;
        position: relative;
        padding-left: 50%;
    }

    /* Now like a table header */
    td:before {
        /* Mimic padding */
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /* Label the data */
    td:nth-of-type(1):before { content: "Date"; }
    td:nth-of-type(2):before { content: "Paper Name"; }
    td:nth-of-type(3):before { content: "Marking Scheme"; }
    td:nth-of-type(4):before { content: "Attached Resources"; }
}

/* Styles for larger devices */
@media (min-width: 721px) {
    /* Apply background color for every second odd row */
    tr:nth-child(2n+1) {
        background-color: #eee;
    }

    thead tr {
    background-color: #3d447e; /* Dark blue */
    color: #00008b;
    font-size: 1.2em; /* Increase font size for headings */
    text-align: left; /* Align headings to the left */
    font-weight: bold; /* Make the headings bold */
    letter-spacing: 1px; /* Slightly increase spacing between letters */
}


    th {
        padding: 10px; /* Add padding to the header cells */
    }
}