/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Libertinus+Mono&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
}

/* Colors */

body {
	background-color: #eff1f5;
	color: #4c4f69;
	accent-color: #8839ef;
}
a {
	color: #8839ef;
}
footer,
footer a {
	color: #7c7f93;
}
.card {
	background-color: #ccd0da;
}
.vertical-line {
	background-color: #7c7f93;
}
#top {
	background: linear-gradient(180deg, rgb(239, 241, 245) 0%, rgba(255, 255, 255, 0) 100%);
}
.portfolio-eintrag summary {
	color: #8839ef;
}
.portfolio-eintrag figcaption {
	color: #6c6f85;
}
.portfolio-eintrag details:open {
	border-color: #9ca0b0;
}
.bg-pink,
.bg-orange,
.bg-yellow,
.bg-blue {
	color: #11111b;
}
.bg-red,
.bg-green,
.bg-darkblue,
.bg-purple,
.bg-text {
	color: #dce0e8;
}
.bg-pink {
	background-color: #ea76cb;
}
.bg-red {
	background-color: #d20f39;
}
.bg-orange {
	background-color: #fe640b;
}
.bg-yellow {
	background-color: #df8e1d;
}
.bg-green {
	background-color: #40a02b;
}
.bg-blue {
	background-color: #04a5e5;
}
.bg-darkblue {
	background-color: #1e66f5;
}
.bg-purple {
	background-color: #8839ef;
}
.bg-text {
	background-color: #4c4f69;
}

@media (prefers-color-scheme: dark) {

	body {
		background-color: #1e1e2e;
		color: #cdd6f4;
		accent-color: #cba6f7;
	}
	a {
		color: #cba6f7;
	}
	footer,
	footer a {
		color: #9399b2;
	}
	.card {
		background-color: #313244;
	}
	.vertical-line {
		background-color: #9399b2;
	}
	#top {
		background: linear-gradient(180deg, rgba(30, 30, 46, 1) 0%, rgba(255, 255, 255, 0) 100%);
	}
	.portfolio-eintrag summary {
		color: #cba6f7;
	}
	.portfolio-eintrag figcaption {
		color: #a6adc8;
	}
	.portfolio-eintrag details:open {
		border-color: #6c7086;
	}
	.bg-pink,
	.bg-orange,
	.bg-yellow,
	.bg-blue,
	.bg-red,
	.bg-green,
	.bg-darkblue,
	.bg-purple,
	.bg-text {
		color: #11111b;
	}
	.bg-pink {
		background-color: #f5c2e7;
	}
	.bg-red {
		background-color: #f38ba8;
	}
	.bg-orange {
		background-color: #fab387;
	}
	.bg-yellow {
		background-color: #f9e2af;
	}
	.bg-green {
		background-color: #a6e3a1;
	}
	.bg-blue {
		background-color: #89dceb;
	}
	.bg-darkblue {
		background-color: #89b4fa;
	}
	.bg-purple {
		background-color: #cba6f7;
	}
	.bg-text {
		background-color: #cdd6f4;
	}

}

/* General Layout */

#content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	@media (width < 56rem) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
#show {
	flex-grow: 1;
}
#content .vertical-line {
	@media (width < 56rem) {
		display: none;
	}
}

.vertical-line {
	margin: 30px 0;
	width: 2px;
}

body,
main,
#show,
#top,
#katze,
.portfolio-eintrag details,
.portfolio-eintrag figure,
#fullscreen-img > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1 {
	text-align: center;
}
h2 {
	text-align: center;
}

main {
	margin: 0 50px;
}

footer {
	margin: 100px 20px 30px 20px;
	text-align: center;
}
footer > hr {
	width: 300px;
}

/* Profile */

.card {
	margin: 5px;
	padding: 5px;
	border-radius: 20px;
}

#bio {
	margin: 30px 0;
	ul {
		margin: 0 15px;
		padding: 15px;
		line-height: 25px;
		list-style-type: none;
	}
	a {
		text-decoration: none;
	}
}

main p {
	text-align: justify;
}

main p,
#bio {
	width: 320px;
}

/* Katze */

#top {
	top: 0;
	width: 40%;
}
@media (width >= 56rem) {
	#top {
		position: fixed;
	}
	#bio {
		margin: 220px 0 30px 0;
	}
}

#katze {
	position: relative;
}
#katze > img {
	animation: katze 4s ease-out infinite;
	height: 100px;
}
#katze > div {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70px;
	background-size: ccover;
	background-position: top;
	background-repeat: no-repeat;
	background-image: url("assets/explosion.gif");
}
@keyframes katze {
	0% {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(2);
	}
	100% {
		transform: scaleX(1);
	}
}

/* Portfolio */

#skills,
.pfbox {
	max-width: 650px;
	padding: 20px;
	text-align: center;
}

#skills {
	line-height: 250%;
}
.skill {
	transition: all 200ms ease-in-out;
	border-radius: 6px;
	padding: 5px 10px;
	font-weight: bold;
	white-space: nowrap;
	opacity: 0.9;
}
.skill:hover {
	padding: 6px 14px;
	opacity: 1;
}

#portfolio {
	max-width: 650px;
	margin: 15px 20px
}
.portfolio-eintrag details:open {
	margin: 0 0 1px 0;
	border-width: 2px;
	border-style: dashed;
}
.portfolio-eintrag details,
.portfolio-eintrag figure {
	margin: 0;
	padding: 15px;
	text-align: justify;
}
.portfolio-eintrag summary {
	transition: all 300ms ease-out;
	font-size: large;
	text-align: center;
	cursor: pointer;
}
.portfolio-eintrag summary:hover {
	letter-spacing: 2px;
}
.portfolio-eintrag img {
	width: 100%;
	max-width: 300px;
	cursor: pointer;
}
.portfolio-eintrag figcaption {
	margin: 10px;
	font-size: small;
	text-align: center;
}

/* Fullscreen Image */

.display-none {
	display: none;
}

#fullscreen-img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	padding: 6.25rem;
	@media (width < 64rem) {
		padding: 3rem;
	}
	@media (width < 48rem) {
		padding: 0;
	}
	background-color: rgba(24, 24, 37, 0.5);
}
#fullscreen-img > div {
	height: 100%;
}
#fullscreen-img > div > div {
	width: 100%;
	height: 100%;
	position: relative;
}
#fullscreen-close {
	position: absolute;
	top: 0;
	right: 30px;
	border: none;
	background: none;
	font-size: xx-large;
	cursor: pointer;
	div {
		padding: 15px;
		background: radial-gradient(circle,rgba(205, 214, 244, 0.8) 0%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.0) 100%);
		img {
			transition: all 150ms ease-out;
			width: 25px;
			height: 25px;
			margin: 15px;
			@media (width < 48rem) {
				margin: 10px;
			}
			opacity: 0.8;
		}
		img:hover {
			filter: drop-shadow(0 3px 5px rgba(205, 214, 244, 1));
		}
	}
}
#fullscreen-img > div > div > div {
	width: 100%;
	height: 100%;
	#fullscreen-src {
		width: 100%;
		height: 100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
}