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

body {
  background: rgb(255, 255, 255);
  color: rgb(30, 30, 30);
  font-family: serif;
  font-size: 20px;
  line-height: 1.4;
  height: 100vh;
  overflow-x: hidden;
  width: 100%;
}
body ::selection {
  background: rgb(194, 162, 217);
  color: rgb(255, 255, 255);
}
body a {
  color: inherit;
  text-decoration: none;
}
body a:hover {
  color: rgb(194, 162, 217);
}
body .container, body #app {
  margin: 0 auto;
  max-width: 720px;
  padding: 10px;
}
body .no-select, body #app section.content-block#connection form input, #app section.content-block#connection form body input, body #app header select, #app header body select, body #app header, #app body header, body #app footer, #app body footer, body .note {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
}
body .note {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgb(240, 230, 140);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  margin-bottom: 10px;
  padding: 2px 10px;
  width: 100%;
}
body .note span:hover {
  cursor: pointer;
}
body .small {
  font-size: 18px;
}

body.dark {
  background: rgb(30, 30, 30);
  color: rgb(255, 255, 255);
  color-scheme: dark;
  fill: 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 a#create:hover {
  background: rgb(194, 162, 217);
  color: rgb(255, 255, 255);
}
body.dark #app #content section form#add, body.dark #app #content section form#contact, 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 select, body.dark #app #content section form#add textarea, body.dark #app #content section form#contact input, body.dark #app #content section form#contact select, body.dark #app #content section form#contact textarea, body.dark #app #content section form#edit input, body.dark #app #content section form#edit select, 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#contact #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-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 ul#categories .category {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
body.dark #app #content section ul#categories .category:hover {
  background: rgb(194, 162, 217);
  color: rgb(255, 255, 255);
}
body.dark #app #content section ul#posts .post {
  color: rgb(255, 255, 255);
}
body.dark #app #content section ul#posts .post .categories .category {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
body.dark #app #content section ul#posts .post .categories .category:hover {
  background: rgb(194, 162, 217);
  color: rgb(255, 255, 255);
}
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 #content section ul#queue .posts .post ul#categories .category {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
body.dark #app footer div#connect a.connection {
  fill: rgb(255, 255, 255);
}
body.dark #app #preview {
  border: 1px solid rgb(0, 0, 0);
  width: 100%;
}
#app {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: inherit;
  height: 100%;
  width: 100%;
}
#app footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: inherit;
  flex-grow: 1;
  width: 100%;
}
#app footer div#connect {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -5px;
}
#app footer div#connect a.connection.active {
  color: rgb(194, 162, 217);
}
#app footer div#connect a.connection:not(:last-of-type) {
  margin-right: 10px;
}
#app header {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: inherit;
  font-weight: 500;
  width: 100%;
}
#app header select {
  font-family: inherit;
  font-size: 20px;
}
#app header ul#menu {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
}
#app header ul#menu li.active {
  color: rgb(194, 162, 217);
}
#app header ul#menu li:not(last-of-type) {
  margin-right: 10px;
}
#app section.content-block {
  font-family: "Inter", serif;
  font-size: inherit;
  width: 100%;
}
#app section.content-block#connection {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
#app section.content-block#connection form {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: inherit;
  font-size: inherit;
}
#app section.content-block#connection form button {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: flex-end;
  background: rgb(194, 162, 217);
  border: 0;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  padding: 2.5px 10px;
}
#app section.content-block#connection form div.form_group {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
}
#app section.content-block#connection form div.form_group p#feedback {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-grow: 1;
  margin-right: 5px;
  padding: 0;
}
#app section.content-block#connection form div.form_group p#feedback.error {
  color: rgb(128, 46, 46);
}
#app section.content-block#connection form div.form_group p#feedback.success {
  color: rgb(50, 168, 82);
}
#app section.content-block#connection form input {
  border: 1px solid rgb(0, 0, 0);
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 5px;
  padding: 2px 5px;
  width: 100%;
}
#app section.content-block#connection form input:active, #app section.content-block#connection form input:focus {
  outline: 0;
}
#app section.content-block#connection svg#brand {
  fill: inherit;
  height: auto;
  margin-bottom: 5px;
  width: 275px;
}

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