body { background: var(--BGgradient2); }

#hero {
	max-height: 476px;
	height: unset;
	object-fit: scale-down;
	background: linear-gradient(90deg, #464e5b 49%, #FFF 51%);
}	

.infodiv {
	display: flex; justify-content: center; align-items: center; gap: 18px;
	padding: 20px;
}
.infodiv > div { min-width: 37.5%; }
.infodiv > div > p { margin: 8px 0; font-size: clamp(0.85rem, 1.25vw, 1rem); }

a.linebtn {
	border: solid 2px var(--mainblue);
	padding: clamp(5px, 2vw, 10px);
	margin: 10px auto 0;
	transition: background-color .3s;
	display: block;
	width: 150px;
	border-radius: 5px;
	color: var(--mainblue) !important;
	background-color: white;
	font-size: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
a.linebtn:hover, a.linebtn:focus-visible { background-color: #cddee8; }

.diamondouter {
	margin: 185px auto; height: 800px; width: 800px;
	transform-origin: center center; transform: rotate(45deg);
	box-shadow: 0 0 10px #0006;
	display: flex; flex-wrap: wrap;
}

.diamond { width: 50%; height: 50%; overflow: visible; }

.diamondcontent {
	transform-origin: center center; transform: rotate(-45deg);
	width: 390px; height: 390px;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.diamondcontent * {
	margin: 0;
	color: white;
	text-align: center;
	text-shadow: 1px 1px 8px #000C;
}
.diamondcontent img {
	max-width: 42%;
	height: 130px;
	object-fit: contain;
	margin-top: -20px;
}

video:not(:fullscreen) {
	border: solid 3px var(--mainblue);
	border-radius: 7px;
	background-color: gray;
}

@media (max-width: 1200px) {
	.diamondouter { width: 700px; height: 700px; margin: 170px auto; }
	.diamondcontent > p { font-size: 15px; max-width: 310px; }
}

@media (max-width: 900px) {
	.infodiv { flex-wrap: wrap; }
	#viddiv { width: 75%; }
	.infodiv > div > p { font-size: clamp(0.85rem, 1.75vw, 1rem); }
	h2 { width: 90%; max-width: 500px; margin: auto auto 20px; }
	
	.diamondouter { transform: unset; margin: auto auto 20px; width: unset; height: unset; }
	.diamond { height: unset; padding: 7px 0 20px; }
	.diamondcontent { transform: unset; width: unset; height: unset; }
	.diamondcontent > img { max-width: 180px; margin-top: 8px; }
	.diamondcontent > p { font-size: clamp(14px, 2vw, 1rem); padding: 0 calc(clamp(0.85rem, 2vw, 1rem)/2); }
}

@media (max-width: 800px) {
	#swappables > div > div { border-top: none; }
	#swappables > div h2 {
		color: var(--mainblue);
		margin: 0 auto 10px;
		display: block;
		height: unset;
		text-shadow: unset;
	}
}

@media (max-width: 780px) {
	.diamond { width: 100%; }
	.diamondcontent > p { max-width: 95%; text-align: justify; }
}

#elitefooter {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #7bcfffba;
	padding: 15px;
}
#elitefooter > img { width: clamp(100px, 30vw, 300px); filter: drop-shadow(0 0 6px white); }
#elitefooter > span { font-size: clamp(0.85rem, 3vw, 20px); opacity: .95; }

#swappables {
	margin: 0 auto;
	max-width: 800px;
}

.popup iframe {
	border: none;
	max-width: 100%;
	max-height: 66dvh;
}