html {
    color-scheme: dark
}

:root {
    /* color palette */
    --velvet: #7d0a0a; 
    --background: rgb(14, 14, 14);
    --text: #e8e6e3;
    --link: #9c8401;
    --link-visited: var(--link); 
    --link-hover: var(--velvet); 
    --button-bg: var(--link);
    --button-hover: wheat;
    --button-active-bg: #7A6800;
    --button-active: #B8ABC4;
}

.new-rocker-regular {
    font-family: "New Rocker", system-ui;
    font-weight: 400;
    font-style: normal;
    text-shadow: 1px 1px 2px black;
  }

@font-face {
    font-family: 'yu-gothic-medium';
    src: url('YuGothic-Medium-01.woff') format('woff'), /* Modern Browsers */
         url('YuGothic-Medium-01.ttf')  format('truetype') /* Safari, Android, iOS */
}

.yu-gothic {
    font-family: 'yu-gothic-medium', "yu-gothic-pr6n", sans-serif;
    font-style: normal;
    font-weight: 400;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: #454a4d #202324;
}

a.home {
    text-decoration: none;
}

a.home:link {
    color: var(--text);
}

a.home:visited {
    color: var(--text)
}

a.home:active {
    color: var(--link-active)
}

a.home:hover {
    color: var(--button-hover)
}

a:link {
    color: var(--link);
}

a:visited {
    color: var(--link-visited)
}

a:active {
    color: var(--link-active)
}

a:hover {
    color: var(--link-hover)
}

.page {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background);
}

.section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background);
}

.menu {
    width: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    background-color: var(--velvet);
}

.links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    gap: 5px 15px;
    padding: 5px;
}

.button {
    padding: 1px 4px 1px 4px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: var(--background);
    background-color: var(--button-bg);
    text-decoration: none;
    box-shadow: 1px 1px 1px black;
}

a.button:link {
    color: var(--background);
}

a.button:visited {
    color: var(--background)
}

a.button:hover {
    color: var(--button-hover)
}

a.button:active {
    color: var(--button-active);
    background-color: var(--button-active-bg);
}

.search-area {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

#search {
    width: 200px;
    height: 30px;
    margin: 5px 5px;
}

.results {
    background-color: var(--background);
    align-items: flex-start;
    min-height: 600px;
    margin: 10px 10px;
    color: var(--text)
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 3px solid rgb(51, 55, 57);
}

th,
td {
  padding: 2px 4px;
}

th {
    text-align: left;
}