#profile {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 0.5em;
	padding: 0.5em;
	background-color: white;
}

#profile > img {
	width: 5em;
	border-radius: 100%;
	margin-right: 0.5em;
	box-shadow: 2px 2px 3px silver, -2px 2px 3px silver, -2px -2px 3px silver, 2px -2px 3px silver;
	transition: transform 1s;
}

#profile > img:hover {
	transform: rotate(360deg);
}

#profile > div > h2 {
	font-family: "Poiret One", cursive;
	margin-bottom: 0.3em;
}

#profile > div > p {
	margin: 0;
	margin-bottom: 0.1em;
	word-break: break-word;
}

#slide_kommi {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 10%;
}

#slideshow {
	border-radius: 0.5em;
	background-color: white;
	width: 70%;
	max-width: 80vmin;
	overflow: hidden;
}

#slideshow div {
	display: flex;
	flex-direction: row;
	width: 1100%;
	height: 100%;
    animation: slide 50s linear 2.5s infinite forwards;
}

@keyframes slide {
	0%		{ margin-left: -0%; }
	4%		{ margin-left: -0%; }
	5%		{ margin-left: -100%; }
	14%		{ margin-left: -100%; }
	15%		{ margin-left: -200%; }
	24%		{ margin-left: -200%; }
	25%		{ margin-left: -300%; }
	34%		{ margin-left: -300%; }
	35%		{ margin-left: -400%; }
	44%		{ margin-left: -400%; }
	45%		{ margin-left: -500%; }
	54%		{ margin-left: -500%; }
	55%		{ margin-left: -600%; }
	64%		{ margin-left: -600%; }
	65%		{ margin-left: -700%; }
	74%		{ margin-left: -700%; }
	75%		{ margin-left: -800%; }
	84%		{ margin-left: -800%; }
	85%		{ margin-left: -900%; }
	94%		{ margin-left: -900%; }
	95%		{ margin-left: -1000%; }
	100%	{ margin-left: -1000%; }
}

#slideshow figure {
	position: relative;
	margin: 0;
	border: solid 0.5em white;
	border-radius: 1em;
	overflow: hidden;
}

#slideshow figure > img {
	display: block;
	width: 100%;
	border-radius: 0.5em;
}

#slideshow figure > figcaption {
	position: absolute;
	bottom: 0;
	transition: bottom 0.3s;
	
	width: 100%;
	line-height: 1.2em;
	padding: 0.5em 0;
	
	text-align: center;
	color: white;
	text-shadow: 1px 1px 2px grey;
	
	background: rgba(38, 190, 198, 0.6);
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}

#slideshow:hover figure > figcaption {
	bottom: -2.2em;
}

#kommentieren {
	min-width: 15ch;
	width: 25%;
	border-radius: 0.5em;
	background-color: white;
	padding: 0.5em;
	margin-left: 0.5em;
}

#kommentieren > h2 {
	font-size: 1.2em;
	margin-bottom: 0.3em;
}

#kommentieren > p {
	font-size: 0.6em;
	color: grey;
}

#kommentieren > form > input[type=text] {
	width: calc(100% - 0.8em);
	border: solid 0.1em black;
	outline: none;
	padding: 0.3em;
	margin: 0.2em 0;
	font-size: 0.8em;
}

#kommentieren > form > textarea {
	width: calc(100% - 0.8em);
	border: solid 0.1em black;
	resize: none;
	outline: none;
	padding: 0.3em;
	margin: 0.2em 0;
	font-family: Arial, Verdana, sans-serif;
	font-size: 0.8em;
}

#kommentieren h3 {
	font-size: 0.9em;
	margin: 1em 0 -0.5em 0;
	font-weight: normal;
	text-decoration: underline;
}

#kommentieren h3 + p {
    font-size: 0.7em;
}

#kommentieren h3 + p + img {
    height: 1em;
    border: dashed 1px black;
    padding: 0 0.5em;
}

#kommentieren > form > input[type=checkbox] {
	display: none;
}

#kommentieren > form > input[type=submit] {
	width: 100%;
	background-color: #EBBA44;
	border: none;
	outline: none;
	padding: 0.3em;
	margin: 0.2em 0;
	cursor: pointer;
}

#kommentieren > form > input[type=submit]:hover {
	text-decoration: underline;
}

#kommentare {
	border-radius: 0.5em;
	background-color: white;
	padding: 1em;
	margin-top: 10%;
}

#kommentare > h2 {
	font-family: 'Bungee', cursive;
	line-height: 1em;
	padding: 1em;
	padding-bottom: 0;
}

#kommentare > article {
	position: relative;
	border: solid 0.2em #DD3939;
	padding: 1em;
	margin: 5% 5% 5% 5em;
}

#kommentare > article::before {
	content: "";
	position: absolute;
	bottom: 0.5em;
	left: -3.5em;
	display: block;
	width: 2em;
	height: 2em;
	background-image: url("../ico/person.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#kommentare > article::after {
	content: "";
	position: absolute;
	bottom: 1em;
	left: -0.71em;
	display: block;
	width: 1em;
	height: 1em;
	transform: rotate(45deg);
	-webkit-backface-visibility: hidden;
	border-left: solid 0.2em #DD3939;
	border-bottom: solid 0.2em #DD3939;
	background-color: white;
}

#kommentare > article > h3 {
	font-family: "Poiret One", cursive;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}

#kommentare > article > time {
	display: block;
	padding: 0.2em;
	font-size: 0.7em;
	color: grey;
	border-bottom: solid 0.1em silver;
	margin-bottom: 1em;
}

#kommentare > article > p {
	margin: 0;
	text-align: justify;
	word-break: break-word;
}