body, html {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	border:none;
	font-family:Arial, Helvetica, sans-serif;
	overflow:hidden;
	background-color:#161616;
	background-color:#000000;
}

.hide {
	display:none!important;
}

.main {
	width:100%;
	height:100%;
	overflow:auto;
	display: flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

.splash_vid {
	height:50%;
	/*width:70%;*/
	/*animation: huetate 30s infinite;*/
	filter:hue-rotate(104deg);
}

.splash2 {
	height:30%;
	/*width:70%;*/
	/*animation: huetate2 30s infinite;*/
	margin-left:-2%;
	filter:hue-rotate(294deg);
}

@keyframes huetate {
	0% {
		filter:hue-rotate(0deg);
	}
	100% {
		filter:hue-rotate(360deg);
	}
}

@keyframes huetate2 {
	0% {
		filter:hue-rotate(216deg);
	}
	40% {
		filter:hue-rotate(360deg);
	}
	80% {
		filter:hue-rotate(144deg);
	}
	100% {
		filter:hue-rotate(216deg);
	}
}

.flex_mid {
	background-color: rgba(0,0,0,0.5);
    box-shadow: 0px 0px 20px black;
    display: flex;
    width: 70%;
    margin-left: 15%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: white;
    text-align: center;
    font-size: 4vh;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.vid_select {
	display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex: 20px;
    gap: 50px;
    margin-top:5%;
}

.glow {
	width:50px;
	height:50px;
	border-radius:25px;
	background-image:radial-gradient(circle, white, green, transparent, transparent);
}

.glow:hover {
	box-shadow:0 0 5px green;
}