@charset "UTF-8";

#typewriter {
	position: absolute;
	left: 5px;
	top: 0px;
	background: url("../images/typewriter.png") no-repeat left top;
    width: 91px;
    height: 300px;
    text-align: center;
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

#twletters {
    margin-bottom: 75px;
}

.twletter {
	font-size: 30px;
	padding: 0px;
	margin: 0px;
	height: 34px;
}

#author {
	position: absolute;
	right: 5px;
	top: 0px;
	width: 230px;
	height: 230px;
	background: url("../images/notes/n_1_0.png") no-repeat center;
 	background-size: 100%;
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center; 
	-webkit-justify-content: center;
	justify-content: center;
}

#author > * {
	margin-top: 0px; 
	margin-left: 50px; 
	margin-right: 50px;
	text-align: center;
	letter-spacing: 2px;
	font-style: italic;
}

#author > a {
 	font-size: 150%;
	display: inline-block;
	margin-left: 20px;	
	margin-right: 20px;	
}

#author > a:link {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

#author > a:visited {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

#author > a:hover {
    color: black;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold; 
}

#author > a:active {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

 
#notes {
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-content: center;
	align-content: center;
}

.note {
	background-repeat: no-repeat;
	background-position: center;
 	background-size: 100%;
	min-width: 150px;
	min-height: 150px;
	text-align: center;
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center; 
	-webkit-justify-content: center;
	justify-content: center;
}

.note > a {
 	font-size: 250%;
	display: inline-block;
	margin-left: 20px;	
	margin-right: 20px;	
}

.note > a:link {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

.note > a:visited {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

.note > a:hover {
    color: black;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold; 
}

.note > a:active {
    color: black;
    background-color: transparent;
    text-decoration: none;
}