body{
	font-family: Inter;
	background-color: #000000;
	color: #FFFFFF;
	
}
.ZNLogo{
	font-size:200%;
	float: left;
}
.ZNTagline{
	font-size:200%;
	float: right;
}
:root {
  --green: #b0e51a;
  --blue: #003581;
  --red: #7f0000;
}

.row {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-shadow:0 0 0.15rem rgba(0, 0, 0, 1.0);
}

.BGImageLeft {
  float:left;
  width: 75%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.BGImageRight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.panel {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  padding: 40px;
  width:50%;
  font-size:125%;
}
.LeftBox {
	float: left;
	width:50%;
}
.RightBox {
	float: right;
	width:50%;
}

.Row:nth-child(odd) .panel {
  right: 0;
  /* The clip-path defines the diagonal line */
  /* Point 1: Top starting point | Point 2: Top Right | Point 3: Bottom Right | Point 4: Bottom ending point */
  clip-path: polygon(var(--x1) 0%, 100% 0%, 100% 100%, var(--x2) 100%);
}

.Row:nth-child(even) .panel {
  left: 0;
  /* Point 1: Top Left | Point 2: Top ending point | Point 3: Bottom ending point | Point 4: Bottom Left */
  clip-path: polygon(0% 0%, var(--x1) 0%, var(--x2) 100%, 0% 100%);
}

.green { background-color: var(--green); color: white; }
.blue { background-color: var(--blue); color: white; }
.red { background-color: var(--red); color: white; }

@media (max-width: 768px) {
.row:nth-child(odd) .panel {
	--x1: 20%; /* Moves top edge further left */
	--x2: 30%; /* Moves bottom edge further left */
}
.row:nth-child(even) .panel {
	--x1: 80%; /* Moves top edge further right */
	--x2: 70%; /* Moves bottom edge further right */
	}
}
h2 {
	font-size:200%;
	margin: 0; 
}
.FloatAnnotation{
	position: absolute;
	z-index:2;
	bottom: 0;
	font-size:50%;
}

#footer {
	text-align: center;
	font-size:75%;
}
.YoutubeLink {
color: #ffffff;
text-decoration: none;
text-shadow:0 0 0.2rem rgba(255, 0, 0, 255);
}
.YoutubeLink:hover{
color: #ffcccc;
text-decoration: underline;
}
.WikiLink {
	color: #cccccc;
	text-decoration: none;
}
.WikiLink:hover{
	color: #ccccff;
	text-decoration: underline;
}

.YTEmbed{
	aspect-ratio: 16 / 9;
	height:100%;
	/*height:100%;
	width:57%;*/
	/*height:315px;
	width:560px;*/
}
.YTBox{
	margin-left:30%;
	margin-right:30%;
	height:100%;
	width:90%;
	text-align:center;
}