@charset "utf-8";
/* CSS Document */

body {
	background:#F9EAFD;
	margin: 0;
	padding: 0;
	color: #000;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}

a:link {
	color:#414958;
	text-decoration: underline; 
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
.Header {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
}
.container {
	width: 97%;
	background: #FFF;
	margin: 0 auto; 
}
.navigate{
	background-color:#F5F9BD;
	margin-top:14px;	
	}
.sidebar {
    height: 550px;
    background: linear-gradient(45deg, #0FFFFF, #A632E4, #E1D92F);
    border-radius: 25px;
    padding-top: 25px;
    width: 190px;
    float: left;
}
.readAndNav{
	border: 2px solid #FF00CC;
	margin: 0px;
	padding: 0px;
}
#readBegin {
  text-align: center;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}
#laveVide{
	background-color: #3300FF;
	float: left; margin-right:14px;
	height: 460px; margin-top:20px;
	width: 355px; opacity:.5; border-radius:36px;
}
#anim{ border-radius:24px;
	animation-name:trej; animation-duration:7s; animation-iteration-count:infinite;	
	}
		@keyframes trej {
    0%   {background-color:red;}
    25%  {background-color:yellow; color:#B548CC;}
    50%  {background-color:blue; color:#CCFF33;}
    75%  {background-color:green; color:#FFD7FF;}
    100% {background-color:red; color:#FFFFC6;}
}
.content {
	padding: 10px 0;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; /
}


	@font-face {
   font-family: Avena;
   src: url(../../webfonts/theReal/theReal.woff);
}
* {
   font-family: Avena;
}
.teraz{
	 position: relative; background-color:#FFFFC6;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.abracad  {
	visibility:hidden;
    width: 550px;
	background-color:#009D9D;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
     position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -259px;
}

.teraz:hover .abracad {
    visibility: visible;
}
button:hover{text-decoration:underline}
#indication{
	text-align: center;
	margin: 0px;
	background-color: #9DFFFF;
	width: 77%;
	margin-right: auto;
	margin-left: auto;
	color: #721D8D;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #BE55A0;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #BE55A0;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #BE55A0;
	animation:inform 4s infinite;
}
@keyframes inform{
0%{color:#721D8D; background-color:#9DFFFF;}25%{color:#007CF9; background-color:#FFA;}50%{color:#F40000; background-color:#CAFFFF;}75%{color:#007CF9; background-color:#FFA;}100%{color:#721D8D; background-color:#9DFFFF;}
	}
input{color:#E800E8; text-align:center; background-color:#FFFFC1;}
#hratka{animation:inform 4s infinite;}
#readNav{
	background-color: #BE55A0;
	width: 87%;
	animation: navig;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	border-radius: 21px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 1px;
	border-right-width: 4px;
	border-bottom-width: 1px;
	border-left-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #662ECF;
	border-right-color: #9DFFFF;
	border-bottom-color: #662ECF;
	border-left-color: #9DFFFF;
}
@keyframes navig{
50%{background-color:#8152CF;}
	}