/* @group VARIABLES */

:root {
	
	--base-color: #232323;
	--background-color: #fff;
	--yellow: #ffdd00;
	--lightgrey: #ededed;
	--lightgrey-darker: #e5e5e5;
	--midgrey: #999999;
	
	--image-shadow: 0 0 15px rgba(0,0,0,.15);
	
	--spacing-xs: clamp(1.2rem, 3vw, 2.4rem);
	--spacing-sm: clamp(1.8rem, 4vw, 3.6rem);
	--spacing-md: clamp(2.4rem, 6vw, 4.8rem);
	--spacing-lg: clamp(3.6rem, 9vw, 7.2rem);
	--spacing-xl: clamp(4.8rem, 12vw, 9.6rem);
	
}

/* @end */

/* @group FONTS */

@font-face {
  font-family: 'Overpass';
  src: url('../fonts/Overpass-Regular.woff2') format('woff2'),
       url('../fonts/Overpass-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overpass';
  src: url('../fonts/Overpass-Bold.woff2') format('woff2'),
       url('../fonts/Overpass-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Bold.woff2') format('woff2'),
       url('../fonts/Rubik-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* @end */

/* @group TRANSITIONS */

@view-transition {
	navigation: auto;
}

.project-container {
	view-transition-name: project;
}

::view-transition-old(project) {
	animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

::view-transition-new(project) {
	animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

@keyframes slide-out {

	to {
		opacity: 0;
	}
}

@keyframes slide-in {

	from {
		opacity: 0;
	}

}

/* @end */

/* @group GENERAL */

html {
	color: var(--base-color);
	font-family: 'Overpass', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

html,
body {
	min-width: 320px;
}

strong {
	font-weight: bold;
}

h1,
h2,
h3 {
	font-weight: bold;
}

* + h1 {
	margin-top: 3em;
}

h1:has(+ *) {
	margin-bottom: 1.5em;
}

h1:has(+ .cards) {
	margin-bottom: 1em;
}

* + h2 {
	margin-top: 2em;
}

h2:has(+ *) {
	margin-bottom: .5em;
}

p:has(+ *) {
	margin-bottom: 1em;
}

h2 a,
.footer a,
.project-container a,
.switch a,
.text a,
.to-overview {
	text-decoration: underline;
	text-decoration-color: var(--yellow);
	text-decoration-thickness: .075em;
	text-underline-offset: .15em;
	transition: all .15s ease-in-out 0s;
}

	h2 a:hover,
	.footer a:hover,
	.project-container a:hover,
	.switch a:hover,
	.text a:hover,
	.to-overview:hover {
		text-decoration-color: var(--base-color);
	}

/* @end */

/* @group LAYOUT */

.header,
.main,
.footer {
	max-width: 1600px;
	margin-right: auto;
	margin-left: auto;
	padding-right: clamp(1rem, 4vw, 4rem);
	padding-left: clamp(1rem, 4vw, 4rem);
}

/* @end */

/* @group HELPERS */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
} 

.clearfix::after {
  clear: both;
}

/* @end */

/* @group header */

.header {
	margin-bottom: clamp(3rem, 6vw, 6rem);
	padding-top: 1.5rem;
}

/* @end */

/* @group logo */

body {
	background: url(../images/erdgeschoss-logo-background.png) no-repeat center top;
	background-size: auto auto;
}

	@media (max-width: 399px) {
		
		body {
		 	background-size: 1400px auto;
		 }
	}

	@media (max-width: 1599px) {
		
	 body {
	 	background-position: -100px 0;
	 }
	}

.logo {
	margin-bottom: 1rem;
}

	.logo svg {
		max-width: 100%;
		fill: var(--background-color);
	}

	@media (max-width: 399px) {
		
		.logo {
			
		}
		
	}
	
	@media (min-width: 400px) {
		
			.logo svg {
				width: 400px;
				height: auto;
			}
	}

/* @end */

/* @group main */

.main {
	margin-bottom: 4rem;
}

/* @end */

/* @group tags, tag */

.tags {
	margin-bottom: 1.25rem;
}

.tag {
	float: left;
	margin-bottom: .25rem;
	padding: .3em .5em .2em;
	background-color: var(--yellow);
	font-size: 14px;
	line-height: 1.2em;
	transition: box-shadow .1s ease-in-out 0s;
}

.tag:not(:last-child) {
	margin-right: .25em;
}

.tag.active,
.tag--black {
	background-color: var(--base-color);
	color: var(--background-color);
}

.tag.clickable:hover {
	box-shadow: 1px 1px 4px rgba(0,0,0,.25);
}

/* @end */

/* @group cards */

.cards {
	display: grid;
	grid-gap: .4rem;
}

	@media (min-width: 700px) {
		
		.cards {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	
	@media (min-width: 1200px) {
		
		.cards {
			grid-template-columns: repeat(3, 1fr);
		}
	}

/* @end */

/* @group card */

.card {
	position: relative;
	padding-inline: clamp(1.5rem, 3vw, 3rem);
	padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
	background-color: var(--lightgrey);
	overflow: hidden;
	transition: transform .3s ease-in-out 0s;
}

	.card__caption {
		margin-bottom: 1.5em;
	}

	.card__image {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		color: transparent;
		box-shadow: var(--image-shadow);
		transition: all .2s ease-in-out 0s;
	}
	
	.card:hover .card__image {
		transform: scale(1.05);
	}
	
	.card__link {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	@media (max-width: 699px) {
		
		.card {
			margin-inline: calc(-1 * clamp(1rem, 4vw, 4rem));
		}
	}

/* @end */

/* @group project */

.project-container {
	padding-inline: clamp(2rem, 3vw, 3rem);
	padding-top: clamp(1rem, 2.5vw, 2.5rem);
	background-color: var(--lightgrey);
}

	.project-container h1 {
		margin-bottom: unset;
	}
	
	.project-description {
		
	}
	
	.project-text {
		margin-top: 1em;
	}
	
	.project-link {
		margin-bottom: 1em;
		word-break: break-all;
	}
	
		.project-link::after {
			content: " ↗︎";
		}

.project-tags {
	float: left;
	margin-bottom: .75rem;
}

@media (max-width: 999px) {
	
	.project-container {
		margin-inline: calc(-1 * clamp(1rem, 4vw, 4rem));
	}
	
}

/* @end */

/* @group screenshots */

.screenshots {
	width: 100%;
	display: grid;
	grid-gap: .5rem;
	margin-top: 1.5em;
}

	.screenshots img {
		width: 100%;
		height: auto;
		box-shadow: var(--image-shadow);
	}
	
	.screenshot-desktop {
		aspect-ratio: 4 / 3;
	}
	
	.screenshot-tablet {
		aspect-ratio: 1 / 1;
	}
	
	.screenshot-phone {
		aspect-ratio: 1 / 3;
	}
	
	@media (max-width: 999px) {
		
		.screenshots {
			grid-template-columns: 3fr 1fr;
		}
		
			.screenshots > *:first-child {
				grid-column: span 2;
			}
	}

	@media (min-width: 1000px) {
		
		.screenshots {
			grid-template-columns: 4fr 3fr 1fr;
		}
	}

/* @end */

/* @group to-overview */

.to-overview::after {
	content: " ↑";
}

/* @end */

/* @group switch */

.switch {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
	margin-top: 1rem;
}

	.switch__item {
		position: relative;
	}

		.switch__item--prev::before {
			content: "← ";
		}
		
		.switch__item--next::after {
			content: " →";
		}
		
	.switch__item--next {
		grid-column: 2;
		text-align: right;
	}

	.switch__label {
		font-weight: bold;
	}

/* @end */

/* @group text */

.text {
	max-width: 42rem;
}

/* @end */

/* @group footer */

.footer {
	display: grid;
	grid-column-gap: 3rem;
	padding-bottom: 4rem;
}

	@media (max-width: 799px) {
		
		.footer > *:last-child {
			padding-top: 1.5rem;
		}
		
	}

	@media (min-width: 600px) and (max-width: 799px) {
		
		.footer {
			grid-template-columns: auto 1fr;
		}
		
			.footer > *:first-child,
			.footer > *:last-child {
				grid-column: span 2;
			}
			
	}
	
	@media (min-width: 800px) and (max-width: 999px) {
		
		.footer {
			grid-template-columns: auto auto 1fr;
			grid-row-gap: 1.5rem;
		}
		
			.footer > *:last-child {
				grid-column: span 3;
			}
		
	}

	@media (min-width: 1000px) {
		
		.footer {
			grid-template-columns: auto auto auto 1fr;
		}
		
		.footer > *:last-child {
			text-align: right;
		}
	}

	
	
/* @end */