::-webkit-scrollbar { width: 7px }
::-webkit-scrollbar-thumb { 
  background: rgb(117, 63, 13); 
  border-radius: 10px; 
  border: 1.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { 
  background: wheat; 
  border-radius: 10px; 
  border: 1px solid rgba(0, 0, 0, 0.41);
}

img { object-fit: cover; border-radius: 4px; image-rendering: pixelated; }
.img { box-shadow: 0px 0px 5px black; -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3)) }
.icon { width: 30px; height: 30px; vertical-align: middle }
hr { border: 1px solid rgba(255, 255, 255, 0.2); width: 75% }
h1, h2 { box-shadow: none !important }
a { color: rgb(217 153 122) }
a:visited { color: rgb(201, 112, 67) }
footer { font-family: Irish Grover; text-align: center; padding-top: 15px; }
button,.box-button,#nav-btns img, #go-button:hover { cursor: url(../images/cursor/pointer.png), auto }

body {
  background: rgba(254, 234, 164);
  background-image: url(../images/Texture.png);
  background-size: cover;
  cursor: url(../images/cursor/cursor.png), auto;
  margin: 5px 0px 0px 0px;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 { 
  color: wheat; 
  text-align: center; 
  font-family: Chelsea Market; 
  margin-block: 10px;
  font-weight: normal;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

text, p { 
  font-family: Chelsea Market; 
  font-size: 12px;
  word-break: break-all;
  color: black;
}

#main {
  background-image: url(../images/Wood.png);
  box-shadow: 0px 5px 4px black;
  border-radius: 10px;
  margin: 0 auto;
  width: 780px;
  height: 100vh;
}

#nav {
  display: flex;
  #nav-btns { margin: auto;
    img { width: 85px } }
}

#logo {
  display: block;
  width: 180px;
  padding: 10px;
}

#content { margin: 0px 14px }
.box-button {
  position: absolute;
  bottom: -20px;
  right: -15px;
}

.box-button.left { left: -15px !important }
.box-button.middle { justify-self: anchor-center }
.box { position: relative }

.boxes { display: flex; flex-direction: column; gap: 20px; }

.box-content {
  border-radius: 10px;
  background-color: rgba(1, 1, 1, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.41);
  box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px;
  overflow-y: auto;
  height: 100%;
  p {
    padding: 7px;
  }
}

rainbow {
  color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(to right, 
    red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
  background-size: 500%;
  animation: rainbow-flow infinite linear 36s;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes rainbow-flow {
  0% { background-position: 50% 0%; }
  100% { background-position: -200%; }
}