#story_container {
  width: 30vw;
  height: 80vh;
  border: 3px solid #a10000;
  position: fixed;
  top: 0px;
  left: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1vw;
}

#container {
  display: flex;
  flex-direction: row;
}

#popup-container {
  position: fixed;
  top: 5vh;
  left: 25vw;
  z-index: 1000;

}

.rivers-collection {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 50px;
  font-size: 24px;
  background-color: #e9a9a9;
  opacity: 0.9;
  color: #7f2323;
  border-radius: 133px;
  width: 50vw;
  height: 68vh;
  overflow-y: hidden;
  border: 5px solid #7f2323;
  background-image: radial-gradient(circle at 50% 50%, transparent 0%, #e76f6f 90%);
  animation-name: wiggle;
  animation-timing-function: ease-in;
  animation-duration: 10s; 
  animation-fill-mode: both; 
  animation-duration: 0.75s;
}



.story-button {
  display: block;
  padding: 10px;
  font-size: 24px;
  background-color: #e9a9a9;
  opacity: 0.9;
  color: #7f2323;
  border-radius: 133px;
  border: 5px solid #7f2323;
  cursor: pointer;
  margin-bottom: 13px;
  background-image: radial-gradient(circle at 50% 50%, transparent 0%, #e76f6f 90%);
}

.story-button:hover {
  animation-name: wiggle;
  animation-timing-function: ease-in;
  animation-duration: 10s; 
  animation-fill-mode: both; 
  animation-duration: 0.75s;
}

@keyframes wiggle {
  0% {
    transform: skewX(9deg);
  }

  10% {
    transform: skewX(-8deg);
  }

  20% {
    transform: skewX(7deg);
  }

  30% {
    transform: skewX(-6deg);
  }

  40% {
    transform: skewX(5deg);
  }

  50% {
    transform: skewX(-4deg);
  }

  60% {
    transform: skewX(3deg);
  }

  70% {
    transform: skewX(-2deg);
  }

  80% {
    transform: skewX(1deg);
  }

  90% {
    transform: skewX(0deg);
  }

  100% {
    transform: skewX(0deg);
  }
}

.river-title {
  font-size: 32px;
  font-weight: bolder;
  color: #4e0d0d;
  text-decoration: underline;

}

.river-desc {
  margin-bottom: 5%;
}

.river-img {
  border: 5px solid #7f2323;
  border-radius: 133px;
  height: 30vh;
  margin-bottom: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.jr-maze {
  position: relative;
  display: block;
  margin-left: 32vw;
}

#response {
  margin: 13px;
}

.wanderer {
  z-index: 100;
}

.river {
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: #a10000;
  opacity: 0.5;
}

label {
  font-weight: bolder;
}

select {
  margin-top: 13px;
  margin-bottom: 13px;
}

.waves {
  --mask:
    radial-gradient(38.48px at 50% 52.80px,#000 99%,#0000 101%) calc(50% - 66px) 0/132px 51% repeat-x,
    radial-gradient(38.48px at 50% -19.8px,#0000 99%,#000 101%) 50% 33px/132px calc(51% - 33px) repeat-x,
    radial-gradient(38.48px at 50% calc(100% - 52.80px),#000 99%,#0000 101%) calc(50% - 66px) 100%/132px 51% repeat-x,
    radial-gradient(38.48px at 50% calc(100% + 19.80px),#0000 99%,#000 101%) 50% calc(100% - 33px)/132px calc(51% - 33px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.maze div div.friday::after {
  content: "🐻";
}

.hole{
  background-size: cover;
  background-image: url("http://farragofiction.com/ZampanioGoshShouldYouTrustThis/train.png")
}

.debug {
  z-index: 99;
  background-color: #a10000;
  width: 100%;
  height: 100%;
  opacity: 33%;
}

#footer {
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0px;
  border-top: 1px solid black;
  width: 100%;
  background: white;
}