/* ### Notebook ### */

.r-notebook {
   background: rgba(255,255,255,0.9);
   left: 50%;
   top: 50%;
   box-shadow: 0px 0px 2px 0px #888;
   width: 200px;
   height: 344px;
}

.r-notebook::before {
   content: '';
   position: absolute;
   margin-left: 30px;
   height: inherit;
   width: 2px;
   background: rgba(255,0,0,0.4);
}

.r-notebook-lines {
   display: inline-block;
   margin-top: 20px;
   height: calc(100% - 20px);
   width: 100%;
   font-family:'reenie_beanie';
   background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
}

.r-notebook-text {
   position: relative;
   top: -2px;
   left: 10px;
   margin-left: 30px;
   bottom: 10px;
   right: 10px;
   line-height: 25px;
   font-size: 25px;
   overflow: hidden;
   outline: none;
}

.r-notebook-title {
   font-size: 25px;
   font-weight: bold;
   text-align: center;
   position: relative;
   margin-left: 40px;
   top: -12px;
   overflow: hidden;
   white-space: nowrap;
}

.r-notebook-holes {
   position: relative;
   left: 7px;
   height: 15px;
   width: 15px;
   background: inherit;
   border-radius: 50%;
   box-shadow: inset 0px 0px 2px 0px #888;
}

.r-notebook-top {
   top: calc(-88% - 15px);
}

.r-notebook-middle {
   top: calc(-50% - 12px);
}

.r-notebook-bottom {
   top: calc(-17% - 17px);
}