style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 10px;
    font-family: 'Roboto',sans-serif;
}
body {
    font-size: 1.6rem;
    line-height: 1.6;
    min-height: 100vh;
    background-image: radial-gradient(circle at top right, rgb(49, 157, 235) 0%, rgb(49, 157, 235) 13%,rgb(76, 166, 234) 13%, rgb(76, 166, 234) 23%,rgb(103, 176, 232) 23%, rgb(103, 176, 232) 33%,rgb(130, 185, 231) 33%, rgb(130, 185, 231) 46%,rgb(156, 194, 230) 46%, rgb(156, 194, 230) 48%,rgb(183, 203, 229) 48%, rgb(183, 203, 229) 63%,rgb(210, 213, 227) 63%, rgb(210, 213, 227) 83%,rgb(237, 222, 226) 83%, rgb(237, 222, 226) 100%);
}
header {
    width: 98%;
    max-width: 80rem;
    min-height: 15rem;
    padding: 1rem;
    margin: 1rem auto;
    margin-bottom: 5rem;
    text-align: center;
    font-size: 1.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2rem;
}
header > * {
    margin: 0.75rem 0;
}
header h1 {
    display: inline-block;
    line-height: 1.2;
    margin-bottom: 2rem;
    padding: 1rem 1rem 0 1rem;
}
header h1 span {
    background: #333;
    color: #ff0;
    padding: 1rem;
    padding-bottom: 0;
}
header a {
    text-decoration: none;
    margin: 0 0.5rem;
    color: #dc143c;
}
table.blueTable {
    background-color: #69d0b3;
    width: 98%;
    max-width: 60rem;
    min-height: 20rem;
    text-align: left;
    border-collapse: collapse;
    margin: 3rem auto;
}
table.blueTable td,
table.blueTable th {
    padding: 15px 5px;
}
table.blueTable tbody tr td:first-child {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
table.blueTable tbody td {
    font-size: 14px;
}
table.blueTable tr:nth-child(even) {
    background: #b2fcff;
}
table.blueTable thead {
    background: #e43f5a;
}
table.blueTable thead th {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: linear-gradient(145deg, #f44360, #cd3951);
    box-shadow: inset 12px 12px 24px #c2364d,
    inset -12px -12px 24px #ff4868;
}
table a {
    text-decoration: none;
    color: #333;
    margin-left: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px dotted #ff0;
    transition: all 0.2s ease;
    font-weight: 700;
}
table a:hover {
    color: #000;
}

th {
    cursor: pointer;
}