html {
    scrollbar-color: white transparent;
    scrollbar-width: thin;
    overflow-y: scroll;
}

body {    
    font: 1rem/1.2 "ArcticonsSans", sans-serif;
    color: white;
    background: #141414;
    text-align: left;
    margin: auto 0.25rem;
    font-variant-ligatures: none;
}

header { max-width: 80ch; margin: auto }

#popup {
    visibility: hidden;
    position: fixed !important;
    bottom: 5%;
    left: 50%;
    padding: 1rem;
    border-radius: 1rem;
    background: lightcoral;
    color:black;
    transform: translate(-50%, 0%);
}

.invisible {
    display: none !important;
}

.button-on {
    background: lightcoral;
    color:  black;
}

a:link, a:visited { color: inherit }
a:hover, .icon-switcher:hover { color:lightcoral;}

#searchBar {
    font: inherit;
    border-width: 2px;
    border-style: solid;
    border-color: inherit;
    border-radius: 1rem;
    color: inherit;
    background: none;
    padding: 0.5rem 1rem;
    margin: 1rem;
    text-align: center;
}

#category-filters {
    overflow:scroll;
    flex-wrap:none;
    text-wrap:nowrap;
    scrollbar-color: var(--table-color) transparent;
    scrollbar-width: none;
    max-width: 80ch;
    scrollbar-color: white transparent;
    scrollbar-width:thin;
}

.light-mode {
    background:#f2f2f2;
    color: black;
    border-color: black;
}

.light-mode-button {
    color: lightcoral;
    background:none;
    font-family: monospace;
}

hr {
    background: lightcoral; height: 2px;
    border: none;
}

.iconList, .iconPanel {
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    flex-basis: stretch;
    padding: 1rem;
    margin:auto;
    gap: 1rem
}


.iconPanel:hover {
    filter: drop-shadow(0px 0px 4px lightcoral);
}

.iconImageDiv {
    display:flex;
    flex-direction: column;
    margin:auto;
    text-align: center;
}

.icon-switcher {
    font-size:75%;
    text-decoration: none;
}

.iconLink {
    font-size: 75%;
    text-decoration: underline;
    padding:0.2rem; 
}

button {
    font-family: inherit;
    background:grey;
    color: black;
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 1rem;
    border: 2px solid inherit;
}

@font-face {
    font-family: "ArcticonsSans";
    src: url(./ArcticonsSans-Regular.woff2);
}