#hero {
	justify-content: center;
	background-color: var(--BGlighter2);
	box-shadow: 0 2px 5px #0009, 0 -1000px 0 1000px var(--color2);
}

#hero > div {
	box-shadow: 0 0 10px 10px #0009;
	max-width: 730px;
}

#swappables .form { gap: 10px 0; }

.split4:has([value=Rose]:disabled):after {
	content: "(Rose locked by 10 KT)";
	display: block;
	position: absolute;
	text-wrap: nowrap;
	font-size: 13px;
	opacity: .75;
	font-style: italic;
	bottom: -12px;
	width: 100%;
	text-align: center;
}

.split4:has([value=Yellow]:disabled):after {
	content: "(White-only Metal)" !important;
}

.thumbholder {
	display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap;
	margin: 0 auto -5px; padding: 10px 0 12px;
	width: 498px; max-width: 100%;
}
.thumbholder > *, .thumbholder > a > img:not(.filethumb) { width: 50px; height: 50px; object-fit: contain; cursor: pointer; }

.thumbholder > button:before { content: "+"; font-size: 26px; display: block; line-height: 25px; }
.thumbholder > button:last-of-type { display: none; }
.thumbholder:has(a:nth-of-type(2)) > button:last-of-type { display: initial; }
.thumbholder > button:last-of-type:before { content: "-"; font-size: 26px; }
.filethumb { width: 40px; padding: 5px 0; }
.thumbholder a:has(.filethumb) { width: 40px; padding: 5px 0; }
.thumbholder a:has(.filethumb):before { padding: 8px 18.75%; width: 62.5%; top: 5px; }
.thumbholder h5:has(+ .filethumb) { 
	position: absolute; bottom: 0;
	width: 30px; margin: 14px 5px;
	font-size: 11px; color: black;
	text-transform: uppercase;
	overflow-wrap: break-word;
	text-align: center;
	line-height: 10px;
}
.thumbholder > a { position: relative; }
.thumbholder > a:before {
	content: url(/static/img/icons/trash.svg);
	background-color: #0007;
	opacity: 0; z-index: 1;
	transition: opacity .1s ease;
	position: absolute; top: 0; left: 0;
	width: 50%; height: 34px;
	padding: 8px 25%;
}
.thumbholder > a:hover:before, .thumbholder > a:focus:before { opacity: 1; }

.thumbholder + span {
	display: none;
	font-size: 13px;
	opacity: .85;
	margin: -15px auto -5px;
	font-style: italic;
	text-align: center;
}

@media (pointer:none), (pointer:coarse) {
	.thumbholder:has(a) + span { display: block; }
}

#timespot > div > h3 { width: 120px; padding: 10px 5px; }

#timespot > div > p {
	margin-top: 5px; font-size: 14px;
}

#timespot .ampersand {
	width: 30px; height: 28px;
	background: var(--BGlighter);
	border-radius: 500px;
	padding-top: 1px;
	position: absolute; left: -16px; top: 3px;
	box-shadow: 0 0 2px #0008 inset;
}

#timespot .ampersand > img { width: 45%; margin: 5px 0 0 1px; }
[data-theme='dark'] #timespot .ampersand > img { filter: invert(1); }

.formframe { height: 500px; margin: unset; }

.bigone { max-width: 750px; margin: auto; }
.reviewdiv h2 { color: var(--mainblue); }
.reviewdiv blockquote { margin: 30px 0 0; font-style: italic; }
.reviewdiv, .examplediv {
	padding: 10px 20px 50px;
	margin-top: -35px;
	background: #eeeff1;
	color: black;
}
.reviewdiv > .bigone > p { margin: 10px 0 10px 30px; }

.examplediv {
	background: var(--headericons);
}
.examplediv h2 { color: var(--headercolor1); }

.customexamples {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: auto;
	max-width: 1350px;
	height: 500px;
	overflow-y: scroll;
	padding: 10px 0;
}

.customexamples > a {
	width: clamp(100px, 15vw, 200px);
	height: clamp(100px, 15vw, 200px);
	background: white;
	
	box-shadow: 0 2px 5px #0006;
	position: relative;
}

.customexamples > a > img:first-child {
	width: inherit;
	height: inherit;
	object-fit: cover;
}

.vidicon {
	position: absolute;
	min-width: unset;
	right: 10px;
	bottom: 5px;
	filter: invert(1) drop-shadow(0px 0px 2px white);
}

#solodisplay {
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	border-radius: 0;
	box-shadow: unset;
	animation: unset;
}

#solodisplay[open] {
	display: flex;
}

#solodisplay > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: fit-content;
}

#solodisplay > div > a {
	font-size: clamp(48px, 5vw, 72px);
	padding: 100px 10px;
	color: white;
}
#solodisplay > div > *:nth-child(2) {
	max-height: 70dvh;
	max-width: 80vw;
}

.closer {
	position: absolute;
	top: 110px; right: 15px;
	color: white;
	background: #FFF4;
	padding: 5px;
	border-radius: 5px;
}
.closer:hover, .closer:focus {
	background: #FFF6;
	outline: solid 1px #FFFB;
}

@media (max-width: 925px) {
	.vidicon { right: 3px; bottom: 1px; }
}

@media (max-width: 700px) {
	.examplediv { padding: 10px 0 50px; gap: 15px; }
}
@media (max-width: 500px) {
	#timespot > div > h3 { width: 105px; }
	#timespot .ampersand { transform: scale(0.85); }
}

@media (max-width: 447px) {
	#timespot > div > h3 { width: 80px; font-size: 14px; }
	#timespot > div > p { margin-top: unset; font-size: 12px; }
	#timespot .ampersand { transform: scale(0.8); }
}