@import url("catppuccin.css");

* {
	box-sizing: border-box;
	color: var(--ctp-macchiato-text);
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--ctp-macchiato-base);
	;
}

body>div {
	margin-bottom: 20px;
}

td,
th {
	padding-right: 15px;
	text-align: left;
}

a {
	text-decoration: none;
	color: var(--ctp-macchiato-teal);
}

div#steckbrief {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 2rem;
	padding-right: 2rem;
}

div#steckbrief>div.content {
	flex-grow: 1;
	margin-left: 2rem;
}

.card,
#indexlist {
	background-color: var(--ctp-macchiato-surface0);
	max-width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	padding: 1rem;
}

.carousel {
	height: 9rem;
	width: 8rem;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

.carousel>div.me {
	scroll-snap-align: start;
	flex-shrink: 0;
	height: 9rem;
	width: 8rem;
	transform-origin: center center;
	transform: scale(1);
	transition: transform 0.5s;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel>div.me>img {
	height: 9rem;
	width: 8rem;
	border-radius: 5px;
}

div.me>img:hover {
	/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake 0.5s;

	/* When the animation is finished, start again */
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}

	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}


/* Use https://codepen.io/sosuke/pen/Pjoqqp to get color. */
.filter {
	filter: invert(83%) sepia(48%) saturate(266%) hue-rotate(114deg) brightness(91%) contrast(83%);
}

/* Webring: */
#webring {
	display: table;
	margin-top: 20px;
}

#webring a {
	text-decoration: none;
	color: var(--ctp-macchiato-teal);
	border-radius: 0.5ch;
	padding: 0.5ch;
	margin: 0.5ch;
}

#webring #webring-about {
	font-weight: bold;
}