@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Fira+Code:wght@300..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
}

body {
  height: 100vh;
  /*
  &.default {
      #app {
          @extend .container;
          height: 100%;
          max-width: 600px;
          padding: 10px;
          width: 100%;

          #content {
              @extend .no-select;
              width: 100%;
              section {
                  a#create {
                      @include flex(row, center, center);
                      background: $color-black;
                      color: $color-white;
                      cursor: pointer;
                      font-weight: bold;
                      height: 25px;
                      width: 25px;
                      text-decoration: none;
                      // &:hover { background: $color-active }
                  }; 
                  form#add {
                      @include flex(column, flex-start, flex-start);
                      width: 100%;

                      button {
                          @include flex(row, center, center);
                          align-self: flex-end;
                          background: $color-active;
                          border: 0;
                          color: $color-white;
                          cursor: pointer;
                          font-size: 18px;
                          min-width: 80px;
                          padding: 5px 10px;
                          text-decoration: none;
                      }
                      #feedback {
                          @include flex(column, flex-start, flex-start);
                          font-size: 18px;
                          width: 100%;
                          p.error {
                              @include flex(row, center, flex-start);
                              background: red;
                              color: $color-white;
                              margin-bottom: 5px;
                              padding: 5px;
                              width: 100%;
                              &:last-of-type { margin-bottom: 10px; }
                          }
                          p.success {
                              @include flex(row, center, flex-start);
                              background: $color-active;
                              color: $color-white;
                              margin-bottom: 5px;
                              padding: 5px;
                              width: 100%;
                          }
                      }
                      input, textarea {
                          border: 1px solid $color-gray;
                          font-size: 18px;
                          margin-bottom: 10px;
                          outline: 0;
                          padding: 3px 5px;
                          resize: none;
                          width: 100%;
                          &.error { border-color: red; }
                          &.success { border-color: $color-active; }
                      }
                      label { font-size: 18px; }
                      #preview {
                          @extend .no-select;
                          @include flex(column, flex-start, flex-start);
                          margin-bottom: 10px;
                          width: 100%;
                          .post {
                              @include flex(column, flex-start, flex-start);
                              border: 1px solid $color-black;
                              color: $color-black;
                              font-size: 18px;
                              padding: 5px 10px;
                              width: 100%;
                              .details {
                                  // font-family: $font-archivo;
                                  display: none;
                                  width: 100%;
                                  .content {
                                      width: 100%;
                                      code {
                                          font-family: $font-code;
                                          font-size: 14px;
                                          padding: 2px 5px;
                                      }
                                      p code { background: rgba(50, 168, 82, 0.25); border-radius: 5px; }
                                      pre {
                                          background: rgba(50, 168, 82, 0.25);
                                          margin: 10px 0;
                                          padding: 5px;
                                          width: 100%;
                                          code { font-family: $font-code; font-size: 16px; }
                                      }
                                      img {
                                          border: 1px solid $color-black;
                                          display: block;
                                          height: 150px;
                                          margin: 5px 0;
                                          object-fit: cover;
                                          object-position: 65% 50%;
                                          width: 150px;
                                      }
                                  }
                                  h1 { margin: 0 0 5px 0; }
                                  hr { margin: 1.5em 0; }
                              };
                              .heading {
                                  @include flex(row, center, space-between);
                                  width: 100%;
                                  a {
                                      @include flex(row, center, center);
                                      color: inherit;
                                      font-size: inherit;
                                      text-decoration: none;
                                  }
                              };
                          };
                      };
                      textarea { min-height: 100px; };
                  }; 
                  #fourOHfour {
                      @include flex(column, center, center);
                      width: 100%;
                      h1 {
                          font-size: 48px;
                          margin: 0;
                          padding: 0;
                      }
                      p { margin: 0; padding: 0; }
                      #photo {
                          background: url($photo-shocked);
                          background-position: 60% 5%;
                          background-repeat: no-repeat;
                          background-size: 250%;
                          height: 125px;
                          margin: 0;
                          width: 125px;
                      }
                  };
                  h1 { font-family: $font-mono; margin-bottom: 10px; };
                  ul#categories {
                      @extend .no-select;
                      @include flex(row, center, flex-start);
                      flex-wrap: wrap;
                      // font-family: $font-archivo;
                      // font-family: $font-mono;
                      list-style-type: none;
                      margin-bottom: 10px;
                      width: 100%;
                      a {
                          @include flex(row, center, center);
                          background: $color-black;
                          color: $color-white;
                          font-weight: bold;
                          min-width: 80px;
                          margin: 0 5px 5px 0;
                          padding: 5px 10px;
                          text-decoration: none;
                          text-transform: uppercase;
                          &:hover { color: $color-active; }
                      }
                  };
                  ul#heading {
                      list-style-type: none;
                      li {
                          margin-bottom: 5px;
                          a, span:not(#age) {
                              border-bottom: 1px solid $color-active;
                              color: inherit;
                              cursor: pointer;
                              font-weight: bold;
                              text-decoration: none;
                              &:hover { color: $color-active; }
                          };
                      };
                  };
                  ul#posts {
                      @include flex(column, flex-start, flex-start);
                      margin: 10px 0;
                      width: 100%;
                      .post {
                          @include flex(row, center, flex-start);
                          color: $color-gray;
                          font-size: 18px;
                          width: 100%;
                          &:not(:last-of-type) { margin-bottom: 10px; }
                          .categories {
                              @include flex(row, center, flex-start);
                              margin-right: 10px;
                              .category {
                                  @include flex(row, center, center);
                                  border: 1px solid $color-offset;
                                  color: inherit;
                                  cursor: pointer;
                                  font-family: $font-mono;
                                  font-size: 16px;
                                  padding: 2px 5px;
                                  text-decoration: none;
                                  &:hover { color: $color-active; }
                                  &:not(:last-of-type) { margin-right: 5px; }
                              }
                          }
                          .date {
                              color: inherit;
                              position: absolute;
                              right: 0;
                              text-decoration: none;
                          }
                          span { @include flex(row, center, flex-start); margin-right: 5px; }
                          .title {
                              color: inherit;
                              cursor: pointer;
                              font-size: 18px;
                              text-decoration: none;
                              &:hover { color: $color-active; }
                          }
                      }
                  };
                  ul#queue {
                      // background: magenta;
                      // border: 1px solid $color-black;
                      color: $color-black;
                      margin-bottom: 10px;
                      width: 100%;
                      .heading {
                          @include flex(row, center, space-between);
                          color: inherit;
                          font-size: 18px;
                          padding: 5px;
                          a {
                              color: inherit;
                              text-decoration: none;
                          }
                      }
                      .posts {
                          @include flex(column, flex-start, flex-start);
                          display: none;
                          padding: 0 5px;
                          width: 100%;
                          .post {
                              @include flex(row, center, space-between);
                              // background: #EBEBEB;
                              color: $color-black;
                              font-size: 18px;
                              margin: 10px 0;
                              // padding: 5px;
                              text-decoration: none;
                              width: 100%;
                              .details {
                                  @include flex(row, center, flex-start);
                                  align-self: flex-end;
                                  .controls { @include flex(row, center, flex-start) }
                              };
                              &:first-of-type { margin-top: 0; }
                              &:last-of-type { margin-bottom: 5px; }
                          };
                      };
                  };
                  #photo {
                      background: url($photo-codi);
                      background-position: 65% 18%;
                      background-size: 250%;
                      border: 1px solid $color-black;
                      height: 100px;
                      margin-bottom: 10px;
                      width: 100px;

                  };
                  #post {
                      .content {
                          width: 100%;
                          code {
                              font-family: $font-code;
                              font-size: 14px;
                              padding: 2px 5px;
                          }
                          p code { background: rgba(50, 168, 82, 0.25); }
                          pre {
                              background: rgba(50, 168, 82, 0.25);
                              margin: 10px 0;
                              padding: 5px;
                              width: 100%;
                              code {
                                  font-family: $font-code; font-size: 16px;
                                  &:first-of-type { margin: 0; padding: 0; }
                              }
                          }
                          img {
                              border: 1px solid $color-black;
                              display: block;
                              height: 150px;
                              margin: 5px 0;
                              object-fit: cover;
                              object-position: 65% 50%;
                              width: 150px;
                          }
                      }
                      h1 { margin: 0 0 5px 0; }
                      hr { margin: 1.5em 0; }
                  };
              };
          };
          footer {
              @extend .no-select;
              @include flex(row, center, center);
              margin-top: 1em;
              width: 100%;
          };
          header {
              @extend .no-select;
              @include flex(row, center, space-between);
              margin: 5px 0;
              width: 100%;
              #menu {
                  @include flex(row, center, flex-start);
                  list-style-type: none;
                  a {
                      @include flex(row, center, flex-start);
                      color: $color-black;
                      text-decoration: none;
                      svg {
                          fill: $color-black;
                          height: 18px;
                          width: auto;
                      }
                      &:not(:first-of-type) {::before { content: ' • ' }}
                      &:not(:last-of-type) { margin-right: 5px; }
                  };
              };
              #selector {
                  background: $color-black;
                  cursor: pointer;
                  height: 25px;
                  padding: 5px;
                  width: 45px;
                  .circle {
                      background: $color-white;
                      height: 15px;
                      left: 5px;
                      position: absolute;
                      width: 15px;
                  };
              };
          };
          .note {
              @include flex(row, center, space-between);
              border: 1px solid $color-black;
              color: $color-white;
              display: none;
              padding: 5px 10px;
              width: 100%;
              &.hint { background: $color-yellow; color: $color-black; };
              a { color: inherit; text-decoration: none; };
          };
      };
  };
  */
}
body .container, body #app {
  margin: 0 auto;
}
body.dark {
  background: rgb(26, 26, 26);
  color: rgb(255, 255, 255);
}
body.dark #app #content section a#create {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
body.dark #app #content section form#add, body.dark #app #content section form#edit {
  color-scheme: dark;
}
body.dark #app #content section form#add input, body.dark #app #content section form#add textarea, body.dark #app #content section form#edit input, body.dark #app #content section form#edit textarea {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
body.dark #app #content section form#add #preview .post, body.dark #app #content section form#edit #preview .post {
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}
body.dark #app #content section #photo {
  border-color: rgba(255, 255, 255, 0.5);
}
body.dark #app #content section #photo.brand {
  background: url("https://i.imgur.com/KBk1EeU.png");
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 90%;
  border: 0;
}
body.dark #app #content section #post #delete_edit a {
  color: rgb(255, 255, 255);
}
body.dark #app #content section #post #share .icons .icon {
  background: #EBEBEB;
  fill: rgb(0, 0, 0);
}
body.dark #app #content section ul#categories a {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
body.dark #app #content section ul#categories a:hover {
  color: #32A852;
}
body.dark #app #content section ul#posts .post {
  color: rgb(255, 255, 255);
}
body.dark #app #content section ul#posts .post .categories .category {
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}
body.dark #app #content section ul#posts .post .categories .category:hover {
  color: #32A852;
}
body.dark #app #content section ul#queue {
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}
body.dark #app #content section ul#queue .posts .post {
  color: rgb(255, 255, 255);
}
body.dark #app header #menu a {
  color: rgb(255, 255, 255);
}
body.dark #app header #menu a svg {
  fill: rgb(255, 255, 255);
}
body.dark #app .note {
  border-color: transparent;
}
body.dark #app #preview {
  border: 1px solid rgb(0, 0, 0);
  width: 100%;
}
body.dark #app #selector {
  background: rgb(255, 255, 255);
}
body.dark #app #selector .circle {
  background: rgb(0, 0, 0);
  left: 25px;
}
body .no-select, body #app header, #app body header, body #app footer, #app body footer, body #app #content section ul#categories, #app #content section body ul#categories, body #app #content section form#add #preview, #app #content section form#add body #preview, body #app #content section form#edit #preview, #app #content section form#edit body #preview, body #app #content, #app body #content {
  user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
}

#app {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  max-width: 600px;
  padding: 10px;
  width: 100%;
}
#app #content {
  width: 100%;
}
#app #content section a#create {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: bold;
  height: 25px;
  width: 25px;
  text-decoration: none;
}
#app #content section form#add, #app #content section form#edit {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
#app #content section form#add button, #app #content section form#edit button {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: flex-end;
  background: #32A852;
  border: 0;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 18px;
  min-width: 80px;
  padding: 5px 10px;
  text-decoration: none;
}
#app #content section form#add #feedback, #app #content section form#edit #feedback {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 18px;
  width: 100%;
}
#app #content section form#add #feedback p.error, #app #content section form#edit #feedback p.error {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: red;
  color: rgb(255, 255, 255);
  margin-bottom: 5px;
  padding: 5px;
  width: 100%;
}
#app #content section form#add #feedback p.error:last-of-type, #app #content section form#edit #feedback p.error:last-of-type {
  margin-bottom: 10px;
}
#app #content section form#add #feedback p.success, #app #content section form#edit #feedback p.success {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #32A852;
  color: rgb(255, 255, 255);
  margin-bottom: 5px;
  padding: 5px;
  width: 100%;
}
#app #content section form#add input, #app #content section form#add textarea, #app #content section form#edit input, #app #content section form#edit textarea {
  border: 1px solid rgb(26, 26, 26);
  font-size: 18px;
  margin-bottom: 10px;
  outline: 0;
  padding: 3px 5px;
  resize: none;
  width: 100%;
}
#app #content section form#add input.error, #app #content section form#add textarea.error, #app #content section form#edit input.error, #app #content section form#edit textarea.error {
  border-color: red;
}
#app #content section form#add input.success, #app #content section form#add textarea.success, #app #content section form#edit input.success, #app #content section form#edit textarea.success {
  border-color: #32A852;
}
#app #content section form#add label, #app #content section form#edit label {
  font-size: 18px;
}
#app #content section form#add #preview, #app #content section form#edit #preview {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 10px;
  width: 100%;
}
#app #content section form#add #preview .post, #app #content section form#edit #preview .post {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  font-size: 18px;
  padding: 5px 10px;
  width: 100%;
}
#app #content section form#add #preview .post .details, #app #content section form#edit #preview .post .details {
  display: none;
  width: 100%;
}
#app #content section form#add #preview .post .details .content, #app #content section form#edit #preview .post .details .content {
  width: 100%;
}
#app #content section form#add #preview .post .details .content code, #app #content section form#edit #preview .post .details .content code {
  font-family: "Fira Code", serif;
  font-size: 14px;
  padding: 2px 5px;
}
#app #content section form#add #preview .post .details .content p code, #app #content section form#edit #preview .post .details .content p code {
  background: rgba(50, 168, 82, 0.25);
  border-radius: 5px;
}
#app #content section form#add #preview .post .details .content p:not(:last-of-type), #app #content section form#edit #preview .post .details .content p:not(:last-of-type) {
  margin-bottom: 5px;
}
#app #content section form#add #preview .post .details .content pre, #app #content section form#edit #preview .post .details .content pre {
  background: rgba(50, 168, 82, 0.25);
  margin: 10px 0;
  padding: 5px;
  width: 100%;
}
#app #content section form#add #preview .post .details .content pre code, #app #content section form#edit #preview .post .details .content pre code {
  font-family: "Fira Code", serif;
  font-size: 16px;
}
#app #content section form#add #preview .post .details .content img, #app #content section form#edit #preview .post .details .content img {
  border: 1px solid rgb(0, 0, 0);
  display: block;
  height: 150px;
  margin: 5px 0;
  object-fit: cover;
  object-position: 65% 50%;
  width: 150px;
}
#app #content section form#add #preview .post .details h1, #app #content section form#edit #preview .post .details h1 {
  margin: 0 0 5px 0;
}
#app #content section form#add #preview .post .details hr, #app #content section form#edit #preview .post .details hr {
  margin: 1.5em 0;
}
#app #content section form#add #preview .post .heading, #app #content section form#edit #preview .post .heading {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
#app #content section form#add #preview .post .heading a, #app #content section form#edit #preview .post .heading a {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
#app #content section form#add textarea, #app #content section form#edit textarea {
  min-height: 100px;
}
#app #content section #fourOHfour {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
#app #content section #fourOHfour h1 {
  font-size: 48px;
  margin: 0;
  padding: 0;
}
#app #content section #fourOHfour p {
  margin: 0;
  padding: 0;
}
#app #content section #fourOHfour #photo {
  background: url("https://i.imgur.com/jluMUMu.png");
  background-position: 60% 5%;
  background-repeat: no-repeat;
  background-size: 250%;
  height: 125px;
  margin: 0;
  width: 125px;
}
#app #content section h1 {
  font-family: "Roboto Mono", serif;
  margin-bottom: 10px;
}
#app #content section #photo {
  background: url("https://i.imgur.com/3tZ26pp.jpeg");
  background-position: 65% 18%;
  background-size: 250%;
  border: 1px solid rgb(0, 0, 0);
  height: 100px;
  margin-bottom: 10px;
  width: 100px;
}
#app #content section #post .content {
  width: 100%;
}
#app #content section #post .content code {
  font-family: "Fira Code", serif;
  font-size: 14px;
  padding: 2px 5px;
}
#app #content section #post .content img {
  border: 1px solid rgb(0, 0, 0);
  display: block;
  height: 150px;
  margin: 5px 0;
  object-fit: cover;
  object-position: 65% 50%;
  width: 150px;
}
#app #content section #post .content p code {
  background: rgba(50, 168, 82, 0.25);
}
#app #content section #post .content p:not(:last-of-type) {
  margin-bottom: 5px;
}
#app #content section #post .content pre {
  background: rgba(50, 168, 82, 0.25);
  margin: 10px 0;
  padding: 5px;
  width: 100%;
}
#app #content section #post .content pre code {
  font-family: "Fira Code", serif;
  font-size: 16px;
}
#app #content section #post .content pre code:first-of-type {
  margin: 0;
  padding: 0;
}
#app #content section #post .content ul {
  list-style-position: inside;
}
#app #content section #post #delete_edit {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 5px;
}
#app #content section #post #delete_edit a {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #EBEBEB;
  color: rgb(255, 255, 255);
  font-size: 18px;
  margin-right: 5px;
  min-width: 75px;
  padding: 2px 5px;
  text-decoration: none;
}
#app #content section #post #delete_edit a.delete {
  background: rgb(128, 46, 46);
}
#app #content section #post #delete_edit a.edit {
  background: dodgerblue;
}
#app #content section #post #delete_edit a:last-of-type {
  margin: 0;
}
#app #content section #post h1 {
  margin: 0 0 5px 0;
}
#app #content section #post hr {
  margin: 1.5em 0;
}
#app #content section #post #share {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 10px;
}
#app #content section #post #share .icons {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 5px;
}
#app #content section #post #share .icons .icon {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: rgb(26, 26, 26);
  cursor: pointer;
  fill: rgb(255, 255, 255);
  height: 30px;
  padding: 5px;
  width: 30px;
}
#app #content section #post #share .icons .icon.copy {
  background: #EBEBEB;
  fill: rgb(0, 0, 0);
}
#app #content section #post #share .icons .icon.fb_messenger {
  background: #168AFF;
}
#app #content section #post #share .icons .icon.linked_in {
  background: #0077B5;
}
#app #content section #post #share .icons .icon.x {
  background: rgb(26, 26, 26);
  fill: rgb(255, 255, 255);
}
#app #content section #post #share .icons .icon:not(:last-of-type) {
  margin-right: 5px;
}
#app #content section #post #share p {
  font-size: 18px;
}
#app #content section ul#categories {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  list-style-type: none;
  margin-bottom: 10px;
  width: 100%;
}
#app #content section ul#categories a {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-weight: bold;
  min-width: 80px;
  margin: 0 5px 5px 0;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#app #content section ul#categories a:hover {
  color: #32A852;
}
#app #content section ul#heading {
  list-style-type: none;
}
#app #content section ul#heading li {
  margin-bottom: 5px;
}
#app #content section ul#heading li a, #app #content section ul#heading li span:not(#age) {
  border-bottom: 1px solid #32A852;
  color: inherit;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
#app #content section ul#heading li a:hover, #app #content section ul#heading li span:not(#age):hover {
  color: #32A852;
}
#app #content section ul#posts {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 10px 0;
  width: 100%;
}
#app #content section ul#posts .post {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: rgb(26, 26, 26);
  font-size: 18px;
  width: 100%;
}
#app #content section ul#posts .post:not(:last-of-type) {
  margin-bottom: 10px;
}
#app #content section ul#posts .post .categories {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-right: 10px;
}
#app #content section ul#posts .post .categories .category {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 1px solid #EBEBEB;
  color: inherit;
  cursor: pointer;
  font-family: "Roboto Mono", serif;
  font-size: 16px;
  padding: 2px 5px;
  text-decoration: none;
}
#app #content section ul#posts .post .categories .category:hover {
  color: #32A852;
}
#app #content section ul#posts .post .categories .category:not(:last-of-type) {
  margin-right: 5px;
}
#app #content section ul#posts .post .date {
  color: inherit;
  position: absolute;
  right: 0;
  text-decoration: none;
}
#app #content section ul#posts .post span {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-right: 5px;
}
#app #content section ul#posts .post .title {
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  text-decoration: none;
}
#app #content section ul#posts .post .title:hover {
  color: #32A852;
}
#app #content section ul#queue {
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  margin-bottom: 10px;
  width: 100%;
}
#app #content section ul#queue .heading {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: inherit;
  font-size: 18px;
  padding: 5px;
}
#app #content section ul#queue .heading a {
  color: inherit;
  text-decoration: none;
}
#app #content section ul#queue .posts {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  display: none;
  padding: 0 5px;
  width: 100%;
}
#app #content section ul#queue .posts .post {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: rgb(0, 0, 0);
  font-size: 18px;
  margin-bottom: 5px;
  text-decoration: none;
  width: 100%;
}
#app #content section ul#queue .posts .post .details {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-self: flex-end;
}
#app #content section ul#queue .posts .post .details .controls {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#app #content section ul#queue .posts .post:first-of-type {
  margin-top: 0;
}
#app #content section ul#queue .posts .post:last-of-type {
  margin-bottom: 5px;
}
#app footer {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #EBEBEB;
  flex-grow: 1;
  width: 100%;
}
#app header {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 5px 0;
  width: 100%;
}
#app header #menu {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
}
#app header #menu a {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: rgb(0, 0, 0);
  text-decoration: none;
}
#app header #menu a svg {
  fill: rgb(0, 0, 0);
  height: 18px;
  width: auto;
}
#app header #menu a:not(:first-of-type) ::before {
  content: " • ";
}
#app header #menu a:not(:last-of-type) {
  margin-right: 5px;
}
#app header #selector {
  background: rgb(0, 0, 0);
  cursor: pointer;
  height: 25px;
  padding: 5px;
  width: 45px;
}
#app header #selector .circle {
  background: rgb(255, 255, 255);
  height: 15px;
  left: 5px;
  position: absolute;
  width: 15px;
}
#app .note {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  display: none;
  padding: 5px 10px;
  width: 100%;
}
#app .note.hint {
  background: #F0E68C;
  color: rgb(0, 0, 0);
}
#app .note a {
  color: inherit;
  text-decoration: none;
}

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