* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
}

:root {
  font-size: 62.5%;
}

#sky {
  width: 100%;
  height: 175vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(2, 0, 36, 1) 13%, rgba(9, 35, 121, 1) 42%, rgba(0, 212, 255, 1) 100%);
  display: block;
}

#moon, #sun {
  height: 7rem;
  width: 7rem;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  position: absolute;
  margin: 4rem;
}

#moon {
  background-color: black;
  box-shadow: .5em .2em .3em .1em rgb(234, 204, 168) inset;
  right: 0;
  top: 0;
}

#scorpiostar {
  width: 15%;
  display: none;
  margin-top: 24em;
  margin-left: 34em;
  cursor: pointer;
}

#sun {
  background-color: goldenrod;
  box-shadow: .5em .2em .3em .1em orange inset;
  bottom: -60vh;
  left: 0;
}

#welcome{
  color: rgb(34 37 84);
  font-size: 3em;
  margin-top: 0;
  position: absolute;
  bottom: -72vh;
  left: 11vw;
  display: none;
}

#garden {
  padding: 5.5em;
  background-color: yellowgreen;
  box-shadow: 1em -420em 36em -18em #288a2a inset;
}

#hill svg {
  background: rgba(0, 212, 255, 1);
  display: block;
}

span {
  display: inline-block;
  height: 12.5rem;
  width: 12.5rem;
  vertical-align: top;
  margin-bottom: .4em;
  //border: 1px red solid;
}

.flowercontainer {
  height: 14rem;
  width: 14rem;
  position: relative;
  display: block;
}

.post {
  height: 20%;
  width: 20%;
  background-color: #a2a2a1;
  box-shadow: .1em .1em .1em white inset;
  border-radius: 50%;
  position: absolute;
  margin: -10% 0 0 -10%;
  top: 50%;
  left: 50%;
  border: none;
  cursor: pointer;
}

#funeralplan {
  background-color: #e3aca6;
}

#deathbedfund {
  background-color: #c47970;
}

#outfittimeline{
  background-color: #d9c7b3;
}

#timer {
  background-color: #dc9e86;
}

#iphone {
  background-color: #a48665;
}

#waterripple {
  background-color: #c29984;
}

#throwingseedsallaround {
  background-color: #b17e7b;
}

#drawing2020 {
  background-color: #bb8b8c;
}

#italycloth {
  background-color: #b07d78;
}

#springbreak {
  background-color: #b97a80;
}

#filmselfportrait {
  background-color: #b68e91;
}

#nyrshoes {
  background-color: #b7a79b;
}

#spongebobs {
  background-color: #7e5031;
}

#charliesreview {
  background-color: #b2a09f;
}

#icarethiswaypoem {
  background-color: #89693b;
}

#tiktok {
  background-color: #a97d68;
}

#coffeegrinding {
  background-color: #644324;
}

#livelaughlove{
  background-color: #86605c;
}

#cloudjournal {
  background-color: #946e61;
}

#kumon {
  background-color: #ae996c;
}

#unstructuredfreetime {
  background-color: #ac8160;
}

#highfivevideo {
  background-color: #7c5948;
}

#dirtportrait {
  background-color: #9a6454;
}

#eggprint {
  background-color: #a96f56;
}

#walkingintoapt {
  background-color: #6e6057;
}

#grandmaletter {
  background-color: #ba9671;
}

#devlin {
  background-color: #ad835f;
}

#lifelonglearner {
  background-color: #7d736c;
}

#handwritingtype {
  background-color: #a17e80;
}

#pencilpoem {
  background-color: #c8937e;
}

#pencilmirror {
  background-color: #cc937a;
}

#reportcard {
  background-color: #d6b3b0;
}

#apology {
  background-color: #b99389;
}

#twinkletwinkle {
  background-color: #e5d1b6;
}

#sonogram {
  background-color: #b49b85;
}

.post:hover {
  filter: blur(1px);
  transform: scale(1.5);
  transition: .1s;
}

.form,
.feeling,
.time, .northpetal, .southeastpetal, .southwestpetal {
  width: 20%;
  height: 20%;
  border-radius: 0 95% 40% 95%;
  position: absolute;
  margin: -10% 0 0 -10%;
}

.time {
  transform: rotate(165deg);
  top: 37.5%;
  left: 27.5%;
}

#blanktime {
  box-shadow: 0em 1.5em 1.5em #e4e5ed inset;
}

#prebirth {
  box-shadow: 0em 1.5em 1.5em #d1d4e2 inset;
}

#toddler {
  box-shadow: 0em 1.5em 1.5em #bfc3d6 inset;
}

#glenhead {
  box-shadow: 0em 1.5em 1.5em #adb2ca inset;
}

#montessorischool {
  box-shadow: 0em 1.5em 1.5em #9aa0be inset;
}

#secondgrade {
  box-shadow: 0em 1.5em 1.5em #888fb3 inset;
}

#seacliffschool {
  box-shadow: 0em 1.5em 1.5em #767ea7 inset;
}

#youth {
  box-shadow: 0em 1.5em 1.5em #646d9b inset;
}

#middleschool {
  box-shadow: 0em 1.5em 1.5em #586089 inset;
}

#highschool {
  box-shadow: 0em 1.5em 1.5em #4c5377 inset;
}

#teens {
  box-shadow: 0em 1.5em 1.5em #414664 inset;
}

#yearoff {
  box-shadow: 0em 1.5em 1.5em #353a52 inset;
}

#baltimore {
  box-shadow: 0em 1.5em 1.5em #292d40 inset;
}

#freshsophmica {
  box-shadow: 0em 1.5em 1.5em #1d202e inset;
}

#lefthandperiod {
  box-shadow: 0em 1.5em 1.5em #12131b inset;
}

#junsenmica {
  box-shadow: 0em 1.5em 1.5em #0d1620 inset;
}

#withinaninstitution {
  box-shadow: 0em 1.5em 1.5em #162435 inset;
}

#postgrad {
  box-shadow: 0em 1.5em 1.5em #1f334a inset;
}

#pandemic {
  box-shadow: 0em 1.5em 1.5em #28415f inset;
}

#thegoodoldays {
  box-shadow: 0em 1.5em 1.5em #314f74 inset;
}

#scorpioseason {
  box-shadow: 0em 1.5em 1.5em #395e8a inset;
}

#fall {
  box-shadow: 0em 1.5em 1.5em #426c9f inset;
}

#winter {
  box-shadow: 0em 1.5em 1.5em #4b7bb4 inset;
}

#spring {
  box-shadow: 0em 1.5em 1.5em #608abd inset;
}

#summer {
  box-shadow: 0em 1.5em 1.5em #759ac6 inset;
}

#notinamerica {
  box-shadow: 0em 1.5em 1.5em #8ba9ce inset;
}

#currently {
  box-shadow: 0em 1.5em 1.5em #a0b9d7 inset;
}

#bloomingyear {
  box-shadow: 0em 1.5em 1.5em #b5c9e0 inset;
}

#onmydeathbed {
  box-shadow: 0em 1.5em 1.5em #cad8e9 inset;
}

#postdeath {
  box-shadow: 0em 1.5em 1.5em #dfe8f2 inset;
}

.form {
  transform: rotate(45deg);
  box-shadow: 0em 1.5em 1.5em #FF0000 inset;
  top: 75.3%;
  left: 50%;
}

#blankform {
  box-shadow: 0em 1.5em 1.5em #f6dbdf inset;
}

#clothingoutfit {
  box-shadow: 0em 1.5em 1.5em #f0c3c9 inset;
}

#fromsomeoneelse {
  box-shadow: 0em 1.5em 1.5em #eaabb4 inset;
}

#assignment {
  box-shadow: 0em 1.5em 1.5em #e4939f inset;
}

#verybadthing {
  box-shadow: 0em 1.5em 1.5em #de7a89 inset;
}

#image {
  box-shadow: 0em 1.5em 1.5em #d96274 inset;
}

#drawing {
  box-shadow: 0em 1.5em 1.5em #d34a5e inset;
}

#ritual {
  box-shadow: 0em 1.5em 1.5em #cd3249 inset;
}

#selfportrait {
  box-shadow: 0em 1.5em 1.5em #b52c40 inset;
}

#anecdote {
  box-shadow: 0em 1.5em 1.5em #9d2638 inset;
}

#handwritten {
  box-shadow: 0em 1.5em 1.5em #84212f inset;
}

#response {
  box-shadow: 0em 1.5em 1.5em #6c1b27 inset;
}

#character {
  box-shadow: 0em 1.5em 1.5em #54151e inset;
}

#game {
  box-shadow: 0em 1.5em 1.5em #3c0f15 inset;
}

#sound {
  box-shadow: 0em 1.5em 1.5em #24090d inset;
}

#credential {
  box-shadow: 0em 1.5em 1.5em #240915 inset;
}

#diagram {
  box-shadow: 0em 1.5em 1.5em #3c0f23 inset;
}

#tool {
  box-shadow: 0em 1.5em 1.5em #541531 inset;
}

#performance {
  box-shadow: 0em 1.5em 1.5em #6c1b3f inset;
}

#thought {
  box-shadow: 0em 1.5em 1.5em #85204e inset;
}

#observation {
  box-shadow: 0em 1.5em 1.5em #9d265c inset;
}

#experience {
  box-shadow: 0em 1.5em 1.5em #b52c6a inset;
}

#object {
  box-shadow: 0em 1.5em 1.5em #cd3278 inset;
}

#food {
  box-shadow: 0em 1.5em 1.5em #d34a88 inset;
}

#goal {
  box-shadow: 0em 1.5em 1.5em #d96298 inset;
}

#online {
  box-shadow: 0em 1.5em 1.5em #df7aa8 inset;
}

#physical {
  box-shadow: 0em 1.5em 1.5em #e492b7 inset;
}

#review {
  box-shadow: 0em 1.5em 1.5em #eaabc7 inset;
}

#value {
  box-shadow: 0em 1.5em 1.5em #f0c3d7 inset;
}

#practice {
  box-shadow: 0em 1.5em 1.5em #f6dbe7 inset;
}

.feeling {
  transform: rotate(285deg);
  box-shadow: 0em 1.5em 1.5em #fcc614 inset;
  top: 37.5%;
  left: 72.5%;
}

#blankfeeling {
  box-shadow: 0em 1.5em 1.5em #fcebb7 inset;
}

#tender {
  box-shadow: 0em 1.5em 1.5em #fbe6a3 inset;
}

#dark {
  box-shadow: 0em 1.5em 1.5em #fbe08f inset;
}

#pensive {
  box-shadow: 0em 1.5em 1.5em #fada7a inset;
}

#potent {
  box-shadow: 0em 1.5em 1.5em #f9d566 inset;
}

#curious {
  box-shadow: 0em 1.5em 1.5em #f8cf51 inset;
}

#grateful {
  box-shadow: 0em 1.5em 1.5em #f7ca3d inset;
}

#suspicious {
  box-shadow: 0em 1.5em 1.5em #f7c428 inset;
}

#bitter {
  box-shadow: 0em 1.5em 1.5em #f6be14 inset;
}

#recalcitrant {
  box-shadow: 0em 1.5em 1.5em #d7a408 inset;
}

#mundane {
  box-shadow: 0em 1.5em 1.5em #df8000 inset;
}

#significant {
  box-shadow: 0em 1.5em 1.5em #f48c00 inset;
}

#precarious {
  box-shadow: 0em 1.5em 1.5em #ff960b inset;
}

#divisive {
  box-shadow: 0em 1.5em 1.5em #ff9f20 inset;
}

#expressive {
  box-shadow: 0em 1.5em 1.5em #ffa835 inset;
}

#funny {
  box-shadow: 0em 1.5em 1.5em #ffb24a inset;
}

#mysterious {
  box-shadow: 0em 1.5em 1.5em #ffbb60 inset;
}

#scrumptious {
  box-shadow: 0em 1.5em 1.5em #ffc475 inset;
}

#critical {
  box-shadow: 0em 1.5em 1.5em #ffcd8a inset;
}

#cryptic {
  box-shadow: 0em 1.5em 1.5em #ffcd8a inset;
}

#foundational {
  box-shadow: 0em 1.5em 1.5em #fbf3b9 inset;
}

#genuine {
  box-shadow: 0em 1.5em 1.5em #faefa5 inset;
}

#comforting {
  box-shadow: 0em 1.5em 1.5em #f9ec91 inset;
}

#shy {
  box-shadow: 0em 1.5em 1.5em #f7e87d inset;
}

#lively {
  box-shadow: 0em 1.5em 1.5em #f6e468 inset;
}

#desperate {
  box-shadow: 0em 1.5em 1.5em #f5e154 inset;
}

#flamboyant {
  box-shadow: 0em 1.5em 1.5em #f4dd40 inset;
}

#angst {
  box-shadow: 0em 1.5em 1.5em #f3da2c inset;
}

#problematic {
  box-shadow: 0em 1.5em 1.5em #f3da2c inset;
}

#sensitive {
  box-shadow: 0em 1.5em 1.5em #e7cc0e inset;
}

.northpetal {
  transform: rotate(225deg);
  top: 24.7%;
  left: 50%;
  box-shadow: 0em 1.5em 1.5em #FF0000 inset;
}

.southeastpetal {
  transform: rotate(345deg);
  top: 62.5%;
  left: 72.5%;
  box-shadow: 0em 1.5em 1.5em #0000FF inset;
}

.southwestpetal {
  transform: rotate(105deg);
  top: 62.5%;
  left: 27.5%;
  box-shadow: 0em 1.5em 1.5em #fcc614 inset;
}

#dirtedge3 svg {
  background: #8d7f30;
  display: block;
}

#dirtedge1 svg {
  background: #7a5021;
  display: block;
}

#dirt {
  width: 100%;
  height: 110vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(0deg, rgba(34, 23, 9, 1) 9%, rgba(122, 80, 33, 1) 90%);
  display: block;
}

@media screen and (max-width: 60em) {
  #garden {
    padding: 7.5em;
  }

  #welcome{
    font-size: 2em;
  }

  @media screen and (max-width: 700px) {
    .post {
      cursor: default;
    }
    #sky{
    height: 110vh;
    }

    #moon, #sun {
      height: 5rem;
      width: 5rem;
      margin: 2rem;
      cursor: default;
    }

    #sun {
      bottom: -14vh;
    }

    #hill svg {
      background: rgba(0, 212, 255, 1);
      display: block;
    }

    #garden {
      padding: .7em;
      background-color: #288a2a;
      box-shadow: none;
    }
    span {
      height: 10rem;
      width: 10rem;
      margin-bottom: .6em;
    }

    #dirt {
      height: 10vh;
    }
  }