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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {
    background-color: #ffffff; 
	 }
	page {
	}

	.section {
  	width: 100%;
  	height: 100%;
  	justify-content: center;
  	align-items: center;
	}
	.title {
  	background-image:url(titlemobile.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 50px;
	}
	.drachenfest {
  	background-image:url(drachenfestmobile.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 600px;
	width:100%;
	}
	.zeitderlegenden {
  	background-image:url(zeitderlegendenmobile.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 600px;
	width:100%;
	margin-top: 5px;
	}
	.wyvern {
  	background-image:url(wyvernmobile.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 600px;
	width:100%;
	margin-top: 5px;
	}
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
    background-color: #ffffff; 
	 }
	page {
  	display: flex;
  	flex-wrap: wrap;
	}

	.section {
  	width: 100%;
  	height: 600px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
	}
	.title {
  	background-image:url(titletablet.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 80px;
	width: 100%;
	}
	.drachenfest {
  	background-image:url(drachenfesttablet.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 500px;
	width: 33.3%;
	margin-right: 5px;
	}
	.zeitderlegenden {
  	background-image:url(zeitderlegendentablet.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 500px;
	width: 33.3%;
	margin-right: 5px;
	}
	.wyvern {
  	background-image:url(wyverntablet.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 500px;
	width: 33.3%;
	}
}


/* Desktop Styles */
@media only screen and (min-width: 961px) {
  body {
    background-color: #ffffff; 
	 }
	.page {
    width: 960px;
    margin: 0 auto;
  	}
	.section {
  	width: 100%;
  	height: 600px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
	}
	.title {
  	background-image:url(title.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	height: 100px;
	width: 100%;
	}
	.drachenfest {
  	background-image:url(drachenfest.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	width: 33.3%;
	height: 480px;
	margin-right: 5px;
	}
	.zeitderlegenden {
  	background-image:url(zeitderlegenden.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	width: 33.3%;
	height: 480px;
	margin-right: 5px;
	}
	.wyvern {
  	background-image:url(wyvern.jpg); 
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 100% auto;
  	width: 33.3%;
	height: 480px;
	}
}