body {margin: 0}
div {display: flex}
video {border: 0}
a, a.visited { color: black; font-weight: 300 }

.flex-main-container {display: flex; height: 100vh; align-items: center; justify-content: space-between; flex-direction: column}

.MHlogo { background-size: 359px 147px; width: 379px; height: 147px; background: url('/logo/MH.comwhiteoutlineblurred-sm.png') no-repeat; }
.spacer20 { width: 20px; flex-shrink: 0 }

/* FONTY THINGS */
@font-face { font-family: "Cinzel"; src: url('/fonts/Cinzel/Cinzel/Cinzel-Regular.otf') format('opentype') }
@font-face { font-family: "PT Serif"; src: url('/fonts/PTSerif/pt-serif.regular.ttf') format('truetype') }
.Cinzel { font-family: "Cinzel", "Times New Roman", Times, serif }
.PTSerif { font-family: "PT Serif", "Times New Roman", Times, serif }
.yes-cap { font-variant-caps: small-caps }
.drop-shadow { box-shadow: 0 10px 6px -6px black }
.MHtitle { font-size: 2.25em }
.MHsubtitle { font-size: 0.9em }

/* ANIMATIONY THINGS */
@keyframes fadeInOpacity {
	0% { opacity: 0 }
	100% { opacity: 1 }
}
@keyframes move {
  0% { background-position: -100% 0%; }
  100% { background-position: 100% 0%; }
}
.fade-in, .fade-in2, .fade-in3 { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; }
.fade-in { animation-duration: 1.5s }
.fade-in2 { animation-duration: 2.25s }
.fade-in3 { animation-duration: 3s }

.gold-bg {
	background: linear-gradient(90deg, #b1932d 0%, #d4b550 39%, #fade82 50%, #d4b550 61%, #b1932d 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: move 4.5s ease infinite;
	text-shadow: 2px 2px 4px rgba(186, 167, 12, 0.5);
}

/*
Used font licenses can be found at:
https://mattharken.com/fonts/PTSerif/PT_Free_Font_License_eng_1.2.txt
https://mattharken.com/fonts/Cinzel/OFL.txt
*/

.animated-border-box, .animated-border-box-glow{
  /*max-height: 200px;
  max-width: 250px;*/
  /*height: 100%;
  width: 100%;*/
  position: absolute;
  overflow: hidden; 
  z-index: 0;
}
.animated-border-box-glow{
  overflow: hidden;
  /* Glow Blur */
  filter: blur(20px);
}
.animated-border-box:before, .animated-border-box-glow:before {
  content: '';
  z-index: -2;
  text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
  position: absolute;
	width: 99999px;
	height: 99999px;
	background-repeat: no-repeat;
	background-position: 0 0;
  /*border color, change middle color*/
	background-image: conic-gradient(rgba(0,0,0,0), rgba(200, 167, 12, 1), rgba(0,0,0,0) 25%);
  /* change speed here */
	animation: rotate 7s linear infinite;
}

.animated-border-box:after {
	content: '';
	position: absolute;
	z-index: -1;
  /* border width */
	left: 5px;
	top: 5px;
  /* double the px from the border width left */
	width: calc(100% - 10px);
	height: calc(100% - 10px);
  /*bg color*/
	background: #0c1059;
}

@keyframes rotate {
	100% {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

/* top header */
@media (max-width: 1400px) {
	.MHtitle { font-size: 1.5em }
	.MHsubtitle { font-size: 0.65em }
	.MHlogo { background-size: contain; width: 307px; height: 118px; }
}
@media (max-width: 1070px) {
	.MHtitle { font-size: 1.3em }
	.MHsubtitle { font-size: 0.55em }
	.MHlogo { background-size: contain; width: 307px; height: 118px; }
}
@media (max-width: 960px) {
	.MHtitle { font-size: 1.1em }
	.MHsubtitle { font-size: 0.45em }
	.MHlogo { background-size: contain; width: 307px; height: 118px; }
	.spacer20 { width: 10px }
}
@media (max-width: 960px) and (orientation: portrait) {
	.MHtitle { font-size: 1.5em }
	.MHsubtitle { font-size: 0.45em }
	.MHlogo { background-size: contain; width: 307px; height: 118px; }
	.spacer20 { width: 10px }
}