:root{
  /* --text: #914c4c; */
  font-weight: 1000;
}

html, body {margin: 0; overflow: scroll;}

body{
  background-image: url("backgrounds/Bajarmaland.jpg");
  color: var(--text);
  width: 50%;
  text-align: center;
}

/* #title-image{ */
  /* background-image: url("test-splotch.png"); */
  /* background-size: 100% 100%; */
/* } */

p{
  margin: 0;
}

nav{
  margin: 0;
  
  display:flex;
  flex-direction:row;
  justify-content: center;
}

#content{
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  z-index: 0;
  opacity: 0;
}

#content ul{
  overflow: scroll;
  height: 25vh;
}

#overlay{
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;

  display: flex;
}

#main-overlay{
  width: 2200px;
  height: clamp(835px, 100%, 100%);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 2500px 100%;
  background-image: url("tree-foreground.png");
  flex-shrink: 0;
}

#overlay-right-extension{
  width: 100%;
  height: clamp(835px, 100%, 100%);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 334px 100%;
  background-image: url("tree-foreground-right.png");
}

#fade{
  position: absolute;
}