@font-face {
  font-family:myhandwriting;
  src: url(/fonts/myhandwriting.ttf);
}

@media (max-width : 1920px){
  /* For desktop */
  #pencil {
  top:50vh;
  right: 0%;
  rotate:-250deg;
  }
}

@media (max-width : 1000px){
  /* For desktop */
  #pencil {
  top:50vh;
  right: -12%;
  rotate:-260deg;
  }
}

@media (max-width:750px) {
  /* For mobile phones: */
  #pencil {
  top:50vh;
  right: -120px;
  rotate:90deg;
  }
}

::selection {
  background: rgba(255,224,102,0.5);
}

body {
  background-color:white;
  background-image:url(/diary/flowersstitch.gif);
  font-family:'myhandwriting', courier, times;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height:20px;
}

h1 {
  text-align: center;
  margin-top:1vh;
  margin-bottom:-50px;
}

#paper {
  color: #54575c;
  background-image:url(/diary/whitelinedpaper.png);
  max-width:800px;
  margin: 0 auto 0 auto;
  border: 1px solid #888888;
  box-shadow: 0px 10px 8px #888888;
}

#pencil {
  position: fixed;
}

#content {
  margin-left:40px;
  margin-right:40px;
  margin-top:0px;
  border-width: 0px 1px 0px 3px;
  border-color: #ed86a4;
  border-style: none solid none double;
  padding:5px;
  text-align: justify;
  text-justify: inter-word;
}

#align {
  margin-top:-3px;
}

h2{
  font-variant:small-caps;
  font-size: 16px;
  line-height:20px;
  font-weight:bold;
  margin-bottom:20px;
  margin-top:20px;
}

h3 {
  font-size: 16px;
  line-height:20px;
  font-style:italic;
  margin-bottom:0px;
  margin-top:0px;
}

p {
  margin-bottom:20px;
  margin-top:0px;
  text-indent:5%;
}

details {
  font-size: 16px;
  line-height:20px;
  margin-bottom:20px;
  margin-top:0px;
}

summary {
  font-variant:small-caps;
  font-size: 16px;
  line-height:20px;
  font-weight:bold;
  margin-bottom:20px;
  margin-top:0px;
}

summary:hover {
  background: rgba(255,224,102,0.5);
}
  
/** Art + Photo Gallery **/

.gallery {
  padding: 0 20px 0px 20px;
  float: left;
  width: 17%;
}

div.image {
  display:inline;
  overflow:hidden;
}

.image img {
  width:100%;
  height: auto;
  box-shadow: 0px 0px 8px #333333;
}

.image img {
  width:100%;
  height: auto;
  box-shadow: 0px 0px 8px #333333;
}

.transparent img {
  width:100%;
  height: auto;
  box-shadow: none;
}

.image img:hover {
  animation:picrotate 1s;
}

@keyframes picrotate {
  0% {rotate: 0deg;}
  33% {rotate:10deg;}
  66% {rotate:-10deg;}
  100% {rotate: 0deg;}
}

.imgdescription {
  padding: 5px;
  text-align: center;
  box-shadow: 0px 0px 8px rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.5);
}

/**force elements to next line**/
.nextline {
  clear:both;
}