@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cause:wght@100..900&display=swap');

body {

    background-color: rgb(109, 78, 61);
    color: rgb(255, 255, 255);
    font-family: "Cause", cursive;

}


h1 {

    font-family: "Lavishly Yours", cursive;
    font-size: 60px;
    text-align: center;
    justify-content: center;
    font-weight: 400;

}


tr:nth-child(odd) {

    background-color: rgba(0, 0, 0, 0.473);


}

td {
    padding: 0.5em 0.4em;
}

th {
    text-align: left;
    border-bottom: 4px solid rgba(0, 0, 0, 1);
}

td, th {

    padding: 0.5em 0.4em;

}



table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    th,
    tr:first-child {
        display: none;
    }
    table, tbody, tr, td {
        display: block;
    }
    body {
        font-size: 110%;
    }
    td:first-child,
    td:nth-child(n+9) {
        font-weight: bold;
    }

    td {padding: 0;}
    tr {padding: 0.2em;
        position: relative;}
    td:last-child {
        position: absolute;
        top: 0.2rem;
        right: 0.2rem;
        font-size: 150%;
        opacity: 0.5;

    }
    td:nth-child(5),
    td:nth-child(6),
    td:nth-child(7),
    td:nth-child(8) {
        display: inline;
    }
    td:nth-child(3)::after {
        content: " v.";
    }
        td:nth-child(9)::before {
            content: "1) ";

        }

        td:nth-child(10)::before {
            content: "2) ";

        }

        td:nth-child(11)::before {
            content: "3) ";
        }
        
        td:nth-child(5)::after,
        td:nth-child(6)::after {
            content: ", ";
        }
    }