@charset "UTF-8";
/* CSS Document */

html,body {width:100vw;
    	   height: 100vh;
    	   margin: 0;
		   text-align: center;}

button {border: none;
 color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration:none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
	top:58%;
  cursor: pointer;
	position: absolute;
transform:translate(-50%,-50%);
	background-color: #031a50;}

.dropbtn{background-color: transparent;
		color: white;
		padding: 16px;
		width: 100px;
		font-size: 16px;
		border: none;}

.dropdown{position: fixed;
		display: inline-block;
		width: 100px;
		right: 10px;
		top: 40px;}

.dropdown-content{display: none;
				position: absolute;
				width: 100px;
				z-index: 3;
				text-align: center;
				padding-top: 45px;
				top: 0px;}

.dropdown-content a{color:cornsilk;
					padding: 10px 16px;
					text-decoration:none; 
					display: block;
					border-radius: 10px;
					font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}

#menu{width: 30px;
	height: auto;}

#logo{position: absolute;
			width: 120px;
			top:0px;
			left:20px;
			height: auto;
			z-index: 1;}

#video {position:fixed;
		top: 50%;
		z-index: -1;
		left:50%;
		transform:translate(-50%,-50%);}

#message{position:fixed;
		top: 40%;
   		z-index: -1;
		left:50%;
		transform:translate(-50%,-50%);
		color:white;
		font-size: 60px;
		width:700px;}

#text{position:fixed;
		top: 50%;
   		z-index: -1;
		left:50%;
		transform:translate(-50%,-50%);
		color:white;
		font-size: 25px;
		width:700px;
		font-family: 'Fuzzy Bubbles', cursive;}

@media (min-aspect-ratio: 16/9) {
    #video {width:100%;
        height: auto;}}

@media (max-aspect-ratio: 16/9) {
    #video { 
        width:auto;
        height: 100%;}}


.dropdown-content a:hover{color:gray;}

.dropdown:hover .dropdown-content {display: block;}