@font-face {
    font-family: 'call_of_ops_dutyregular';
    src: url('fonts/call_of_ops_duty-webfont.woff2') format('woff2'),
         url('fonts/call_of_ops_duty-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'alarm_clockregular';
    src: url('fonts/alarm_clock-webfont.woff2') format('woff2'),
         url('fonts/alarm_clock-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pleasewritemeasongmedium';
    src: url('fonts/please_write_me_a_song-webfont.woff2') format('woff2'),
         url('fonts/please_write_me_a_song-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
	padding: 0;
    font-family: 'call_of_ops_dutyregular';
}

body.outside-yes {
	background: #06d6a0;
}

body.outside-no {
	background: #b90f1b;
}

section#background {
	position: fixed;
	top: 50%;
	color: #fff;
	font-size: 150vh;
	line-height: 150vh;
	margin: -72vh 0 0 0;
	text-align: center;
	width: 100vw;
	opacity: 0.4;
	z-index: 1;
}

section#clock {
	font-family: 'alarm_clockregular';
	position: fixed;
	text-align: center;
	width: 100vw;
	top: 50%;
	margin: -15vh auto 0 auto;
	height: 30vh;
	color: #fff;
	font-size: 32vh;
	line-height: 30.4vh;
	overflow: hidden;
	z-index: 2;
	display: block;
}

section#clock span {
	display: inline-block;
}

.tick {
  	line-height: 17vh;
}

.clear {
	height: 0;
	overflow: hidden;
	clear: both;
}

footer {
	font-family: 'pleasewritemeasongmedium';
	font-size: 4vh;
	line-height: 6vh;
	padding: 10px 0;
	background: #fff;
	width: 100vw;
	text-align: center;
	z-index: 3;
	position: fixed;
	bottom: 0;
}

@media screen and (max-aspect-ratio: 4/3) {
 section#clock {
 	font-size: 17vh;
 }
}

@media screen and (max-aspect-ratio: 16/9) {
  .outside-no section#background {
 	font-size: 100vh;
 	line-height: 100vh;
 	margin: -50vh 0 0 0;
 }
@media screen and (max-aspect-ratio: 4/3) {
 
@media screen and (orientation:portrait) {
 
 .outside-no section#background {
 	font-size: 40vh;
 	line-height: 40vh;
 	margin: -20vh 0 0 0;
 }
 
 .outside-yes section#background {
 	font-size: 80vh;
 	line-height: 80vh;
 	margin: -40vh 0 0 0;
 }
 
 section#clock {
 	font-size: 10vh;
 
 }
}