:root {
  --button-size: 20px;
  --background: #848484;
  --foreground: #121212;
  --fore-text: #aaa;
  --back-text: #eee;
  
}

@font-face{
  font-family: "debase";
  src: url(/fonts/debase.ttf)format(truetype);
}
@font-face{
  font-family: "minecraft";
  src: url("/fonts/minecraft.otf")format(opentype);
}

.admin-only {
  display: none;
}

.ae-background {
  background-image: url(/img/ae_background.jpg);
  color: red;
}

body {
  margin: 0;
  background-color: var(--background);
  background-image: url(/img/background.jpg);
  font-size: 125%;
  font-family: "debase" ;
  display: grid;
  grid-template-areas: 
  "nav nav nav nav nav"
  "header header header header header"
  ". main main main add"
  "footer footer footer footer footer"
  ;
  grid-template-columns: 20% 20% 20% 20% 20%;
}

nav {
  background-color: var(--foreground);
  display: flex;
  justify-content: space-evenly;
  grid-area: nav;
}

a {
  color: var(--back-text);
  text-decoration: none;
  text-align: center;
  font-family: "minecraft";
}

a:hover {
  color: var(--fore-text);
  text-decoration: underline;
}

menu {
  padding: 0;
  margin: 0;
  background-color: var(--foreground);
  max-width: 20vw;
  color: var(--fore-text);
  list-style: none;
  grid-area: menu;
}

menu li {
  padding: 5px; 
}

menu a {
  color: var(--fore-text);
}

header {
  background-color: var(--foreground);
  color: var(--fore-text);
  text-align: center;
  grid-area: header;
}

header h1 {
  margin: 0;
}

main p {
  margin: 0;
}

main {
  background-color: var(--foreground);
  color: var(--fore-text);
  min-height: 50vh;
  grid-area: main;
  padding: 10px;
}


footer {
  background-color: var(--foreground);
  color: var(--back-text);
  grid-area: footer;
}

footer p {
  margin: 0;
}

.menu-button {
  height: var(--button-size);
  width: var(--button-size);
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

.filled {
  background-color: var(--background);
}

.menu-button div {
  display: flex;
  flex-direction: column;
  height: 20%;
}

.left-align {
  text-align: left;
}
.right-align {
  text-align: right;
}
.center-align {
  text-align: center;
}
.download {
  color: var(--fore-text);
}

.space-between {
  display: flex;
  justify-content: space-between;
}
.indented {
  margin-left: 10px;
}
.margin-top {
  padding-top: 10px;
}
.margin-bottom {
  padding-bottom: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 33%);
}
.cards a:hover {
  text-decoration: none;
}
.card {
  border: 5px solid var(--foreground);
  border-radius: 50px;
  margin: 5px;
  width: 50%;
  color: var(--fore-text);
  text-decoration: none;
  width: auto;
}

.card p {
  margin-bottom: 25px;
}

.card h2 {
  margin: 5px 0 5px;
}
.card h3 {
  margin: 5px 0 5px;
}

.card h4 {
  margin: 5px 0 0;
}

.divider {
  border: 2.5px solid #000;
  border-radius: 15px;
  margin: 20px 0;
}

.previousely {
  margin-bottom: 20px;
}
.begining-note {
  margin-bottom: 20px;
}
.ending-note {
  margin-bottom: 20px;
}
summary { 
  margin-bottom: 20px;
}
article {
  margin-bottom: 20px;
  padding: 0 20px;
}
article p {
  margin-bottom: 5px;
}

.buttons :nth-child(-n + 100){
  width: 100px;
  border: 3px solid var(--foreground);
  border-radius: 15px;
  font-size: .8em;
  justify-self: center;
}
.buttons {
  display: grid;
  margin: 10px 0;
  grid-template-areas:
    "previouse previouse comments comments home home move-button move-button next next"
    ". . . . chapters chapters . . . ."
  ;
  grid-template-columns: repeat(10, 1fr);
}

.previouse {
  grid-area:previouse;
}
.commnets {
  grid-area:comments;
}
.home {
  grid-area:home;
}
.chapters {
  grid-area:chapters;
}
.move-button {
  grid-area:move-button;
}
.next {
  grid-area:next;
}

#web {
  width: 100px;
  height: 100px;
}

article p {
  margin-bottom: 25px;
}

.hidden {
  display: none;
}


/* for the comments on debase */
.extra {
  font-size: xx-small;
}

.extra .q-mark{
  border: 1px solid black;
  border-radius: 100%;
  background-color: white;
  padding: 2px;
}

.extra .msg{
  font-size: medium;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  width: 100px;
}