html {
	font-family: Moje;
    color: white;
}
header {
	width: 100%;
	height: 100px;
	background-color:#FF9797;
	background-size: contain;
	padding-bottom: 30px;
}
@font-face {
	font-family: "Cute";
	src: local ('Cute');
	src: url('../fonts/skolacekCE.woff') format('woff');
}
@font-face {
	font-family: "Moje";
	src: local ('Moje');
	src: url('../fonts/moje.woff') format('woff');
}
body {
	background-color:#CCCCCC;
}

#top {
	color: white;
	font-size: 60px;
	text-align: right;
	padding-top: 20px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 5%;
	margin-top: 0;
	float:right;
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
	box-sizing: border-box;
	width: 90%; 
}
#menu {
    display:inline-block;
    text-align:center;
    width: 100%;
    padding-top: 10px;
    padding-bottom:10px;
    text-decoration: none;
	background: linear-gradient(#FF9797, transparent);
	background-size: contain;
    color: white;
}
#menu li {
    box-sizing: border-box;
    display: inline-block;
    width: 49%;
    text-align:center;
    text-decoration: none;
    color: white;
    font-size: 40px;
    text-shadow: 0.7px 0 0 black, -0.7px 0 0 black, 0 0.7px 0 black, 0 -0.7px 0 black, 0.7px 0.7px black, -0.7px -0.7px 0 black, 0.7px -0.7px 0 black, -0.7px 0.7px 0 black;
}
a {
    text-decoration: none;
    color: white;
}
#david {
	text-decoration: underline;
}
#stories {
    position:relative;
    display: inline-block;
    width: 90%;
    margin-top: 50px;
    padding-left: 5%;
    padding-right: auto;
}
#obrazky {
	display: inline-block;
	width: 59%;
	float: left;
}
#text {
	display: inline-block;
	width: 39%;
	float:right;
}
#storyHeader {
    display: inline-block;
	margin-right: auto;
	font-size: 40px;
	margin-top:0;
}
p {
    display: inline-block;
	margin-right: auto;
	font-size: 30px;
}
footer {
    height: 30px;
}
.big {
	width: 99.6%;
}
.big1 {
    width:49%;
}
.small1 {
    width:24.5%;
}
.big2 {
    width:52.15%;
}
.small2 {
    width:23.2%;
}
.big3 {
    width:68.5%;
}
.small3 {
    width:30.5%;
}
.big4 {
    width:49.5%;
}
.big5 {
    width:24.1%;
}
.small4 {
    width:32%;
}
.big6 {
    width:40.3%;
}
.small6 {
    width:17.9%;
}
@media screen and (max-width:1300px) {
    .storyHeader{
        font-size: 35px;
    }
    p{
        font-size: 25px;
    }
}
@media screen and (max-width:1100px) {

}
@media screen and (max-width:1000px) {
	#top {
		text-align: center;
	}

}
@media screen and (max-width:800px) {
    .storyHeader{
        font-size: 30px;
    }
    p{
        font-size: 20px;
    }
    .big1 {
        width:100%;
    }
    .small1 {
        width:100%;
    }
    .big2 {
        width:100%;
    }
    .small2 {
        width:100%;
    }
    .big3 {
        width:100%;
    }
    .small3 {
        width:100%;
    }
    .big4 {
        width:100%;
    }
    .big5 {
        width:100%;
    }
    .small4 {
        width:100%;
    }
    .big6 {
        width:100%;
    }
    .small6 {
        width:100%;
    }
}
@media screen and (max-width:515px) {
	#top {
		text-align: center;
        font-size:35px
	}
	#menu li {
		width:100%;
		padding-top: 10px;
        font-size:30px;
	}		
	header {
		padding-bottom: 0;
	}
    .storyHeader{
        font-size: 25px;
    }
    p{
        font-size: 15px;
    }
}