/* Fonts */
@font-face {
  font-family: headings-font;
  src: url(fonts/alagard.ttf)
}

@font-face {
  font-family: DaPixel;
  src: url(fonts/DePixelKlein.ttf)
}

body {
  background-image: url('resources/background_skulls.png');
}

.header {
  text-align: center;
  background-color: aqua;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.footer {
  text-align: center;
}

/* Elements */

h1 {
  font-family: headings-font;
  font-size: 250%;
}

h2 {
  font-family: headings-font;
  font-size: 145%;
}

/* Layout */

.content-container {
  display: grid;
  grid-template-areas:
    "aside--left main aside--right";
  grid-template-columns: 1fr 3fr 1fr;
  gap: 0px;
  padding: 5px;
  background-color: rgb(26, 9, 13);
  max-width: 1600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.content-container div.aside--left {
  background-color: rgb(74, 49, 77);
  grid-area: aside--left;
  text-align: left;
  padding: 5px;
}

.content-container div.main {
  background-color: rgb(107, 101, 112);
  grid-area: main;
  text-align: left;
  padding: 10px;
}

.content-container div.aside--right {
  background-color: rgb(74, 49, 77);
  grid-area: aside--right;
  text-align: right;
  padding: 5px;
}

div.main-entry {
  background-color: rgb(168, 186, 154);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 5px;
  border-style: inset;
  border-color: rgb(74, 49, 77);
  border-width: 8px;
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 5px;
}

div.main-entry:hover {
  background-color: rgb(150, 227, 120);
  color: black;
}

.aside-entry {
  background-color: rgb(168, 186, 154);
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
  border-style: inset inset inset inset;
  border-top-color: rgb(172, 232, 148);
  margin-bottom: 0px;
  margin-top: 0px;
}

.aside-entry:hover {
  background-color: rgb(150, 227, 120);
  scrollbar-color: black rgb(150, 227, 120);
}

.aside-entry-title {
  background-color: rgb(26, 9, 13);
  padding: 10px;
  margin-bottom: 0px;
  margin-top: 0px;
  color: white;
  border-style: ridge;
  border-width: 5px;
  border-color: rgb(26, 9, 13);
}

.border-test {
  border-style: none ridge ridge ridge;
  border-width: 5px;
  border-color: rgb(26, 9, 13);
  margin-bottom: 10px;
}

/* Paragraph */
p {
  font-family: DaPixel;
  font-size: 90%;
}

.navigation {
  font-family: DaPixel;
  font-size: 100%;
}

/* LINKS */

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: rgb(172, 232, 148);
  background-color: transparent;
  text-decoration: underline;
}

ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 10px;
}

.aside .aside-divider {
  padding-bottom: 5px;
  width: 100%;
  height: auto;
}

/* change log */

.change-log {
  height: 120px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: black rgb(168, 186, 154);
  scrollbar-width: thin;
}

.change-log-entry {
  border-style: none none dashed none;
  border-width: 2px;
}

.change-log-entry h3 {
  font-size: 14px;
}

.change-log-entry p {
  font-size: 12px;
}

/* COOL BUTTONS */

.buttonns {
  text-align: center;
  padding: 5px;
  border-style: dashed;
  margin-bottom: 5px;
}

.buttonns img {
  padding: 5px;
  padding-bottom: 2px;
}