body {
  background-color: #112703;
      background-image: url(/assets/BG/bg_left.png), url(/assets/BG/bg_right.png), url(/assets/BG/anna-gru-omL9Q8B2YCI-unsplash.png);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat;
  background-size: fit,cover;
  background-position: left, right, center;
  color: #7F889E;
}

@media(max-width:800px) {
  body {
  background-color: #112703;
      background-image:  url(/assets/BG/anna-gru-omL9Q8B2YCI-unsplash.png);
  background-attachment: ixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
 
  scrollbar-color: #89523a #0e0d0e;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #0e0d0e;
}

*::-webkit-scrollbar-thumb {
  background-color: #89523a;
  border-radius: 10px;
  border: 1px solid #89523a;
}


/* ---------------------------------------------containers-------------------------------------------------------------- */
main {
  background: url(/assets/BG/marb.png);
}


.box,
.aside,
.half,
.fit {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #d6dedf;
  background: url(/assets/BG/bgbgbgbgbg.png);

  box-shadow: #000 5px 0px 5px;

}

main,
.box,
.aside,
.half,
.fit,
.imagenav,
h1,
h2,
#statuscafe {
  border: 9px solid transparent;
  border-image: url('/assets/BG/border1.png') 6 round;
}

/*----------------------------------------------------------------link styling---------------------------------------------------------------------------------*/


a:visited {
  color: #8f7b68;


}

a:hover {
  color: #9cdf66;
  text-shadow: 1px 1px #000;
  animation: none;

}

a:link {
  text-decoration: none;
  color: #8f7b68;

  font-size: 16px;
  font-family: 'DejaVu', serif;
  text-shadow: #35134b 1px 1px 0px, #ffe0d6 -1px -1px 0px;

}

h1,
h2,
h3 {
  text-transform: uppercase;
  font-weight: bold;
  color: #b36c4d;
  margin: 10px 0px 10px;
  text-shadow: #01031ac2 1px 1px 0px, #ffde72 -1px -1px 0px;
  padding: 5px;
  background: url(/assets/BG/marb.png);
}
h1 {
 font-family: 'Fullmoon', serif;
  font-size: 30px;
  margin: -20px -9px 5px;
}
h2 {
  font-size: 20px;
  margin: -20px -9px 5px;
}
h2,
h3 {
 font-family: 'DejaVu', serif;
  text-align: left;
}





/*---------------------------------------------------------------assorted other stuff--------------------------------------------------------------------------------*/
/*updates, status cafe*/
#statuscafe {
  padding: .5em;

  margin: 1em 1em 1em 1em;

}

#statuscafe-username {
  margin-bottom: .5em;
}

#statuscafe-content {
  margin: 1em 1em 1em 1em;
}
.imagenav {

  height: 180px;
  width: 120px;
  text-align: center;
  background-image: url(/assets/BG/marb.png);
  margin: 5px;
}
.imagenav:hover {

   background-image: url(/assets/BG/pic.gif);
   background-position: left;
}
.iconnav img {
height: 90px;

}
/*holiday!!!!!!*/

.xmaslights {

  margin: 0 auto;
  border-top: 22px solid;
  border-image: url(/assets/holiday/christmas_dfgfgd.gif) 30 round;

}

.crimmylights {
  width: 100%;
  margin: 0 auto;
  border-top: 22px solid;
  border-image: url(/assets/holiday/christmas_blinkinglights.gif) 30 round;

}




main ul {
  margin: 5px 60px;

}

main li {
  background: #00000020;
  list-style-type: square;

  margin-bottom: 6px;
  margin: 5px 0px 5px 10px;
  padding: 10px;
}

li a:link {
  font-size: 20px;
}


#more {display: none;}

iframe {
        border: none;
    }
  
  .navframe {
    width:100%;
    height:730px; 
    overflow: hidden;
    }
  
  * {
    box-sizing: border-box;
  }
  


body {
 
  padding: 0;
  margin: 0;
}


/* ---------------------------------------------containers-------------------------------------------------------------- */

#container {
    max-width: 1000px;
    margin: 70px auto;
    
  }
  
  
  main {
    width: 1000px;
    flex: 2;
    padding: 5px;
    order: 2;
    display: flex;
    flex-wrap: wrap; 
    align-content: flex-start;
    align-items:center;
    justify-content: space-between;
  }
  
  /*general box*/
  .box {
    width: 100%;
    margin: 5px;
    padding: 2px; 
  }
  
  
  
  /*scrolling half size box*/
  .half {
    margin: 5px;
    height: 360px;
    width: 48%;
    }
  
  .halfscroll {
    overflow-y: scroll;
    height: 300px;
  
    padding: 2px;
  }
  
  .fit {
    margin: 5px;
    height: fit-content;
    width: 48%;
    }

  #flex {
    display: flex;
    flex-wrap: wrap; 
  }
  
 
  
  #leftSidebar {
    order: 1;
    margin: 10px;
  }
  
  
  aside {
   
    max-width: 300px;
    
    flex: 1;
    padding: 2px;
  }
  

/*homepage icon navigation */
.iconnav {
    width: 100%;
    display: flex; 
    flex-direction: row;  
    justify-content: center; 
    flex-wrap: wrap;
    padding: 10px; 
    margin: 10px; 
    height: auto;



}

/*------------------------------------------------------ez gallery--------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------index---------------------------------------------------------------------------------*/



/*--------------------------------------------------------------accessability: motion + gifs? eventually-------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

  body,
  #indexlogo,
  #indexstart,
  .speen:hover {
    /* Stop the animation */
    animation: none;
    transition: none;
    transform: none;
  }


}

/*--------------------------------------------------------------phones and small displays-------------------------------------------------------------------------------*/

@media(max-width:800px) {
  
  .container {
    width: 100%;
    margin-top: 0;

  }

  

  .boxes {
    min-width: 100%;
  }

  /*change for regular non homepage pages*/
  .sidebars {
    order: 2;
  }

  .sidebars li {
    list-style-type: none;

    margin: 20px;
    font-size: 20px;
    border-bottom: 5px double #DA8D52;

    background: #181D2A85;
  }
}

@media(max-width:800px) {

  .grow {
    transition: all 0.4s ease-in-out;
    width: 100%;
    background: none;
  }

  .container {
    width: 90%;
    margin-top: 0;

  }

  .iconnav {
    height: auto;}
    
  .boxes,.half {
    min-width: 100%;
  }
  
  /* --------------------------------- fix order of boxes ---------------------------------------------------------------- */
  main {
    order: 1;
  }

 #leftSidebar {
    order: 2; }
    
  aside {
     min-width: 90%;
  }
}