@keyframes spinner {
	to { transform: rotate(360deg); }
}

body {
	> figure {
		min-height: 900px;
	}
	> small {
		float: right;
		padding-inline: 1rem;
		font-size: .75em;
		transform: translateY(-2rem);
		color: white;
		z-index: 999999999999999999999;
	}
	> section {
		margin-top: calc(var(--gap) * 2);
		margin-top: -565px;
		display: grid;
		grid-template-columns: var(--grid);	
		background: var(--lightgrey);
		
		> form {
			grid-column: content;
			padding: var(--gap);
			background: rgba(200,200,200,.75);
			
			a, button {
				width: 100%;
				span {
					color: inherit;
					font-weight: 400;
					svg {
						height: .9rem;
						fill: white;
					}
				}
			}
			
			input[type=checkbox] + label {
				display: inline-block;
				vertical-align: middle;
			}
			input[type=checkbox]:focus-visible + label {
				outline: 1px solid var(--yellow);
			}
			
			details {
				label {
					font-weight: 300;
					vertical-align: middle;
				}
			}
			fieldset > section:has(input[type=checkbox]) {
				gap: 0 var(--gap);
				input {
					margin-top: var(--gap);
				}
			}

			
			
			
		}
	}
	
	main {
		position: relative;
		background: var(--lightgrey);
		
		> nav {
			margin-block: var(--gap);
			display: flex;
			gap: var(--gap);
			svg {
				height: 1rem;
				margin-right: calc(var(--gap) / 2);
				fill: white;
			}
			*:focus,
			&:focus {
				outline: none;
			}
			@media(max-width:1200px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 0 var(--gap);
			}
			@media(max-width:800px) {
				display: grid;
				grid-template-columns: 1fr;
				gap: 0 var(--gap);
			}
		}

		> article {
			/*margin-bottom: var(--gap);*/
			display: grid;
			grid-column: full-width;
			grid-template-columns: var(--grid);	
			gap: 0;
			
			
			
			*:focus,
			&:focus {
				outline: none;
			}
			
			&:nth-child(odd) {
				background: var(--lightgrey);
			}
			&:nth-child(even) {
				background: white;
			}
			
			> div {
				display: grid;
				/*grid-template-columns: 35% auto;*/
				grid-template-columns: 1fr 1fr;
				/*grid-column: content;*/
				grid-column: full-width;
				gap: var(--gap);
				
				align-content: center;
				align-items: center;
				justify-content: center;
				
				> figure {
					padding: 0;
					height: 100%;
					overflow: clip;
					flex: 0 0 100%;
					background: black;

					a {
						display: block;
						width: 100%;
						height: 100%;
					}
					img {
						display: block;
						height: 100%;
						width: 100%;
						/*object-fit: cover;*/
						object-fit: contain;
						object-position: center;
					}
				}

				> div {
					/*padding-block: var(--gap);*/
					padding: var(--gap);
					h2, h2 a {
						scroll-margin-top: 15vh;
						font-size: 3rem;
						text-decoration: none;
						span {
							display: inline !important;
						}
						&:focus-visible,
						&:hover {
							color: inherit;
							text-decoration: none;
						}
						&:focus,
						&:focus-visible {
							outline: 1px solid var(--yellow);
						}
					}

					dl {
						display: grid;
						grid-template-columns: auto 1fr;
						gap: 0 var(--gap);
						dt {
							font-weight: 500;
							text-transform: uppercase;
						}
						
					}

					svg {
						height: 1em;
					}
					> span {
						display: block;
						font-size: 2rem;
						font-weight: 500;
						align-content: flex-end;
						align-items: flex-end;
						justify-content: flex-end;
						align-self: flex-end;
						> small {
							display: block;
							font-weight: 200;
						}
					}
					a:has(svg) {
						display: inline-flex;
						align-content: center;
						align-items: center;
						justify-content: center;
						margin-block: 2rem;
						transition: all 1s ease-in-out;
						border: .2rem solid var(--yellow);
						border-radius: 100vw;
						padding: var(--gap);
						
						
						svg {
							fill: var(--yellow);
							height: 2rem;
						}
						
						&:hover {
							transform: scale(1.2);
						}
					}
				}
				@media(max-width:1200px) {
					grid-template-columns: 1fr;
				}
			}
		}
		.spinner {
			grid-column: full-width;
			align-content: center;
			justify-content: center;
			align-items: center;
			display: none;
			svg {
				max-height: calc(var(--gap) * 2);
				margin: var(--gap);
			}
		}
	}
}

.SumoSelect {
	width: 100% !important;
	z-index: 20000 !important;
	/*> p {
		height: calc(2.5rem + 2px);
	}*/
	* {
		border-color: var(--fontcolor) !important;
		border-width: 2px !important;
		z-index: 30000 !important;
	}
	span i {
		background-color: var(--lightgrey) !important;
	}
	.selected span i {
		background-color: var(--black) !important;
	}
}

#scrolltotop {
	position: fixed;
	right: var(--gap);
	bottom: var(--gap);
	padding: calc(var(--gap) / 2);
	background: rgb(from var(--lightgrey) r g b / 50%);
	z-index: 999999999;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	
	svg {
		display: block;
		width: 2rem;
	}
}

.spinner svg {
	display: block;
	animation: spinner 1.5s linear infinite; 
}