@font-face {
  font-family: ortho;
  src: url("./OrthoventionalUpright.otf");
}
* {
  scrollbar-color: orchid aliceblue ;
}
body {
  background-color: slateblue;
  padding: 0px;
  margin: 0px;
  max-height: 100vh;

  
}

/* back to home button */
#back {
  width: 120px;
  height: 120px;
}

#home {
  position: fixed;
  top: 20px;
  left: 20px;
  text-align: center;
  font-style: italic;
  font-size: 1.1em;
  color: violet;
  z-index: 500;
}

.small-text {
  text-align: center;
  margin: auto;
  /* width: 80%; */
}

.gripes {
  position: absolute;
  margin: auto;
  width: 300px;
  border: slateblue solid 1px;

  right: 0px;
  top: 0px;
  background-color: antiquewhite;
  color: rgb(148, 100, 100);
  font-size: 1.2em;
  z-index: 0;
}

.gripes-intro {
  margin: auto;
  text-align: center;
  padding: 20px;
  /* background-color: burlywood; */
}

.gripes-submit-form {
  text-align: center;
}

.gripes-section {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.gripe-hr {
  border: 0.5px solid slateblue;
}

.timestamp {
  color: slateblue;
  border: slateblue 1px solid;
  font-family: "meooooowwwwwwwww";
  font-size: 0.8em;
}

.the-word-gripe {
  font-family: cursive;
  color: fuchsia;
  font-style: normal;
  filter: drop-shadow(0 0 0.1rem violet);
}

.gripes-our-gripes {
  font-family: cursive;
  /* text is a teensy bit darker than normal fuschia styling */
  color: rgb(220, 0, 220);

  font-size: 0.8em;
  border: fuchsia 2px dotted;
  margin: 20px;
  padding: 20px;
}

#allGripes {
  border: fuchsia 2px dotted;
  /* text is a teensy bit darker than normal fuschia styling */
  color: rgb(220, 0, 220);
  text-align: center;
  margin: 20px;
  padding: 15px;
  font-family: cursive;
}

label {
  color: slateblue;
  font-style: italic;
}

input,
textarea {
  border: slateblue 1px solid;
  margin: 5px;
  padding: 10px;
  font-family: cursive;
  color: fuchsia;
}

button {
  font-family: inherit;
  font-size: 1.1em;

  color: slateblue;

  border: slateblue 2px dotted;
  border-radius: 100%;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 12px;

  transition: 0.2s ease-in-out;
}

button:hover {
  filter: invert(0.1);
}

#discord-img {
  width: 100%;
  height: auto;
}

/* draggables section */

.draggables {
  margin: 0px;
  padding: 0px;
}

.draggable {
  position: fixed;

  max-width: 250px;
  max-height: 250px;
  bottom: 170px;
  left: 160px;
  z-index: 1;
  transform-origin: bottom left;

  border: 1px solid orangered;

  animation: windy 1s infinite ease-in-out;
}

.draggable:hover {
  cursor: grab;
}

/* .draggable[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20000;
  color: blue;
} */

#wash1 {
  rotate: 5deg;
  animation-delay: 0.02s;
}

#wash2 {
  rotate: -5deg;
  animation-delay: 0.05s;
}

#wash3 {
  rotate: 3deg;
}

#pisa {
  rotate: -3deg;
  animation-delay: -0.02s;
}

#don {
  rotate: 5deg;
  animation-delay: 0.02s;
}

#rodrick {
  rotate: -5deg;
  animation-delay: 0.05s;
}

#awesome {
  rotate: 3deg;
}

#slogan {
  rotate: -3deg;
  animation-delay: -0.02s;
}

#nandos {
  rotate: 5deg;
  animation-delay: 0.02s;
}

#bonsai {
  rotate: -5deg;
  animation-delay: 0.05s;
}

#ok {
  position: fixed;
  transform-origin: center right;

  animation: wendy 1s infinite ease-in-out;
  animation-delay: -0.02s;

  height: 250px;
  width: auto;
  z-index: 99999999;
  bottom: -18px;
  left: 30px;
  filter: invert(0);
  transition: 0.2s ease-in-out;
}

#ok:hover {
  cursor: pointer;
  filter: invert(0.1);
}


#dc-caption {
  position: fixed;
  bottom: 70px;
  left: 180px;
  font-size: 0.9em;
  rotate: 20deg;

  color: orangered;
  margin: 0px;
  padding-bottom: 5px;
}


#hover-caption {
  position: fixed;
  bottom: 0px;
  width: 50px;
  left: 5px;
  font-size: 0.8em;

  color: orangered;
  margin: 0px;
  padding-bottom: 5px;
}

@keyframes windy {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(2deg);
  }
}

/* wendy is literally just a less windy version of windy */
@keyframes wendy {
  0% {
    transform: rotate(0.25deg);
  }
  50% {
    transform: rotate(-0.5deg);
  }
  100% {
    transform: rotate(0.25deg);
  }
}

/* here startsthepoetry section */
.audrey-poem {
  position: absolute;
  top: 160px;
  right: 400px;
  width: 600px;
  height: 645px;
  border: red 5px;

  padding: 0px;
  margin: 0px;
}

.my-poem-part {
  position: absolute;
  max-width: 600px;
  top: 0px;
  left: 0px;
  opacity: 0;
}

.my-poem-part:hover {
  opacity: 1;
  border: rgb(0, 0, 0) solid 1px;
}

#my-poem-7:not(:hover) {
  opacity: 0;
  transition: 0.2s ease;
  border: rgb(0, 0, 0) solid 1px;
}

/* ppl watching */
.ppl-watching {
  position: absolute;
  top: 1100px;
  right: 400px;
  width: 300px;
  border: rgb(0, 0, 255) 1px solid;
  background-color: aliceblue;
  color: rgb(0, 0, 255);

  padding: 0px;
  margin: 0px;
  font-family: "Times New Roman", Times, serif;
  z-index: -1000;
}

/* book reviews */
.audrey-books {
  position: absolute;
  top: 2400px;
  right: 400px;
  width: 800px;
  border: lightgray 1px solid;

  padding: 0px;
  margin: 0px;

  z-index: -1000;
}

.audrey-books:hover {
  border: gray 3px outset;
    transition: linear 0.1s;

}

.audrey-books-img {
  position: relative;
  max-width: 100%;
  display: block;

}

.audrey-books-big {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;

  margin: 0px;
  padding: 0px;
}

.audrey-books-img-big {
  position: relative;
  max-width: 100%;
  display: block;
}

#footer {
  margin-bottom: 0px;
}

/* plant drawings */

.plant-drawings {
  position: absolute;
  top: 3200px;
  right: 0px;
  width: 300px;

  margin: 0px;

  z-index: -1000;
}

.plant-title {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
  color: rgb(191, 145, 27);
}

.plant-words {
  width: 60%;
  margin: auto;
  text-align: center;
  margin-bottom: 80px;

  color: rgb(191, 145, 27);
}

.plant-drawing {
  position: relative;
  width: 200px;
  display: block;
  float: center;
  margin: auto;
  margin-bottom: 40px;

  border: rgb(196, 86, 12) 1px double;
  transition: linear 0.1s;
}

.plant-drawing:hover {
  border: black 4px double;
}

.plant-drawings-big {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;

  margin: 0px;
  padding: 0px;
  background-color: black;
  object-fit: cover;
}

#big-plant-1 {
  width: 50%;
  float: left;
}

#big-plant-2 {
  width: 50%;
  float: right;
}

#big-plant-3 {
  width: 50%;
  float: left;
}

#big-plant-4 {
  width: 50%;
  float: right;
}

/* landscape */
.landscape {
position: absolute;
  top: 5300px;
  right: 400px;
  width: 800px;
  border: aliceblue 1px solid;

  padding: 0px;
  margin: 0px;

  z-index: -1000;
}

.landscape-img {
  position: relative;
  max-width: 800px;
  display: block;
}

#landscape-text {
  color: aliceblue;
}

#slugstory {
  position: absolute;
  top: 3750px;
  z-index: -1000;
  margin-left: 500px;
  width: 520px;}
#slugstory p {
  font-family: 'ortho', Courier, monospace;
  font-size: 1.3em;
  text-indent: 200px;
}

#kattrain img{
  width: 900px;
  height: auto;
  margin-left: 155px;
  position: absolute;
  top: 6150px;
  z-index: -1000;
  padding-bottom: 2000px;
  filter: drop-shadow(0px 0px 10px rgb(119, 119, 119));
}
#kattrain p {
  position: absolute;
  top: 6540px;
  margin-left: 200px;
  z-index: -1000;
  color: rgb(165, 165, 255);
}

#bottom {
  position: absolute;
  top: 25000px;
  padding-bottom: 100px;
  margin-left: 40%;
}

#frame img {
  height: 100%;
  width: 100%;
  display: block;
  right: 15px;
  padding-left: 20px;
  padding-bottom: 50px;
}

#frame {
  position: absolute;
  right: 15px;
  width: 600px;
  height: 655px;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 15px;
}

#displayBox {
  background-color: rgba(163, 166, 169, 0.261);
  width: 500px;
  height: 700px;
  position: absolute;
  top: 6650px;
  z-index: -1000;
  margin-left: 200px;
  width: 900px;
}