/* Styles.css */

/* Generic */
html {
	box-sizing: border-box;
    font-size: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
* {
    &,
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

/* Layout */
main {
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
}
ul li {
    margin-bottom: 0.5rem;
}

/* Tables */
table {
    width: 100%;
}
thead th {
    text-align: left;
}
th, td {
    padding: 5px 10px;
}

/* Typography */
body {
    font-size: 1.2rem;
    font-family: sans-serif;
}

/* Colours */
body {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
}
a, a:visited, a:hover, a:active {
    color: blue;
}
thead tr {
    background-color: #EEE;
}
@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(50,50,50);
        color: rgb(230,230,230);
    }
    .datatable-table thead tr,
    .datatable-table th button,
    .datatable-pagination-list button {
        background-color: rgb(25,25,25);
        color: rgb(230,230,230);
    }
    .datatable-pagination .datatable-active a,
    .datatable-pagination .datatable-active a:focus,
    .datatable-pagination .datatable-active a:hover,
    .datatable-pagination .datatable-active button,
    .datatable-pagination .datatable-active button:focus {
        background-color: rgb(50,50,50);
        color: rgb(230,230,230);
    }
    .datatable-pagination .datatable-active button:hover,
    .datatable-pagination a:hover,
    .datatable-pagination button:hover {
        background-color: rgb(50,50,50);
    }
    a, a:visited, a:hover, a:active {
        color: rgb(125,125,255);
    }
    thead tr {
        background-color: rgb(25,25,25);
    }
}

/* Trumps */
a.backlink {
    float: right;
}
textarea {
    width: 100%;
}