/**
	Stylesheet for kardash.net by Eugene Kardash
*/
html {background-color: #000; font-smooth:always; -webkit-font-smoothing: antialiased; width:100%; height:100%; color: #ddd; overflow-y: hidden; overflow-x: hidden;
font-family: sans-serif;}
a,a:visited { color: white; text-decoration: none; }
a:hover { color: #c7c7c7; }

section { margin-bottom: 10%; clear:both; }
main {
	height: 100%;
	width: 100%;
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	font-family: 'Quicksand', 'Avenir', sans-serif;
	line-height: 1.6rem;
}

@font-face {
	font-family: 'Avenir';
	src: url('fonts/Avenir/Avenir-Light.eot');
	src: url('fonts/Avenir/Avenir-Light.eot?#iefix') format('embedded-opentype'),
		url('fonts/Avenir/Avenir-Light.woff2') format('woff2'),
		url('fonts/Avenir/Avenir-Light.woff') format('woff'),
		url('fonts/Avenir/Avenir-Light.ttf') format('truetype'),
		url('fonts/Avenir/Avenir-Light.svg#Avenir-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'AvenirHeavy';
	src: url('fonts/Avenir/Avenir-Heavy.eot');
	src: url('fonts/Avenir/Avenir-Heavy.eot?#iefix') format('embedded-opentype'),
		url('fonts/Avenir/Avenir-Heavy.woff2') format('woff2'),
		url('fonts/Avenir/Avenir-Heavy.woff') format('woff'),
		url('fonts/Avenir/Avenir-Heavy.ttf') format('truetype'),
		url('fonts/Avenir/Avenir-Heavy.svg#Avenir-Heavy') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'BebasNeue';
	src: url('fonts/BebasNeue.eot');
	src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
		url('fonts/BebasNeue.woff2') format('woff2'),
		url('fonts/BebasNeue.woff') format('woff'),
		url('fonts/BebasNeue.ttf') format('truetype'),
		url('fonts/BebasNeue.svg#BebasNeue') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Oswald';
	src: url('fonts/Oswald-Bold.eot');
	src: url('fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/Oswald-Bold.woff2') format('woff2'),
		url('fonts/Oswald-Bold.woff') format('woff'),
		url('fonts/Oswald-Bold.ttf') format('truetype'),
		url('fonts/Oswald-Bold.svg#Oswald-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

h1, h2, h3, h4, h5 { font-family: BebasNeue, Oswald; font-weight: normal; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }
h5 { font-size: 0.7em; }
div { font-size: 0.9rem; line-height: 1.2em; margin: 1.2em 0; }
.clear {clear: both}
.black {color: #000}
.white {color: #FFF}
.gray {color:gray;}
.boo { text-decoration: line-through; }

.section #stars-container {position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events:none; min-width: 960px; min-height: 610px; overflow: hidden}
.section #stars-container #bg {position: absolute; z-index: 1; width: 1600px; height: 1200px; top: 0; left: 50%; margin-left: -800px}
.section #stars-container #cloud {position: absolute; z-index: 5; top: 170px; left: 50%; margin-left: -130px}
.section #stars-container #stars-tiny {position: absolute; width: 100%; height: 100%; z-index: 2}
.section #stars-container #stars-mid {position: absolute; width: 100%; height: 100%; z-index: 3}
.section #stars-container #stars-big {position: absolute; width: 100%; height: 100%; z-index: 4}
.section #stars-container .star {position: absolute; z-index: 5}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    html {zoom:0.8; max-width: 768px; -webkit-touch-callout: none}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
    html {zoom:0.3; max-width: 1024px; -webkit-touch-callout: none}
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait) {
    html {zoom:0.5;  -webkit-text-size-adjust: 50%; -webkit-touch-callout: none}
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {
    html {zoom:.1;  -webkit-text-size-adjust: 10%; -webkit-touch-callout: none}
}
