@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PoiretOne-Regular.ttf);
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; /* cyrillic */
}

* { padding: 0; margin: 0; }

body, html
{
	overflow: hidden;
	font-size: 16px;
}
body
{
	position: relative;
}
section[texts] {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 512px;
	height: 100%;
	
	font-family: "Poiret One", arial, verdana, sans-serif;			
	font-weight: 400;
	font-size: 14px;
	color: gray;	
	background-color: transparent;
	display: block;
}

section[point] {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: -1;
	animation: rotate 5s linear 2s infinite;	
}  
#titles
{
	position: absolute;
	width: 512px;
	height: 100%;
	left: -256px;
	font-size: 1.5rem;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	   -moz-transform-origin: 50% 100%;
	    -ms-transform-origin: 50% 100%;
	        transform-origin: 50% 100%;
	-webkit-transform:scale(100%);
	   -moz-transform:scale(100%);
	    -ms-transform:scale(100%);
	        transform:scale(100%);
	        
	z-index: 0;        
}
#titles p
{
	margin: 0.8em 0;
	font-size: 0.8em;
}
#titles p.center
{
	text-align: center;
}
#titles p[author] {
	color: #000000;
	font-size: 1.2em;
	margin-top: 1240px;
}
#titles a
{
	color: #a0a0a0;
	text-decoration: underline;
}
#titlecontent
{
	position: absolute;
	-webkit-animation: scroll 20s linear 10s infinite;
	   -moz-animation: scroll 20s linear 10s infinite;
	        animation: scroll 40s linear 10s infinite;
}
div#point {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 4px;
	height: 4px;
	background-color: lightgrey;
	border-radius: 50%;
	animation: rotate 5s linear 2s infinite;
}

/* animations */
@-webkit-keyframes scroll {
	0% { top: 0%; }
	100% { top: -1050%; }
}
@-moz-keyframes scroll {
	0% { top: 0%; }
	100% { top: -1050%; }
}
@keyframes scroll {
	0% { top: 0%; }
	100% { top: -1050%; }
}
@-webkit-keyframes rotate {
  	0% {  transform: rotate(0deg); }
	100% { transform: rotate(360deg);}
}
@-moz-keyframes rotate {
  	0% {  transform: rotate(0deg); }
	100% { transform: rotate(360deg);}
}	
@keyframes rotate {
  	0% {  transform: rotate(0deg); }
	100% { transform: rotate(360deg);}
}