body {
  background-color: #1a0000;
  color: #00ff33;
  font-family: code;
}

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

@font-face {
    font-family: code;
    src: url(./assets/fonts/codeBold.ttf);
}

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

#date {
  list-style-type: none;
  color: black
}

#bladeRunner {
    font-family: 'Pirata One', cursive;
    text-align: center;
    font-size: 35px;
    text-decoration: none;
    list-style: none;
    text-shadow: 1px 1px black;
}

.nav {
  /*height: 175px;*/
  overflow: auto;
  max-width: 600px;
  margin: auto;
}

.nav > li {
  border: 1px solid slategrey;
  border-radius: 3px;
  margin: 1px;
}

.nav > li > a {
  color: black;
  background-color: slategrey;
}

.nav > li > a:hover {
  background-color: pink;
  color: #4caf51;
}

.flexy {
  display: flex;
}

.flexy ul {
  color: black;
}

.todo {
  font-size: 13px;
  margin-bottom: 15px;
}

.phpinfo span {
  color: red;
}

.phpinfo p {
  margin-bottom: 0px;
}

.wrapper {
  display: grid;
  grid-template-areas:
    'cube chat'
    'cube chat';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 20em 40em;
  grid-gap: 1em;
  margin: 1em;
}

.quote {
  grid-area: quote;
  background-color: black;
}

.chat {
  grid-area: chat;
  display: grid;
  grid-template-areas:
    'sent'
    'textbox';
  grid-template-rows: 9fr 1fr;
}

.chat-sent {
  display: grid;
  grid-area: sent;
  grid-auto-rows: min-content;
}

.chat-textbox {
  grid-area: textbox;
  display: grid;
  grid-gap: 1em;
  grid-template-areas: 'textarea send';
  grid-template-columns: 1fr 6em;
}

.chat-textarea {
  grid-area: textarea;
  background-color: transparent;
  color: #ff4d4d;
  resize: none;
  width: 100%;
  height: 100%;
}

.btn {
  background-color: transparent;
}

.chat-send-btn {
  grid-area: send;
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.message {
  width: 100%;
  grid-gap: 1em;
  clear: both;
  padding-bottom: 1em;
  font-family: code;
}

.message-outgoing {
  display: grid;
  grid-template-areas:
    'message-avatar message-text';
  grid-template-columns: 4em 1fr;
}

.message-incoming {
  display: grid;
  grid-template-areas:
    'message-text message-avatar';
  grid-template-columns: 1fr 4em;
}

.message-avatar {
  border-radius: 1%;
  height: 4em;
  width: 4em;
  text-align: center;
}

.cube {
  grid-area: cube;
  background-color: #894052;
   /*setting alpha = 0.1*/
  background: rgba(0, 151, 19, 0.3);
}

.ui-box {
  border: solid 1px #33ff33;
  /* animation: boxShadow 6.6s infinite; */
  padding: 1em;
}

/*Filter styles
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

*/