@font-face {
  font-family: "High Tower Text";
  src: url("../res/HighTower.TTF");
}
html, body {
  font-family: "High Tower Text", "Open Sans", serif;
  color: #ddd;
  text-align: center;
  margin: 0;
}

#bg {
  z-index: -10;
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
}
#bg img {
  width: auto;
  height: auto;
  overflow: hidden;
  filter: blur(0px) brightness(0.6);
}

header {
  max-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
header #polaroid {
  max-height: 300px;
  transform: rotate(-16deg);
  position: absolute;
  top: 0;
  left: 25%;
  z-index: 3;
}
header h1 {
  color: red;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  z-index: 4;
  font-size: 4rem;
}

main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}
main svg {
  margin: 0 20px;
  width: 80px;
  height: 80px;
  fill: #a49074;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
}

#mainBg {
  z-index: -1;
  position: absolute;
  left: 10%;
  top: 0;
  width: 80%;
  height: 100%;
  background-color: #fbf0e5;
}
#mainBg div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: rgba(30, 30, 30, 0.5) 3px 3px 5px;
}
#mainBg :first-child {
  transform: rotate(2deg) translateX(-25px);
  background-color: #f6e1c2;
}
#mainBg :nth-child(2) {
  transform: rotate(-1deg) translateX(25px);
  background-color: #d8c19c;
}
#mainBg :nth-child(3) {
  transform: rotate(-3deg) translateX(25px);
  background-color: #efd6b0;
}

#twitch-embed {
  position: relative;
  min-height: 280px;
  min-width: 40%;
  height: 80%;
  margin: 4% 1%;
  max-width: 800px;
  aspect-ratio: 16/9;
  background-color: #111;
  box-shadow: 3px 3px 10px #777, -3px 3px 10px #777;
}
#twitch-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#socials svg {
  width: 80px;
  height: 80px;
  margin: 0 20px;
  fill: white;
  filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.8));
}

.overlay p {
  margin: 5px;
}
.overlay {
  color: black;
  padding: 2% 3%;
  font-size: 1.3em;
  position: absolute;
  left: 10%;
  top: 13%;
  width: 80%;
  height: 70%;
  z-index: 5;
  box-shadow: rgba(30, 30, 30, 0.5) 10px 10px 10px;
}
.overlay .closeOverlay {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  padding: 5px;
}
.overlay ul {
  list-style-type: none;
}

#commands {
  transform: rotate(1.5deg);
  background-color: #af9f99;
}
#commands h3 {
  margin: 0 0 10px 0;
}

#about {
  transform: rotate(-2deg);
  background-color: #d2cecd;
}

.overlayHidden {
  display: none;
}

.bold {
  font-weight: 900;
}

.whatImDoing {
  margin: 0 auto;
}
.whatImDoing tr {
  height: 2em;
}
.whatImDoing tr :last-child {
  text-align: left;
}

.scrollable {
  height: 80%;
  overflow-y: scroll;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
  scrollbar-color: #544c49 #af9f99;
}

.commandsTable {
  margin: 0 auto 30px auto;
}
.commandsTable tr :first-child {
  text-align: right;
  font-family: monospace;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 2px;
  background-color: #252020;
  color: #f8e4de;
  margin-right: 10px;
  min-width: 10em;
}
.commandsTable tr :last-child {
  text-align: left;
  padding: 2px 2px 2px 1.5em;
}

.hoverClicky {
  cursor: pointer;
}

/*# sourceMappingURL=main.css.map */