*, ::before, ::after {
  box-sizing: border-box;
}

html {
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1451245718442-c46c5cd6a154?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center/cover;
	font-family: 'Luminari', 'Bodoni 72', 'Georgia', serif;
	font-variant-numeric: lining-nums proportional-nums;
	--hsl: 30deg 80% 90%;
	color: hsl(var(--hsl));
}

h1 {
	position: fixed;
	inset: 0 .75em auto;
	text-align: justify;
  text-align-last: justify;
	color: hsl(var(--hsl) / 0.8);
	font-weight: normal;
	font-size: clamp(6.66vw, 3.5rem, 10vw);
	line-height: 1;
	text-shadow: 0 0 .2em black;
}

ul {
	list-style: none;
	position: fixed;
	inset: 0;
	margin: 0;
	padding: clamp(1rem, 4vmin, 2rem);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: clamp(1rem, 4vmin, 2rem);
	
	@media (aspect-ratio < 1) {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(6, 1fr);		
	}
}

li {
	position: relative;
	
	button {
		position: absolute;
		inset: 0;
		width: 100%;
		background-color: transparent;
		border: thin dashed hsl(var(--hsl) / 0.6);
    border-left: medium solid hsl(var(--hsl) / 0.2);
		font: inherit;
		color: inherit;
    text-shadow: 0 0 4px black;
		
		&::after {
			content: counter(list-item);
			position: absolute;
			inset: auto 0 0 auto;
			font-size: 1.2em;
			padding: 0.5rem;
		}
	}
	
	a, figure {
		display: none;
		position: absolute;
		inset: 0;
		
		button[aria-expanded="true"] ~ & {
			background: #DDD url('https://bittersmann.de/talks/adventskalender/assets/webkrauts_background.png');
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
  
  a {
    border: 0.1ch solid;
    border-color: #666 #888 #999 #777;
		padding: 0.5rem;
    
  }

  a.dead::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      -45deg,
      transparent 0 1em,
      black 0 2em,
      transparent 0 100%
    );
  }

	:is(img, svg, figure, iframe, video) {
		max-width: 100%;
		max-height: 100%;
	}
  
  figure {
    margin: 0;
    align-content: center;
    background: black !important;
  }
  
  iframe {
    border: none;
  }
}

.site-logo__heaven {
	display: none;
}

footer {
	position: fixed;
	right: 0;
	bottom: 27%;
	padding: 0.5em;
	writing-mode: vertical-rl;
	scale: -1;
	text-orientation: sideways;
	color: hsl(var(--hsl) / 0.4);
  font-family: Calibri, sans-serif;
	
	a {
		color: inherit;
		text-decoration: inherit;
	}
}

/* from https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}