@font-face {
    font-family: 'Rainstorms in July';
    src: url('http://rainstormsinjuly.co/Rainstorms in July.ttf') format('truetype');
}

@font-face {
    font-family: 'morris_romanbold';
    src: url('morrisromanblack-webfont.eot');
    src: url('morrisromanblack-webfont.eot?#iefix') format('embedded-opentype'),
         url('morrisromanblack-webfont.woff2') format('woff2'),
         url('morrisromanblack-webfont.woff') format('woff'),
         url('morrisromanblack-webfont.ttf') format('truetype'),
         url('morrisromanblack-webfont.svg#morris_romanbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'chocolatecoveredraindropsMd';
    src: url('chocolate_covered_raindrops-webfont.woff2') format('woff2'),
         url('chocolate_covered_raindrops-webfont.woff') format('woff'),
         url('chocolate_covered_raindrops-webfont.ttf') format('truetype'),
         url('chocolate_covered_raindrops-webfont.svg#chocolatecoveredraindropsMd') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
  background: url('green_cup.png');
  color: black;
  font-family: 'Rainstorms in July';
}


.hamha {
  background: #000000 repeat url('large2.jpg') top center;
  color: black;
  font-family: 'chocolatecoveredraindropsMd';
  font-size:36px;
}

.hamha a {
  color: #990033;}


a {
  color: #394A3C;
  text-decoration: none;
  transition: all .7s linear; }
  
a:hover {
  opacity: .6;}
  
#navigation {
padding-top: 15.5em;
font-size:28px; }

.separator {
  display: inline; }

.writing {white-space:pre-line; text-align:justify; padding-top:10px; padding-bottom:40px; font-size:23px;}
  
.hamhamwriting {white-space:pre-line; text-align: justify; padding-top: 5px; padding-bottom: 10px; font-size: 36px;} 

.lunawriting {white-space:pre-line; text-align:justify; padding-top:10px; padding-bottom:40px; font-size:26px;}

.chapterblack { background: url('http://rainstormsinjuly.neocities.org/concrete_seamless_edit2.png');color:#C7C7C7; }
.chapterblack .writing { white-space: pre-wrap; }
.chapterblack a { color: #C1C1C1; }
#sky {position: relative;
  top: -28px; }
  #rosa {
    position: relative;
    top: -56px; }
.grayscale { filter:grayscale(0%); }
.grayscale:hover {filter:grayscale(100%);}

h1 {font-size: 27px; text-align:center;}

.content {padding-top: 30px; width: 70%; margin:0 auto}

.greendrops {white-space:pre-line; text-align:justify; padding: 40px 20% 60px 5%; font-size:21px}

#shortworks {width:85%;margin:0 auto 30px auto;text-align: center;}

.short {
  font-size: 22px;
  display: inline-table;
  margin-bottom: 5px;
  width:380px;
}

#novels { width: 70%; margin: 0 auto 30px auto;font-size:22px;text-align:center; }

#about,#credit {width:70%;margin:0 auto;}

.jingle {
opacity: 0%;
position: fixed;
right: 30px;
bottom: 20px;
transition: all .7s linear; }
.jingle:hover {
opacity: 100%; }
.jingle a:hover {
opacity: 100%; }

@media screen and (max-width : 600px) {
.content {padding:30px 10px 40px 10px;width:auto;}
.greendrops {padding: 40px 10px 60px 10px;}
.short {width: 100%;}
#shortworks, #novels, #about, #credit {
width: auto;
  padding: 0 10px; }
.separator {display: none;}
#navigation {
padding-top: 1em; }
  #navigation a {
    display: block;
  }
}