div.grid-container {
    display: grid;
    grid-template-columns: auto max-content max-content;
}
div.grid-item {
    padding: 0.2em;
    border: 2px black solid;
}

div.grid-header:first-child {
    border-radius: 0.5em 0 0 0;
}

div.grid-header:nth-child(3) {
    border-radius: 0 0.5em 0 0;
}

div.grid-header {
    text-align: center;
    background: lightyellow;
    padding: 0.4em;
    border: 2px black solid;
}

a.grid-item {
    text-decoration: none;
    display: contents;
    height: 100%;
    color: black;
}

div.clickable:hover {
    background: lightgrey;
}

div.pageselect {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    margin: 1em auto;
}

div.align-right {
    display: inline-flex;
    justify-content: end;
}

div.align-left {
    display: inline-flex;
    justify-content: left;
}

div.pageitem {
    display: inline-block;
    font-weight: 700;
    text-align: center;
    height: 2em;
    width: 1.5em;
}


.pagebutton {
    background: lightgrey;
    font-weight: 600;
    justify-self: auto;
    border: none;
    margin: 0 0.2em;
    height: 2em;
    width: 1.5em;
}

input.pagebutton:hover {
    background: grey;
    border: none;
}