@font-face { font-family: 'ronda'; src: url('https://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf');}
@font-face { font-family: pixel; src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);}     
      
      
body {
    background:#fff url() fixed;
    font-family: Courier New, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 14px;
    text-shadow: 0px 0px 1px #b3b3b3;
    color:#000;
    letter-spacing: 1px;
}


b {
  color:#636363;
}
        	
a:link, a:active, a:visited{
  color:#ff93c7;
  text-decoration: none;
  
   -webkit-transition: all 0.0s ease-out;
   -moz-transition: all 0.0s ease-out;
   transition: all 0.0s ease-out;
}
    
a:hover{
  color:#dc68ff;
  background: #000;
  
} 
  
  
::-webkit-scrollbar-thumb {
  background-color: #A7FCEF;  
  border-radius: 0px;
  border:0px solid #999;
}

::-webkit-scrollbar {
  width: 7px; 
  height: 4px; 
  background: transparent;
}
   

#wrapper {
    max-width: 70%;
    margin: 2em auto;
}           

#frame {
  max-width: 600px;
    float: left;
    margin: 0 auto;
    margin-bottom:100px;
    }

#guts {
    background: #fff;
    margin: 5px 0 0 0px;
    border:1px dotted #000;
    width: 100%;
    margin-bottom: 20px;
    background:url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);
    border:1px solid rgba(0,0,0,0.3);
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    z-index:999999;
    box-shadow:rgba(0,0,0,0.07)5px 5px;
    }

#guts .sp2{
  width: 100%;
  height: 14px;
  margin-top: -10px;
  overflow:hidden;
  background:url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);
}

        
.title {
  background:#D6FFF7;
  color: #555;
  display: inline-block;
  padding: 5px 5px 3px 10px;
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 3px;
  font-weight: bold;
  }
  
.title2 {
  background:#D6FFF7;
  color: #555;
  padding: 5px 5px 3px 7px;
  margin: 0 0 4px 0;
  line-height:10px;
  letter-spacing: 3px;
  font-weight: bold;
}

.title3 { /*tab titles*/
  color: #555;
  background: #ffe7d6;
  padding: 5px 5px 3px 7px;
  margin: 0 0 4px 0;
  line-height:10px;
  letter-spacing: 3px;
  font-weight: bold;
}

.stuff {
  margin: 5px 0 0 0;
  padding: 5px 10px 5px 10px;
}

#audio {
  margin: 10px 0 5px 0; 
}

#navigation {
  margin: 10px 0 10px 0;
}

#navigation a{
  padding: 4px 5px 1px 5px;
  margin: 0px 3px 20px 0px;
  background: #ff93c7;
  color: #fff;
  border: 1px solid #ff93c7;
  line-height: 25px;
}

#navigation a:hover{
  background: none;
  color: #ff93c7;
}

#photos img{
  max-width: 100%;
  margin: 3px 0 3px 0;
}

#side {
    float: right;
    margin-top: 5px;
    }


#tab{
  width: 100%;
}
  
#tab .sp{
  width: 100%;
  height: 14px;
  margin-top: -10px;
  overflow:hidden;
  background:url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);
}

#tab .nb{
  width: 100%;
  margin-bottom: 20px;
  background:url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);
  /*
  background:url(https://31.media.tumblr.com/ef58e337751a7b3e09dd1ffa7cc7d88a/tumblr_inline_nc6czp1fT51rh7826.png);
  */
  border:1px solid rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  z-index:999999;
  box-shadow:rgba(0,0,0,0.07)5px 5px;
}


@media screen and (width >= 550px) {
  #wrapper {
    display: flex;
    max-width: 400px;
  }

  #guts {
    min-width: 400px;
    max-width: 400px;
    flex: 1;
  }
  
  #frame{
    max-width: 400px;
    flex: 2;
  }
  
  #side {
    width: 100%;
    display: flex;
    flex: 3;
  }

  #tab {
    flex: 4;
  }
  
  #tab .sp {
    display: flex;
    width: 110%;
    flex: 5;
  }
}



@media only screen and (min-width: 550px) {
  
  #wrapper {
    max-width: 600px;
    padding: 0 10% 0 10%;
    flex: 1;
  }
  
  #guts {
    min-width: 400px;
    max-width: 400px;
    flex: 2;
  }
  
  #frame{
    max-width: 400px;
    flex: 3;
  }
  
  #side {
    width: 120px;
  }

  #tab .sp {
    display: flex;
    width: 100%;
    flex: 4;
  }


}

html {
  scroll-behavior: smooth;
}

#toTop {
  padding: 4px 5px 1px 5px;
  margin: 0px 3px 20px 0px;
  background: #ff93c7;
  color: #fff;
  border: 1px solid #ff93c7;
  line-height: 25px;
}

#toTop:hover{
  background: none;
  color: #ff93c7;
}

#info,#click{
    padding:1px;
    display: block;
}
 
#click{
    margin-bottom:4px;
}
 
#click:hover{
    cursor:help;
}
 
#click:active{
  
}
 
#info{
    padding:1px 0 10px 0;
    display:none;
}