/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: rgb(27, 24, 31);
  font-family: Verdana;
  background-color: BlanchedAlmond;
}

.corner {
  position: fixed;
  bottom: -40px;
  left: 20px;
  height: 300px;
  width: auto;
}

.bottom-nav {
  text-align: center;
  margin-top: 20px;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.nav-buttons img {
  cursor: pointer;
}

.nav-buttons img:hover {
  opacity: 0.8;
}

#container {
  overflow: scroll;
  overflow-x: hidden;
  height: 10em;
  padding: 1rem;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  border: 3px solid rgb(27, 24, 31);
  background-color: rgb(27, 24, 31);
  color: rgb(255, 251, 245);
}

.centered {
  text-align: center;
  margin: 20px auto;
  max-width: 800px;
}


.textbounce { 
position: relative;
top: 0;
animation: bounce 0.3s ease infinite alternate;
}

@keyframes bounce {
100% {
top: -.25rem;
}
}

#container::-webkit-scrollbar {
  width: 14px;
}

#container::-webkit-scrollbar:horizontal {
  height: 14px;
}

#container::-webkit-scrollbar-corner {
  background: #eee;
}

#container::-webkit-scrollbar-track:vertical {
  background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
  border-radius: 5px;
}

#container::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  border-radius: 5px;
}

#container::-webkit-scrollbar-thumb {
  border: 1.5px solid #888;
  border-radius: 5px;
  box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}

#container::-webkit-scrollbar-thumb:vertical {
  background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
}

#container::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
}

#container::-webkit-scrollbar-button:horizontal:end:increment,
#container::-webkit-scrollbar-button:horizontal:start:decrement,
#container::-webkit-scrollbar-button:vertical:end:increment,
#container::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

#container::-webkit-scrollbar-button:vertical {
  height: 15px;
}

#container::-webkit-scrollbar-button:vertical:start:decrement {
  background: white;
  background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto, cover;
  border: 1.5px solid #888;
  border-radius: 5px;
}

#container::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
}

#container::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

#container::-webkit-scrollbar-button:vertical:end:increment {
  background: white;
  background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto, cover;
  border: 1.5px solid #888;
  border-radius: 5px;
}

#container::-webkit-scrollbar-button:horizontal {
  width: 14px;
}

#container::-webkit-scrollbar-button:horizontal:start:increment {
  display: none;
}

#container::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

#container::-webkit-scrollbar-button:horizontal:start:decrement {
  background: white;
  background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto, cover;
  border-radius: 5px;
  border: 1.5px solid #888;
}

#container::-webkit-scrollbar-button:horizontal:end:increment {
  background: white;
  background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto, cover;
  border-radius: 5px;
  border: 1.5px solid #888;
}