:root {
  --background: #222222;
  --border: #bbbbbb;
  --shadow: #4a4655;
  --front: #736e80;
  --side: #9b98a4;
  --top: #a5a5a5;
  --console: #222222;
  --console-text: #
}

html,
body {
  border: 0;
  margin: 0;
  padding: 0;
  background-color: var(--background);
  overscroll-behavior: none;
}
html {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: fixed;
}

#container {
  display: flex;
  width: 100%;
  position: absolute;
  height: 100vh;
  top: 0;
  padding-top: 16em;
  margin-right: -9.6em;
  overflow-x: hidden;
  overflow-y: scroll;
  justify-content: end;
  align-items: self-start;
  min-height: 50em;
  box-sizing: border-box;
}

#container a {
  color: #000000;
  text-decoration: none;
}

.casetop {
  position: absolute;
  top: -8em;
  left: 0.1em;
  width: 12em;
  height: 6em;
  padding: 1em;
  background-color: var(--top);
  z-index: 1000;
  transform-origin: bottom;
  transform: skewX(45deg);
  border: 0.1em solid var(--border);
}

/* seitenteil
.casetop::before {
  content: " ";
  position: absolute;
  top: 8em;
  left: 3em;
  width: 9em;
  height: 200%;
  padding: 1em;
  background-color: #e6c59c;
  z-index: 10;
  transform-origin: top;
  transform: skewX(-45deg);
  border: 1px solid var(--border);
} */

#drawer {
  position: absolute;
  right: -10em;
  transform: skewY(-15deg);
}

#drawer::before {
  content: " ";
  width: 12em;
  background-color: var(--side);
  z-index: 10;
}

#drawer li {
  position: relative;
  list-style: none;
  width: 12em;
  background-color: var(--side);
  padding: 1em;
  z-index: var(--i);
  transition: all 0.6s ease-in;
  border: 0.1em solid var(--border);
  cursor: pointer;
}

/*#drawer li:hover{
  transform: translateX(-120px);
}*/

#drawer li::before {
  content: " ";
  position: absolute;
  top: 0;
  left: -8em;
  width: 7.75em;
  height: 100%;
  background-color: var(--front);
  transform-origin: right;
  transform: skewY(45deg);
  z-index: calc(var(--i) + 1);
  border: 0.1em solid var(--border);
}

#drawer li::after {
  content: "";
  position: absolute;
  top: -8em;
  left: -8em;
  width: 14em;
  height: 100%;
  background-color: var(--shadow);
  z-index: calc(var(--i) - 1);
  border: 0.1em solid var(--border);
}

.content {
  content: "";
  position: absolute;
  top: -4.75em;
  left: -3.25em;
  width: 100%;
  height: 4.6em;
  background-color: hsl(240, 0%, 0%);
  transform-origin: bottom;
  transform: skewX(45deg);
  z-index: -1;
  border: 0.1em solid var(--border);
  transition: all 0.6s ease-out;
}

.open .content {
  background-color: hsl(0, 100%, 50%);
}

.open {
  transform: translateX(-10em);
}

#about,
#controls,
#console {
  font: 0.9em sans-serif;
  line-height: 120%;
  padding: 1em;
  width: 92%;
  z-index: -100;
  color: white;
  transform-origin: top;
  transform: skewY(-15deg);
}

about,
controls {
  z-index: 100;
}

p {
  line-height: 140%;
}

h1 {
  font-size: 5em;
  line-height: 100%;
  margin-bottom: 0.3em;
  margin-left: 0.1em !important;
}

#console {
  position: absolute;
  bottom: -10em;
  background-color: var(--console);
  color: lime;
  /*border: 1px lime solid;*/
  padding: 2em;
  margin: 1em 0;
  height: 20em;
  overflow-y: scroll;
  overflow-x: hide;
}

#about, p, h1 {
  margin-left: 1rem;
}
#about img {
  width: 30%;
  max-width: 160px;
  height: auto;
}
#controls {
  position: relative;
  top: 2em;
  max-width: 50%;
  z-index: 0;
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding-left: 2em;
}

.hidden {
  display: none;
}

#console p {
  font: 0.84em monospace;
  line-height: 120%;
}

input {
  width: auto;
  font: 1em monospace;
  color: black;
  background-color: #eeeeee;
  padding: 0.6em 1em 0.6em 1em;
  margin-top: 1em; margin-right: 1em;
}

button {
  width: auto;
  padding: 0.6em 1em 0.6em 1em;
  margin-top: 1em; margin-right: 1em;
  font: 1em sans-serif;
  color: white;
  border: solid white 0.1em;
  background-color: var(--background);
  border-radius: 1em;
  cursor: pointer;
}

button:hover,
button:active {
  transition: 0.4s;
  border: solid lime 0.1em;
  background-color: #333333;
}

/* FONT */

.titillium-web-regular,
p, li {
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.titillium-web-regular-italic,
em, i {
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.titillium-web-bold,
b,
h1, h2, h3, h4, h5 {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.titillium-web-bold-italic,
b em, em b, strong em, em strong {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-style: italic;
}