/* Utility classes */
.bg-black {
  background-color: black;
}
.transparent {
  opacity: 0.8;
}
.no-border {
  border: none;
}
.round-border {
  border-radius: 2px;
}
.box-frame {
  box-shadow: 1px 1px 1px 1px #c4e38a, -1px -1px 1px 1px #b19cd9;
}
.box-shadow {
  box-shadow: 1px 1px 4px 2px black, -1px -1px 4px 2px black;
}
.green {
  color: #c4e38a;
}
.orange {
  color: #eb6123;
}
.purple {
  color: #b19cd9;
}
.clickable:hover {
  cursor: pointer;
}
.no-outline:focus {
  outline: none;
}
.writable[contenteditable="true"]:hover {
  cursor: url("./images/quill-pen.svg"), default;
}
.inline {
  display: inline-block;
}
.italic {
  font-style: italic;
}
.padding-x {
  padding-right: 12px;
  padding-left: 12px;
}
.padding-y {
  padding-top: 4px;
  padding-bottom: 4px;
}
.padding {
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.fit-content {
  width: fit-content;
}
.pre-space {
  white-space: pre;
}
/* Elements */
html,
body {
  background-color: black;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
* {
  font-family: "Yatra One", cursive;
}
.bg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 100;
}
.bg-row {
  height: 17%;
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.bg-row:nth-child(1) {
  background-image: url("./images/hello.png");
  background-size: contain;
}
.bg-row:nth-child(2) {
  background-image: url("./images/scretchy.png");
  background-size: contain;
}
.bg-row:nth-child(3) {
  background-image: url("./images/sleepy.png");
  background-size: contain;
}
.bg-row:nth-child(4) {
  background-image: url("./images/hello.png");
  background-size: contain;
}
.bg-row:nth-child(5) {
  background-image: url("./images/scretchy.png");
  background-size: contain;
}
.bg-row:nth-child(6) {
  background-image: url("./images/sleepy.png");
  background-size: contain;
}
.container {
  height: 100%;
  width: 75%;
  margin: 8px;
  margin-left: 10%;
  position: absolute;
  z-index: 200;
}
@media screen and (min-device-width: 1200px) {
  .container {
    width: 33%;
  }
}
.heading {
  font-size: 1.4em;
  text-shadow: 1px 1px 1px white;
  background-color: black;
  box-shadow: 1px 1px 1px 1px #c4e38a, -1px -1px 1px 1px #b19cd9;
  border-radius: 2px;
  width: fit-content;
  color: #eb6123;
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}
@media screen and (min-device-width: 1200px) {
  .heading {
    font-size: 2em;
  }
}
.thought {
  background-color: black;
  width: fit-content;
  font-style: italic;
  border-radius: 2px;
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  box-shadow: 1px 1px 4px 2px black, -1px -1px 4px 2px black;
  opacity: 0.8;
}
.media {
  box-shadow: 1px 1px 1px 1px #c4e38a, -1px -1px 1px 1px #b19cd9;
  width: fit-content;
}
.query-container {
  background-color: black;
  box-shadow: 1px 1px 1px 1px #c4e38a, -1px -1px 1px 1px #b19cd9;
  border-radius: 2px;
  width: fit-content;
}
.query {
  display: inline-block;
  color: #eb6123;
  padding-right: 12px;
  padding-left: 12px;
  white-space: pre;
}
.query:focus {
  outline: none;
}
.query[contenteditable="true"]:hover {
  cursor: url("./images/quill-pen.svg"), default;
}
.clear-query {
  background-color: black;
  border: none;
  color: #eb6123;
  padding-right: 12px;
  padding-left: 12px;
}
.clear-query:hover {
  cursor: pointer;
}
.iris .bg-row:nth-child(1) {
  background-image: url("./images/iris.png");
  background-size: contain;
}
.iris .bg-row:nth-child(2) {
  background-image: url("./images/iris.png");
  background-size: contain;
}
.iris .bg-row:nth-child(3) {
  background-image: url("./images/iris.png");
  background-size: contain;
}
.iris .bg-row:nth-child(4) {
  background-image: url("./images/iris.png");
  background-size: contain;
}
.iris .bg-row:nth-child(5) {
  background-image: url("./images/iris.png");
  background-size: contain;
}
.iris .bg-row:nth-child(6) {
  background-image: url("./images/iris.png");
  background-size: contain;
}
.hugging .bg-row:nth-child(1) {
  background-image: url("./images/hugging.png");
  background-size: contain;
}
.hugging .bg-row:nth-child(2) {
  background-image: url("./images/hugging.png");
  background-size: contain;
}
.hugging .bg-row:nth-child(3) {
  background-image: url("./images/hugging.png");
  background-size: contain;
}
.hugging .bg-row:nth-child(4) {
  background-image: url("./images/hugging.png");
  background-size: contain;
}
.hugging .bg-row:nth-child(5) {
  background-image: url("./images/hugging.png");
  background-size: contain;
}
.hugging .bg-row:nth-child(6) {
  background-image: url("./images/hugging.png");
  background-size: contain;
}
.bonnet .bg-row:nth-child(1) {
  background-image: url("./images/bonnet.png");
  background-size: contain;
}
.bonnet .bg-row:nth-child(2) {
  background-image: url("./images/bonnet.png");
  background-size: contain;
}
.bonnet .bg-row:nth-child(3) {
  background-image: url("./images/bonnet.png");
  background-size: contain;
}
.bonnet .bg-row:nth-child(4) {
  background-image: url("./images/bonnet.png");
  background-size: contain;
}
.bonnet .bg-row:nth-child(5) {
  background-image: url("./images/bonnet.png");
  background-size: contain;
}
.bonnet .bg-row:nth-child(6) {
  background-image: url("./images/bonnet.png");
  background-size: contain;
}
.kristen .bg-row:nth-child(1) {
  background-image: url("./images/kristen.png");
  background-size: contain;
}
.kristen .bg-row:nth-child(2) {
  background-image: url("./images/kristen.png");
  background-size: contain;
}
.kristen .bg-row:nth-child(3) {
  background-image: url("./images/kristen.png");
  background-size: contain;
}
.kristen .bg-row:nth-child(4) {
  background-image: url("./images/kristen.png");
  background-size: contain;
}
.kristen .bg-row:nth-child(5) {
  background-image: url("./images/kristen.png");
  background-size: contain;
}
.kristen .bg-row:nth-child(6) {
  background-image: url("./images/kristen.png");
  background-size: contain;
}
.frank .bg-row:nth-child(1) {
  background-image: url("./images/frank.png");
  background-size: contain;
}
.frank .bg-row:nth-child(2) {
  background-image: url("./images/frank.png");
  background-size: contain;
}
.frank .bg-row:nth-child(3) {
  background-image: url("./images/frank.png");
  background-size: contain;
}
.frank .bg-row:nth-child(4) {
  background-image: url("./images/frank.png");
  background-size: contain;
}
.frank .bg-row:nth-child(5) {
  background-image: url("./images/frank.png");
  background-size: contain;
}
.frank .bg-row:nth-child(6) {
  background-image: url("./images/frank.png");
  background-size: contain;
}
.zach .bg-row:nth-child(1) {
  background-image: url("./images/zach.png");
  background-size: contain;
}
.zach .bg-row:nth-child(2) {
  background-image: url("./images/zach.png");
  background-size: contain;
}
.zach .bg-row:nth-child(3) {
  background-image: url("./images/zach.png");
  background-size: contain;
}
.zach .bg-row:nth-child(4) {
  background-image: url("./images/zach.png");
  background-size: contain;
}
.zach .bg-row:nth-child(5) {
  background-image: url("./images/zach.png");
  background-size: contain;
}
.zach .bg-row:nth-child(6) {
  background-image: url("./images/zach.png");
  background-size: contain;
}
.party .bg-row:nth-child(1) {
  background-image: url("./images/party.png");
  background-size: contain;
}
.party .bg-row:nth-child(2) {
  background-image: url("./images/party.png");
  background-size: contain;
}
.party .bg-row:nth-child(3) {
  background-image: url("./images/party.png");
  background-size: contain;
}
.party .bg-row:nth-child(4) {
  background-image: url("./images/party.png");
  background-size: contain;
}
.party .bg-row:nth-child(5) {
  background-image: url("./images/party.png");
  background-size: contain;
}
.party .bg-row:nth-child(6) {
  background-image: url("./images/party.png");
  background-size: contain;
}