body {
  background-image: url('res/cocorinibg5.png');
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  color: #1f404d;
}
h1 {font-family: 'Josefin Sans', sans-serif; margin-top: 10px; margin-bottom: 10px}
.back a { font-family: 'Silkscreen', cursive; font-size: 13px; color: #1f404d; text-decoration:none; position: fixed; top: 100px; left: 20px;}


/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #daebed;
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff96e1;
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #fffc9c;
  border-radius: 20px;
}

#rib1 {position: absolute; z-index: -10; top: 0; left: 0; background-image: url('/res/bluerib1.gif'); height: 82px; width: 100%; background-repeat: repeat-x;}
#rib2 {position: absolute; z-index: -10; bottom: 0; left: 0;background-image: url('/res/bluerib2.gif'); height: 82px; width: 100%; background-repeat: repeat-x;}
#cinna img {position: absolute; z-index: 20; bottom: 10px; right: 320px}

#container { 
  background-image: url('res/cocorinibg6.png');
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px; 
  height: 100%; 
  border-left: 3px solid white;
  border-right: 3px solid white;
  padding: 30px;
  padding-top: 0;
  padding-bottom: 20px;
  }

#header {
  margin:10px;font-family: 'Gochi Hand', cursive;
  font-size: 60px;
 order: 1;
 position: relative; 
 top: -50px;
 left: -30px;
 z-index: 20;transform: rotate(-21deg);

}

#box {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  width: 700px;
  height: 700px;
  background-color: white;
  border-radius: 65px;
  padding: 40px;
  order: 2;
}

.diary {
  width: 700px;
  height: 700px;
  overflow-y: auto;
  border: 1px solid #fff;
} 

.dia {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  width: 600px;
  height: auto;
  background-color: white;
  padding:20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid  #a5d9f2;
  border-radius: 0 0 25px 25px;
}

.date {
  position: fixed; 
  top: 0;
  left: 0;
  width: 610px;
  padding: 15px;
  background: #a5d9f2;
  color: white;
  text-align: right;
  letter-spacing: 0.2em;
}

.entry {
  margin-top: 60px;
}

.mood {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  width: 550px;
  height: auto;
  padding: 20px;
  border: 1px solid  #a5d9f2;
  border-bottom: 25px solid  #a5d9f2;
  border-radius: 0 0 25px 25px;
  font-size: 13px;
}

.wi {
  color:  #4cb3e5;
  display: inline-block;
}