/*:root {
  --orientation: 0deg;
}
*/
#navigation {
	position: absolute;
    top: 0;
    left: 0;
/*    height: 100vh;
    width: 100vw;*/
    padding: 0;
	z-index: 999 !important;
	color:#F0F;
}
#navigation a {
	background-color: #dfdfdf;
}
#navigation p {
    position:fixed;
/*    border:2px solid;
*/    margin:0;
    padding:1em;
}
#navigation p:nth-child(1) {
/*    border-color:green;
*/    top:0;
    left:0;
}
#navigation p:nth-child(2) {
/*    border-color:red;
*/    top:0;
    right:0;
}
#navigation p:nth-child(3) {
/*    border-color:yellow;
*/    bottom:0;
    left:0;
}
#navigation p:nth-child(4) {
/*    border-color:pink;
*/    bottom:0;
    right:0;
}

html {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 12pt;
color:black;
line-height: 1.1.6em;
height:100%;
width:100%;
min-height: 100%;
position:relative;
padding:0px;
margin:0px;
background-size:contain;
/*background-color:lightgrey;*/
background: rgba(222,222,222,1);
background: -moz-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(254,254,254,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(222,222,222,1)), color-stop(100%, rgba(254,254,254,0)));
background: -webkit-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(254,254,254,0) 100%);
background: -o-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(254,254,254,0) 100%);
background: -ms-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(254,254,254,0) 100%);
background: linear-gradient(to bottom, rgba(222,222,222,1) 0%, rgba(254,254,254,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#fefefe', GradientType=0 );
	background-repeat: no-repeat;
	background-attachment: fixed;
}

img {border:0;}

.bigPortrait {
	width: 100%;
    max-width: 600px;
    margin: auto;
}

#container img, #container iframe {	
	width: 85%;
    /*max-width: 500px;*/
	display: block;
  	height: auto;

	/*margin: auto;*/
	max-height:1200px;
	margin-bottom: 1em;
	max-width: 700px;
}
#container iframe{	aspect-ratio: 4/3;}

.noLine {text-decoration: none;
border: 0;}

a, a img, a:link, a:hover, a:visited {
  text-decoration: none;
  color: inherit;
	border: 0;
}
video {
	width:100%;
	max-width:700px;
	height:auto;
	}

.underscore, .underline a:hover, .underline a:focus, .underline a, .underline a:link, .underline a:visited {
  border-bottom: solid 2px !important;
  padding-bottom: 0 !important;
}

.cloud {background: url("../assets/clouds.jpg");}
.grey {background-color: lightgrey;}

body {
display:block;
max-width:100%;
/*height:100%;*/
width:100%;
padding:0px;
margin:0px;

/*background-size: auto 100%;*/
/*background-size: cover;*/
background-repeat: no-repeat;
}    
.rainbow {
	-webkit-animation:rainbow 4s infinite;
-ms-animation:rainbow 4s infinite;
-o-animation:rainbow 4s infinite;
animation:rainbow 4s infinite;
}
a:hover {
text-decoration: initial;
}

#container {
	margin:1.8em;
	margin-top:3em;
	padding-bottom: 3em;
	z-index: 100;
}

#container p {
position:relative;
color:#30C;
left:0px;
top:0px;
max-width: 500px;
/*margin:auto;*/
margin-top:0px;
padding-top:0px;
margin-bottom: 1em;
z-index: 200;
}
#player{width:100%;height:auto;}

h1 {
font-weight: normal;
font-size: 1em;
padding-top: 1.6em;
text-align: left;}

#mainImage {
text-align: left;
position:relative;
display:inline-block;
width:100%;
left:0;
top:20%;
max-width: 350px;
}

.dida {
	text-align:left;
	font-size:.75em;
	width: 100%;
	max-width: 500px;
	/*margin: auto;*/
	margin-top: 0.5em;
	margin-bottom: 1em;
	border-bottom:dashed;
	display: block;
}

.bottom-left {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 8vw;
}

.bottom-right {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 2vw;
}

div.a {
position: fixed;
}

.ufo {
	text-decoration: none;
	z-index:995 !important;
}
@-webkit-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}

@media screen and (orientation: landscape){body{background-size: 100% auto;}}
@media (min-width:500px) {.ufo {max-width: 15vw;max-height: 15vw;} html {font-size: 1.4em}}
@media (max-width:499px) {.ufo {max-width: 25vw;max-height: 25vw;}}
@media screen and (orientation: landscape) and (min-width:400px){}