:root {
  color-scheme: dark;
  --color-background: #1b1b1b;
  --color-primary: #c0bfaa;
  --color-secundary: #F9F6F3;
}

@font-face {
    font-family: 'MSGOTHIC';
    src: url('assets/fonts/MSGOTHIC.TTF');
}


body {
  font-family: 'MSGOTHIC', monospace;
  font-size: 15px;
  line-height: 1.2rem;
  margin: 0;
  color: var(--olive);
  background-color: var(--color-background);
  overflow:hidden;
}

* {
    box-sizing: border-box;
}

#container {
  width: 500px;
  margin: 3rem auto;
  position: relative;
  max-height: 400px;
  color: var(--color-primary);
}

#container a {
  color: var(--white);
}

#header {
  width: 100%;
  height: 200px;
  background-image: url(assets/images/headers/header.png);
  background-position-y:50%;
  background-position-x:center;
  background-size: 550px;
  border-top: 1px dotted var(--color-primary);border-right: 1px dotted var(--color-primary);
  border-left: 1px dotted var(--color-primary);
}

main {
  overflow-y:scroll;
  overflow-x:hidden;
  flex: 1;
  padding: 10px;
  align-content: center;
  order: 2;
  border: 1px dotted var(--color-primary);
  width: 500px;
  max-height: 600px;
}

main a::after {
  content: "↗";
}

.innercontainer {
  display: flex;
  background-color: transparent;
  max-height: 300px;
  max-width: 455px;
  gap: 10px;
  margin-bottom: 15px;
}

.box {
  font-size: 14px;
  padding: 10px;
  overflow-y: scroll;
  border: 1px dotted var(--color-primary);
  width: 450px;
  max-height: 200px;
}

footer {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--color-primary);
}

footer a {
  color: var(--color-primary);
}

/* TABLE */
table {
  padding: 5px;
  width: 455px;
  font-size: 14px;
  display: table;
  border-collapse: collapse;
  color: var(--color-primary);
}

table, td {
  padding: 5px;
  border: 1px dotted var(--color-primary);
}

#currently {
  text-align: left;
  border: 1px dotted var(--color-primary);
}

/* DROPDOWN MENU */
h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
  border-top: 1px dotted var(--color-primary);
  border-left: 1px dotted var(--color-primary);
  border-right: 1px dotted var(--color-primary);
  padding: 0;
  margin-left: 10px;
}

li a, .dropbtn {
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
}

li a {
  color: var(--black);
}

li a:hover, .dropdown:hover .dropbtn {
  font-style: italic;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-background);
  min-width: 100px;
  z-index: 1;
}

.dropdown-content a {
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  font-style: italic;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* ASCII ART */
pre {
  display: block;
  font-family: monospace;
  font-size: 12px;
  unicode-bidi: isolate;
  white-space: pre;
  margin-block: 1em 1em;
  margin-inline: 0px;
  text-align: center;
}