@font-face {
    font-family: "Escargoth";
    src: url('fonts/Big-Marker.ttf');
  }

  @font-face {
    font-family: "Marker";
    src: url('fonts/SP-Marker.otf');
  }

  @-moz-document url-prefix() {
  div, html{
    scrollbar-color: rgba(240, 126, 91, 0.831) rgba(172, 92, 92, 0) !important;
    scrollbar-width: thin !important;
  }

}
  html, body{
    overflow:visible;
    margin: 0 auto;
    padding:0px;
  }
  body p, body li{
    font-family:"Marker", 'Courier New', Courier, monospace;
    font-size:0.9em;
  }

  #background{
    width:105vw;
    height:105vh;
    padding:0px;
    margin:-20vh 0 0 -5vw;
    background-image:url('/textures/plaidred.jpg');
    background-size:200px 150px;
    background-repeat:repeat;
    filter: sepia(1%) saturate(100%) brightness(50%);
    position:fixed;
  }

    #zholder{
    position:relative;
    margin: 0 auto;
    margin-top:15vh;
    width:850px;
    height:950px;
    padding:10px;
    display:flex;
    flex-direction:row;;
    border-radius:5px;
    overflow:visible;
  }

.doily{
  width:300px;
  height:300px;
  position:absolute;
  background-image:url('/textures/doily.png');
  background-size:300px 300px;
  background-repeat: no-repeat;
    -webkit-animation:spin 35s linear infinite;
    -moz-animation:spin 35s linear infinite;
    animation:spin 35s linear infinite;
    z-index:0;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
#doilyone{
  margin-left:-10%;
  margin-top:-13%;
  z-index:0;
}
#doilytwo{
  scale:0.65;
  margin-left:3%;
  margin-top:-15%;
filter: sepia(40%) brightness(90%) hue-rotate(25deg) saturate(200%);
}
#doilythree{
  scale:0.8;
  margin-left:-12%;
  margin-top:24%;
  filter: sepia(40%) brightness(90%) hue-rotate(-25deg) saturate(200%);
  }

  #main{
    z-index:2;
    margin: 0;
    width:100%;
    height:100%;
    background:url('textures/tornpaper/brownpaper.png');
    background-repeat:no-repeat;
    background-size:669px 994px;
    overflow:visible;
    border-radius:5px;
  }

  #leftcolumn{
    width:24%;
    margin-right:1%;
    
  }
  #title{
    font-style:italic;
  }

    #blurb{
    border-radius:5px;
    margin:2% 0% 6% 4%;
    height:15%;
    width:50%;
    position:absolute;
    font-size:0.9em;
    background:url('textures/tornpaper/tapedgrid.png');
    background-repeat:no-repeat;
    background-size: contain;
    z-index:3;
    transform: rotate(-5deg);
  }
  #blurb p{
    margin: 8% 30% 0% 15%;
    padding-top:10px;
  }

  #recipes{
    position:absolute;
    width:18%;
    height:69%;
    margin: 25% 0% 0% 2%;

  }

  .tree{
    width:100%;
    min-height:30%;
    background:url('textures/tornpaper/linedtoned.png');
    background-repeat:no-repeat;
    background-size: cover;
    background-position: 0px -30px;
    margin-top:-25%;
  }
.tree li{
  list-style-type:none;
  margin-left:7%;
}
.tree ul li{
  list-style-type: "✶";
  margin-left:-20%;
  padding-left:5px;
  color: rgb(153, 75, 2);
  cursor: pointer;
}
.tree summary{
  padding-top:7%;
  padding-bottom:2%;
}
/* .tree {
  --spacing: 1.5rem;
  --radius: 5px;
  margin-left:-20px;
  margin-top:1%;
}

.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 2px;
}

.tree ul li {
  border-left: 2px solid #ddd;
  padding-top:7px;
  margin-left:-10px;
  font-size: 1em;
  cursor:pointer;
}
.tree ul li ul li{
  padding-left:22%;
}

.tree ul li:last-child {
  border-color: transparent;
  margin-bottom:5px;
}

.tree ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -3.5);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary{
  font-size:0.8em;
  padding-top:4px;
  margin-left:-10px;
  font-style: italic;
}
 */



  #exit{
    height:13%;
    width:30%;
    position:absolute;
    margin-left:50%;
    margin-top:-5%;
    text-align:center;
    background:url("textures/tornpaper/tornbrown.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
  }
  #exit a{
      font-family:"Marker", 'Courier New', Courier, monospace;
    font-size:1em;
    text-decoration:none;
    color:rgb(97, 23, 5);
  }
  #audiobox{
    margin: 13% 0% 5% 15%;
    width:70%;
  }
  .topbtn{
    background:rgb(224, 207, 157);
    border:none;
    box-shadow:none;
  }
  marquee{
    font-family:"Marker", 'Courier New', Courier, monospace;
    font-size:1em;
    text-decoration:none;
    color:rgb(143, 66, 47);
  }


  #rightcolumn{
    position:absolute;
    border-radius:5px;
    width:63%;
    height:80%;
    margin-top:10%;
    margin-left:25%;
    padding:5% 10% 10% 10px;
    overflow-y:visible;
    
  }


 h2{
    color:rgb(0, 0, 0);
    font-family:"Escargoth";
    font-size:3em;
    margin:0;
    margin-top:-5%;
    margin-left:25%;
    margin-right:35%;
    padding-left: 1em;
    text-indent: -0.5em;
 
  }
  .blurb{
      background:url("textures/tornpaper/plainstrip.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    padding: 7% 5% 7% 5%;
    text-indent:1.5em;
    color:rgb(0, 0, 0);
    margin-top:2%;
  }

  #rightcolumn ul{
    padding-top:5px;
    list-style-type:"✧";
    margin-left:-7%;
    margin-right:7%;
  }
 
  #rightcolumn li{
    color:black;
    margin-bottom:2.5%;
  }
  #rightcolumn li p{
    color:rgb(148, 4, 4);
    display:inline;
    margin-left:5px;
    font-style:italic;
  }
  .aside{
    padding:0px;
    margin:0px;
    margin-top:1%;
    font-size:0.7em;
    font-style:italic;
  }
  .top{
    margin-top:1%;
    margin-bottom:-0.5%;
  }
  .bottom{
    margin-top:-2%;
    margin-bottom: 1.5%;
  }

  .ingredients{
    width:60%;
    height:auto;
    min-height:250px;
    background:url("textures/tornpaper/foldedtaped.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    margin: -3% 0% 0% -4%;
    padding:7% 7% 10% 10%;
    
  }
  

.instructions{
  background:url("textures/tornpaper/plainblock.png");
  background-size: 100% 100%;
  background-repeat:no-repeat;
  margin-top:5%;
  max-width:99%;
  padding:7% 7% 10% 0%;
}
.instructions li{
  margin-left:1%;
  padding:10px 0px 0px 10px;
}