/*TODO also style svg icons accordingly */
:root{
    --bg:#faf0e673;
    --bg-acc:#EEEEEE;
    --bg-hover: #DDDDDD;
    --fg:#444;
    --fg-deemph: #777;
}
html{
    font-family: serif;
}
body{
    background-color: var(--bg);
    overflow-x: hidden;
    margin:.5em auto;
    max-width:min(100%,800px);
    line-height:1.4;
    font-size:18px;
    color:var(--fg);
    padding:0 .2em;
    text-align: center;
    justify-content: center;
}

h1,h2,h3{
    line-height:1.2;
    letter-spacing: -2%;
}
header{
    text-align: center;
    justify-content: center;
}
small{
    color: var(--fg-deemph);
}
.search-bar{
    width: 100%;
}
.search-container{
    text-align: center;
    justify-content: center;
    margin-bottom: 4%;
}
#searchInput {
    background-color: var(--bg);
    width: 100%;
    padding: .2em;
    font-size: larger;
    border-radius: 10px;
    border-color: var(--bg-acc);
    box-shadow: var(--bg-acc) 2px 2px;
}
.main-banner{
    text-align: center;
}
table, tr{
    /* make table not resize when elements are hidden by searching */
    width: 100%;
    word-break: break-all;
}
th{
    text-align: left;
}
tr:nth-child(even){
    background-color: var(--bg-acc);
}
tr:hover{
    background-color: var(--bg-hover);
    transition: all 2ms;
}
.inline-icon, .header-icon{
    vertical-align: middle;
    height: 1em;
}
.header-icon{
    padding: .5em;
    fill: var(--fg-deemph);
}
a:hover, a:any-link{
    text-decoration: none;
    color: inherit;
}
.table-link{
    display: block;
    width: 100%;
    min-height: 1em;
    height: 100%;
    padding: 1px;
}
.pagination a{
    padding-left: 2em;
}