@font-face {
font-family: 'Erasur';
src: url('EraserRegular.eot'); /* IE9 Compat Modes */
src: url('EraserRegular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('EraserRegular.woff') format('woff'), /* Modern Browsers */
     url('EraserRegular.ttf')  format('truetype'); /* Safari, Android, iOS */
}


body {
margin: 0px;
padding: 0px;
}
 
#page {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

textarea {
-webkit-overflow-scrolling: touch;
background:url(blackboard.jpg) repeat 0px 0px; 
background-color: #626262;
color: #fff;
height: 100%; 
width:100%; 
outline: none; 
border: 0px transparent solid; 
font-size: 64px; 
line-height: 84px; 
font-family: Erasur, Helvetica, Arial; 
font-weight: lighter; 
text-center; 
vertical-align: middle; 
text-align: center; 
padding-top: 20px; 
padding-left: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
margin: 0px transparent; 
overflow: auto;
z-index: 10;
}

.left {
float: left;
}

#help {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 20px;
padding: 5px 0px;
z-index: 200;
font-family: Erasur, Helvetica, Arial; 
font-size: 26px;
color: #fff;
cursor: pointer;
text-align: center;
z-index: 200
}


#about {
position: absolute;
top: -100px;
right: 0px;
width: 280px;
padding: 10px;
height: 50px;
z-index: 100;
font-family: Erasur, Helvetica, Arial;
font-size: 16px;
line-height: 24px;
color: #fff;
background-color: rgba(50,50,50,0.80);
}

#share {
position: absolute;
bottom: 10px;
left: 10px;
}

#by {
position: absolute;
right: 5px;
top: 34px;
font-size: 12px;
}

a {
color: #fff;
}