#home-button {
    position: absolute;
    height: 8ch;
    width: 8ch;
    margin: 2ch;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.8rem;
    

    & img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
    }

    & p {
	font-size: 1.4em;
	font-weight: bold;
	color: white;
	display: inline-block;
	position: absolute;
	margin: 1em 1em 0.5em 0.75em;
    }
}

#introduction {
    background-color: var(--bg);
    min-height: calc(30vh + 35em);
    padding: 3em;
    border-bottom: 10ch solid var(--accent);

    h1 {
	font-size: 3em;
	margin-left: 3ch;
	margin-top: 3ch;

	&:after {
	    content: "";
	    display: block;
	    position: relative;
	    height: 0.25ch;
	    width: calc(10ch + 10vw);
	    left: 4vw;
	    top: 0.25ch;
	    background-color: white;
	}

	&:before {
	    top: 0.25ch;
	    left: 2ch;
	}

	@media screen and (max-aspect-ratio: 3/4.1) {
	    &:after {
		width: 8ch;
	    }
	}	
    }

    #intro-block1 {
	margin: auto;
	width: fit-content;
	position: relative;
	right: 4ch;
    }
    
    p {
	max-width: 70ch;
	background-color: var(--dark);
	padding: 2em;
	border-radius: 1ch;
    }

    & img {
	display: block;
	position: relative;
	text-align: right;
	left: min(44ch, 42vw);
	max-height: max(30vh, min(30vw, 60ch));
	border-radius: 1em;
	top: -4ch;
    }
}

#gallery-header {
    display: block;
    width: 10ch;
    text-align: center;
    margin: 2ch auto;
    /* font-style: italic; */
    font-size: 3em;
    padding: 1ch;
    color: black;

    &:before, &:after {
	content:"";
	display: block;
	height: 0.1ch;
	width: 10ch;
	background-color: black;
	margin: 0 auto;
	position: absolute;
    }
}

h2.category-header {
    display: block;
    background-color: var(--dark);
    text-align: center;
    padding: 5em 0.5em;
    border-radius: 1ch;
    max-width: 80vw;
    margin: 4ch auto;
    background-size: cover;
    filter: drop-shadow(4px 8px 10px gray);    
}

#portraits-header {
    background-image: url("/assets/photography/02_Portraits/DSC04231.jpg");
}
#events-header {
    background-image: url("/assets/photography/00_Events/DSC03822.jpg");
}
#climbing-header {
    background-image: url("/assets/photography/03_Climbing/DSC02568.jpg");
}
#landscapes-header {
    background-image: url("/assets/photography/04_Landscapes/DSC01314.jpg");
}

.gallery-overview {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 1em;
    justify-content: space-around;

    .preview {
	height: 45ch;
	width: max-content;
	padding: 0.75em;
	text-align: center;
    }

    img {
	max-height: 100%;
	object-fit: cover;
    }
}

.gallery-carousel {
    display: block;
    background-color: rgba(0,0,0,0.9);
    height: 100%;
    width: 100vw;
    position: fixed;
    top: 0;
    white-space: nowrap;
    align-content: center;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    z-index: 9;
    transition: 0.2s;
    transform: scale(0,0);
}

.radioactive:focus-within > .gallery-carousel {
    transform: scale(1,1);
}

.carousel-item {
    display: inline-block;
    align-content: center;
    max-width: 85vw;
    height: 90vh;
    position: relative;
    top: 0;
    transition: 0.5s;
    padding: 2vw;
    scroll-snap-align: center;

    & > img {
	display: block;
	max-height: 100%;
	max-width: 100%;
	margin: auto;
	border-radius: 1em;
    }

    &:first-child {
	margin-left: 10vw;
    }

    &:nth-last-child(2) {
	margin-right: 10vw;
    }
}

.carousel-help {
    position: sticky;
    left: 0;
    top: 1.5ch;
    margin: auto;
    margin-bottom: 1ch;
    width: 100%;
    display: block;
    text-align: center;
}

[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}