*{
			background-color: cornflowerblue
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: Gotham, "Verdana", Verdana, Arial, "sans-serif";
				
		}
		.hero{
			width: 100%;
			height: 64vh;
			background-image: linear-gradient(rgba(12,3,51,0.3),rgba(12,3,51,0.3));
			position: relative;
			padding: 0.5%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
			nav{
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				padding: 20px 8px;
				display: flex;
				align-items: center;
				justify-content: space-between;
					background-color: #131418;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
	 z-index: 10;
			}
			nav .logo{
				width: 100px;
			}
			nav ul li{
				list-style: none;
				display: inline-block;
				margin-left: 40px;
			}
			nav ul li a{
				text-decoration: none;
				color: #fff;
				font-size: 17px;
			}
			.vid-content{
				text-align: center;
				z-index:1;
			}
			.vid-content h1{
				font-size: 160px;
				color: #fff;
				font-weight: 600;
				transition: 0.5s;
			}
			.vid-content h1:hover{
			color: #fff;
  box-shadow: inset 2000px 0 0 0 #d4af37;;
				
			}
			.vid-content a{
				text-decoration: none;
				display: inline-block;
				color: #fff;
				font-size: 18px;
				border: 2px solid #fff;
				padding: 14px 70px;
				border-radius: 50px;
				margin-top: 20px;
				
			}
			.back-video{
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: -0;
			}
			@media (min-aspect-ratio: 16/9){
				.back-video{
					width: 100%;
					height: auto;
				}
			@media (max-aspect-ratio: 16/9){
				.back-video{
					width: auto;
					height: 100%;
				}
			}