/* 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." */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
  background-color: #FDF9EE;
  color: #58302C;
  font-family: "VT323", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
}


button {
  background-color: #DD1603; 
  border: none;
  color: white;
  font-family: "VT323", monospace;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}



.exit {  background-color: #568EBA; 
}

.backtrack {
    background-color: #985018; 

}

h1, h2, h3, h4, b {
    font-weight: 400;
  font-family: "Pixelify Sans", monospace;
}

a {
  color: #FDF9EE;
}

.link {
  color: #985018;
}
.anchor {
  color: #985018;
}

.rel {
  position: relative;
}

img {
  image-rendering: pixelated;
}

.map {
    mix-blend-mode: multiply;
}


.deg180 {
  transform: rotate(180deg);
}


.deg100 {
  transform: rotate(-100deg);
}

.next, .previous {
  border: none;
  color: #58302C;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.next {
  position: absolute;
  bottom: 0;
  right: 0;
}

.previous {
  position: absolute;
  bottom: 0;
  left: 0;
}

.flex-container {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

#preview {
  width: 300px;
}

.flex-item {
  text-align: center;
  justify-content: center;
  justify-items: center;
  margin: 10px;
}



/* root image code*/
.woodcock{
    background-image: url("timberdoodle.png");
    background-repeat:no-repeat;
    height:147;
    width:103;

}

.woodcock2{
    background-image: url("doodlepeep.png");
    height:147;
    width:103;
    background-repeat:no-repeat;
}

.timberdoodle
{
    box-shadow:   -5px 0 0 0 #985018,
                 5px 0 0 0 #784022,
                 0 -5px 0 0 #985018,
                 0 5px 0 0 #784022;
  background-color: #985018;
  padding: 20px 0 20px 0;
  text-align: center;
  width: 200px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 2 / 2;
  font-style: italic;
  margin: 30px;
}

.nuthatch
{
    box-shadow:   -5px 0 0 0 #548C2F,
                 5px 0 0 0 #784022,
                 0 -5px 0 0 #548C2F,
                 0 5px 0 0 #784022;
  background-color: #548C2F;
  padding: 20px 0 20px 0;
  text-align: center;
  width: 200px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 2 / 2;
  font-style: italic;
    margin: 30px;

}
.lichen
{
    box-shadow:   -5px 0 0 0 #DD1603,
                 5px 0 0 0 #784022,
                 0 -5px 0 0 #DD1603,
                 0 5px 0 0 #784022;
  background-color: #DD1603;
  padding: 20px 0 20px 0;
  text-align: center;
  width: 200px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 2 / 2;
  font-style: italic;
  margin: 30px;
}


a.plain {
  color: #985018;
  text-decoration: none;
}

a.plain:hover {
  color: #FDD05E;
  text-decoration: none;
}

/*ribo zone books*/
.book {
  box-shadow:   -5px 0 0 0 #985018,
                 5px 0 0 0 #985018,
                 0 -5px 0 0 #985018,
                 0 5px 0 0 #985018;
  background-color: #FDF9EE;
  padding: 0 1px;
  width: 500px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 4 / 2;
  display: flex;
  align-content: center;
  margin: 50px 0;
   font-family: "VT323", monospace;
  font-size: 17px;
}
.pageL,	.pageR {
  height: 100%;
  width: 50%;
  color: #58302C;
  padding: 20px;
  display: inline-block;
  position: relative;
}
.pageL {
  border-left: 1px grey double;
}
.pageR { 
  border-right: 1px grey double;
}
.seam {
  width: 7px;
  background:
    linear-gradient(to right,
    white, grey, white);
}

#manyL {
    border-left: 3px grey double;
}

#manyR {
    border-right: 3px grey double;
}


#botright {
  position: relative;
  bottom: 0;
  right: 0;
}


  #info-box {
    margin: 20px;
    padding: 10px;
    border: 1px solid #aaa;
    background: #f9f9f9;
    color: #000;
    min-height: 40px;
  }


/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .book
    {
      width: 350px;
      aspect-ratio: 1 / 1;
}
.pageL, .pageR 
{
  height: 80%;
}
}