@font-face {
    font-family: CaboRounded;
    src: url("Cabo-Rounded-Regular.otf") format("opentype");
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style-type: none;
	outline: none;
	text-decoration: none;
	border-collapse: collapse;
}
body, html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: 'CaboRounded', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	color: white;
	background: black;
	line-height: 20px;
}
a {
	color: white; 
}

#zoom, .cover {
	-webkit-backface-visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
	width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
	vertical-align: bottom;
}
.cover {
	opacity: 1;
	background: -webkit-radial-gradient( circle, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 21, .6 ) ); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient( circle, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 21, .6 ) ); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient( circle, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 21, .6 ) ); /* For Fx 3.6 to 15 */
    background: radial-gradient( circle, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 21, .6 ) ); /* Standard syntax (must be last) */
}

#scroll {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    background: url(scroll.png) no-repeat center 80%;
    animation: shake 4s cubic-bezier(.36,.07,.19,.97) both infinite;
	background-size: 40px;	
	z-index: 1000;
}

#start {
	display:none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('start.jpg');
	background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;	
	z-index: 900;
}

#loader {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	z-index: 1000;
	margin-left: -16px;
	margin-top: -16px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
  
@keyframes shake {
	32%, 48% 		{ transform: translate3d(0, -2px, 0); }
	34%, 46% 		{ transform: translate3d(0, 4px, 0); }
	36%, 40%, 44% 	{ transform: translate3d(0, -8px, 0); }
	38%, 42% 		{ transform: translate3d(0, 8px, 0); }
}

#gastropolis {
	-webkit-backface-visibility: hidden;
	position: absolute;
	z-index: 900;
	display: none;
	top: 70%;
	width: 100%;
	overflow: visible;
	text-align: center;
}

#gastropolis img {
	object-fit: contain;
	width: 70%;
	max-width: 464px;
}

#imcooked {
	-webkit-backface-visibility: hidden;
	display: none;
	position: absolute;
	top: 90%;
	left: 50%;
	right: 0;
	width: 600px;
	height: 10%;
	margin-left: -300px;
	text-align: center;
	font-size: 20px;
	z-index: 1000;
    padding-top: 30px;
	margin-top: -30px;
}

#imcooked.lookatme {
	animation: lookatme 5s cubic-bezier(.36,.07,.19,.97) both infinite;
	transform: scale(1);
	backface-visibility: hidden;
}
  
@keyframes lookatme {
	0%, 80%, 100% { transform: scale(1); }
	90% { transform: scale(1.2); }
}

#fullscreen {
	display:none;
	position: absolute;
	z-index: 1000;
	width: 36px;
	height: 36px;
	right: 30px;
	top: 30px;
	opacity: .7;
	background-image: url(full.svg);
	cursor: pointer;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

#mute {
	display:none;
	position: absolute;
	z-index: 1000;
	width: 36px;
	height: 36px;
	right: 100px;
	top: 30px;
	opacity: .7;
	background-image: url(sound.png);
	cursor: pointer;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

#sound {
	display:none;
	position: absolute;
	z-index: 1000;
	width: 36px;
	height: 36px;
	right: 100px;
	top: 30px;
	opacity: .7;
	background-image: url(mute.png);
	cursor: pointer;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

#pause {
	display:none;
	position: absolute;
	z-index: 1000;
	width: 36px;
	height: 36px;
	right: 170px;
	top: 30px;
	opacity: .7;
	background-image: url(pause.png);
	cursor: pointer;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

#play {
	display:none;
	position: absolute;
	z-index: 1000;
	width: 36px;
	height: 36px;
	right: 170px;
	top: 30px;
	opacity: .7;
	background-image: url(play.png);
	cursor: pointer;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}