@font-face {
    font-family: 'scp';
    src: url('font/sourcecodepro-light-webfont.eot');
    src: url('font/sourcecodepro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/sourcecodepro-light-webfont.woff2') format('woff2'),
         url('font/sourcecodepro-light-webfont.woff') format('woff'),
         url('font/sourcecodepro-light-webfont.ttf') format('truetype'),
         url('font/sourcecodepro-light-webfont.svg#rubiklight') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	border: 0;
	outline: none;
}
html {
    height: 100%;
}
body {
	font-family: 'scp', verdana, sans-serif;
  	background: #4b6cb7;
  	background: -webkit-linear-gradient(to left, #4b6cb7 , #182848);
  	background: -moz-linear-gradient(to left, #4b6cb7 , #182848);
  	background: linear-gradient(to left, #4b6cb7 , #182848);
}
a {
  text-decoration: none;
  color: #d1d1d1;
}
a:hover, a:focus {
  color: #d67d46;
}
#main {
	font-size: 20vw;
	height: 100%;
	line-height: 100vh;
	text-align: center;
  color: #d67d46;
  text-shadow: 1px 1px 3px #000;
}
#header, #footer, #main span, #left {
	display: none;
	font-size: 4vw;
	color: #d1d1d1;
	position: fixed;
}
#header {
	top: 0.25em;
	left: 1em;
}
#footer {
	bottom: 0.75em;
	right: 1em;
	cursor: pointer;
}
#main span {
	padding-left: 5px;
}
#left {
  bottom: 0.25em;
  left: 1em;
}
#left a {
  /*display: inline-block;*/
  width: 72px;
  height: 72px;
  line-height: 72px;
  margin: 1em;
  font-family: serif;
}
#fx {
  -webkit-transform: rotate(-150deg);
  -moz-transform: rotate(-150deg);
  -o-transform: rotate(-150deg);
  transform: rotate(-150deg);
}
#top span {
  display: inline-block;
  position: absolute;
  top: 1em;
  right: 1em;
  color: #ffa169;
  border: 1px solid #ffa169;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  padding: 10px;
  text-align: center;
  line-height: 10px;
  font-size: 16px;
  font-weight: bold;
  font-family: serif;
  cursor: help;
}
.spinner {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  border: 3px solid #d67d46;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.spinner:before, .spinner:after {
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  background-color: #d67d46;
  -webkit-border-radius: 1.5px;
  -moz-border-radius: 1.5px;
  border-radius: 1.5px;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.spinner:before {
  height: 9px;
  left: 13.5px;
  top: 50%;
  -webkit-animation: spin 2000ms linear infinite;
  -moz-animation: spin 2000ms linear infinite;
  -o-animation: spin 2000ms linear infinite;
  -ms-animation: spin 2000ms linear infinite;
  animation: spin 2000ms linear infinite;
}
.spinner:after {
  height: 12px;
  left: 13.5px;
  top: 50%;
  -webkit-animation: spin 500ms linear infinite;
  -moz-animation: spin 500ms linear infinite;
  -o-animation: spin 500ms linear infinite;
  -ms-animation: spin 500ms linear infinite;
  animation: spin 500ms linear infinite;
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
::selection {
    background: #d67d46;
    color: #fff;
}
::-moz-selection {
    background: #d67d46;
    color: #fff;
}
@media only screen and (min-width: 768px) {
    #header, #footer, #main span {
      font-size: 2vw;
    }
}