/* ------------------------------ HELLO ------------------------------ */
/* ------------------------------ HELLO ------------------------------ */
/* ------------------------------ HELLO ------------------------------ */
/* --------------------------- THIS IS FOR --------------------------- */
/* ------------------------- COLORLUNE  2.0! ------------------------- */
/* ------------------------ NORMAL SCREEN ED. ------------------------ */
/* ----------------------------- Thanks! ----------------------------- */
/* ------------------------------ HELLO ------------------------------ */
/* ------------------------------ HELLO ------------------------------ */
/* ------------------------------ HELLO ------------------------------ */

  body {
    font-family: Inter, sans-serif;
    font-size: 1em; text-align: justify; text-justify: inter-word;
    color: #332532;
    background-color: #332532;
    padding: 0.5%; margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  
  h1 {
    padding: 0px; margin: 0px;
    font-family: 'Rock Salt', cursive;
    font-size: 60px;
    color: rgba(255, 255, 255, 0.5);
    background-image: -webkit-linear-gradient(92deg, red, yellow);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  -webkit-animation: hue 60s infinite linear;
    text-shadow: 0px 0px 6px rgba(150, 150, 150, 0.3);
  }
    
  h1 { color: #332532; font-family: Rock Salt; padding: 0; margin: 0; }
  h2, h3 { color: #332532; font-family: Permanent Marker; padding: 0; margin: 0; }
    
  A:link { text-decoration: none; color:#332532; }
  A:visited { text-decoration: none; color:#332532; }
  A:active { text-decoration: none; color:#332532; }
  A:hover { text-decoration: line-through; color:#332532; }
  #short:hover, #long:hover { 
    background-color: #a49a87cc !important; 
    text-decoration: line-through; 
    color:#332532;
    }
  
  #wrapper {
    background-color: #644d52;
    background-image: url("/colorlune/tartan2.png");
    width: 100%; height: 100%;
    padding: 0.5%; margin: 0;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
  }

  #mob { display: none; }
    
  #navigation {
    background-color: #644d52;
    width: 20%; height: 100%;
    padding: 0.5%; margin: 0;
    text-align: center;
    overflow-x: hidden; overflow-y: auto;
    border: #332532 3px solid;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 5;
    float: left;
  }
    
  #navigation h2, #navigation h3 {
    text-align: left !important;
  }
    
  #short {
    display: inline-block;
    background-color: #a49a87cc;
    width: 48%; height: auto;
    padding: 0.5em; margin: 0 0 0.5em 0;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
    
  #long {
    display: inline-block;
    background-color: #a49a87cc;
    width: 99%; height: auto;
    padding: 0.5em; margin: 0 0 0.5em 0;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
    
  #title {
    display: inline-block;
    background-color: #a49a87cc;
    width: 120%; height: auto;
    padding: 0 0 0 1.5em; margin: 0 0 0.5em -1em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
    
  #content {
    background-color: transparent;
    width: 79%; height: 100%;
    padding: 0.5%; margin: 0 0.5% 0 0;
    text-align: center;
    overflow-x: hidden; overflow-y: scroll;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: right;
  }
    
  #mainbox {
    background-color: #a49a87cc;
    width: 70%; height: auto;
    padding: 0.5%; margin: 0;
    border: 1px #332532 solid;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: left;
  }
    
  #mainbox img {
    width: 100px; height: 100px;
    padding: 0; margin: 0 0.5em 0.5em 0.5em;
    float: left;
  }
    
  #yapper {
    background-color: #ffffff33;
    width: 100%; height: 150px;
    padding: 0.5em; margin: 0;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: auto;
  }
    
  #imgbox {
    display: inline-block;
    background-color: #a49a87cc;
    padding: 0.5%; margin: 0.5%;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
  }
    
  #imgbox img {
    width: 300px; height: 300px;
    padding: 0; margin: 0;
  }

  #minibox {
    display: inline-block;
    background-color: #a49a87cc;
    padding: 0.5%; margin: 0.5%;
    border-radius: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
  }
  
  #minibox img {
    width: 100px; height: 100px;
    padding: 0; margin: 0;
  }