:root {
    scroll-behavior: smooth;
}
html {
    background: #191919;
    color: #9b9b9b;
}
body {
    font-family: sans-serif;
    font-size: 1em;
    margin: 0;
}
a {
    text-decoration: none;
    color: #80a0ff;
}
a:hover {
    color: #22cb84;
}
#main {
    max-width: 60em;
    margin: 0 auto;
}
#main #siteTitle {
    text-shadow: 0 0 0.3em #FFF;
    color: #000;
    text-align: center;
}
#main #pgNav
{
    color: #a7772b;
    text-align: center;
    margin: 1.5em 0;
}
#intro {
    font-size: 150%;
}
#main #catNav {
    line-height: 3.6em;
    margin: 0 0 3em;
    font-weight: bold;
    text-align: center;
}
#main #catNav a {
    color: #9b9b9b;
    background: #141414;
    padding: 0.3em 0.8em;
    border-radius: 1.3em;
    white-space: nowrap;
    border: 0.2em solid #a7772b;
    box-shadow: 0 0 0.4em #b7b7b7;
    margin: 0 0.4em;
}
.cat {
    color: #1b1b1b;
    background: #a7772b;
    border: 0.4em solid #2f2f2f;
    border-radius: 0.1em;
    text-align: center;
    padding: 0.2em;
    font-size: 2.4em;
    text-shadow: 0 0 0.5em #4d4d4d;
}
#gridWrap {
    max-width: 92%;
    margin: 0 auto;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21em, 1fr));
    grid-gap: 18px;
}
.gridItem {
    height: 12em;
    overflow: hidden;
    position: relative;
    background: #232323;
    border: 2px solid #2f2f2f;
    border-radius: 0.1em;
    padding: 0 1em;
    cursor: pointer;
    transition: transform .2s ease-out;
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0.07) 100%);
}
.gridItem:focus {
    background: #2b2b2b;
    border: 2px solid #3b3b3b;
    cursor: revert;
    overflow-y: scroll;
    transform: scale(1.05);
    mask-image: none;
    z-index: 99;
}
.gridItem:focus p {
    color: #c0c0c0;
}
.gridItem h3 {
    text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000;
    color: #bc852e;
}
.gridItem ul {
    list-style: none;
    padding-left: 0;
}
.gridItem li
{
    padding-bottom: 0.6em;
}
#footer {
    background: #0a0a0a;
    margin: 3em 0 0;
}
#footerContent {
    max-width: 60em;
    margin: 0 auto;
    padding: 1em;
    text-align: center;
}
#topBtn {
    position: fixed;
    bottom: 10px;
    right: 22px;
    text-align: center;
    color: #6adf35;
    padding: 5px;
}
#topBtn:hover {
    background: #6adf35;
    border-radius: 0.6em;
    color: black;
}
#logoblock {
    background: repeating-linear-gradient(-0.1turn, #989898, #989898 10px, #6e6e6e 10px, #6e6e6e 40px) repeat scroll 0% 0%;
    width: max-content;
    padding: 1em;
}