@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Indie+Flower&display=swap');

	$starFieldWidth: 2560;
	$starFieldHeight: 2560;
	$starStartOffset: 600px;

	$starOneScrollDuration: 100s;
	$starTwoScrollDuration: 125s;
	$starThreeScrollDuration: 175s;
	$numStarOneStars: 1700;
	$numStarTwoStars: 700;
	$numStarThreeStars: 200;
	$numComet: 10;

/* list > */
.list_center {
	position: relative;
	left: 50%;
	right: 50%;
    margin-right: 50%;
    margin-left: auto;
    max-width: 500px;
	text-align: left;
}

li {
	font-family: 'Montserrat', Arial, Optima, sans-serif;
	font-size: 0.8em;
}

/* < list */

.set_center {
	text-align: center;
}

html, body {
	min-height: 100vh;
	max-width: 100vw;
	margin: 0;
	overflow-x: hidden;
}

.main-content {
	padding-top: 15vh;
	margin-left: 25vw;
	margin-right: 25vw;
	width: 50vw;
	max-width: 50vw;
	min-height: 100vh;
	max-height: 100%;
	font-family: Calibri, Segeo, Segeo UI, Optima, sans-serif;
	background-color: rgba(0, 0, 0, 0.55);
	color: white;
	z-index: -1;
}

.blog_text {
	text-align: left;
	padding-left: 10%;
	padding-right: 10%;
	line-height: 1.1;
	font-family: 'Montserrat', Arial, Optima, sans-serif;
	font-size: 1.2em;
}

table {
	line-height: 1.5em;
}

h1 {
	font-family: 'Montserrat', Century-Gothic, Arial, Optima, sans-serif;
}

/* CSS HEX 
--african-violet: #9e76abff;
--periwinkle: #dacff9ff;
--telemagenta: #d5347aff;
--egyptian-blue: #2f3ca2ff;
--penn-blue: #060c40ff;
--medium-blue: #3f17b5;
*/



.background {
	width: 100vw;
	min-height: 100vh;
	position: fixed;
	background-image: url("bilder/sky.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -3;
	right:0;
	left:0;
}

.reader {
	margin-left: 25vw;
	margin-right: 25vw;
	width: 50vw;
	height: 100vh;
	position: absolute;
	right:0;
	left:0;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
	z-index: -1;
}

.blog_p {
	padding-bottom: 5em;
}

#logo {
	max-width:100%;
}

	/* Masonry --> */
.flex-container {
	margin-left: 10vw;
	margin-right: 10vw;
	margin-top: auto;
	padding-top: 10vh;
	max-width: 80vw;
	display: flex;
	flex-flow: column wrap;
	align-content: center;
	height: 170vh;
	overflow: visible;
	background-color: rgba(0,0,0,0.55);
	
}

.flex-container::before,
.flex-container::after {
	content: "";
	flex-basis: 100%;
	width: 0;
	order: 2;
}


.blogpost {
	width: 40vw;
	margin-bottom: 1em;
	margin-top: 1em;
	margin-left: 0;
	margin-right: 0;
	max-height: auto;
	padding: 5px 0px 0px 0px;
	background-color: rgba(0,0,0,0);
	color: white;
	font-family: 'Montserrat', Arial, Optima, sans-serif;
}

.blogpost:nth-child(2n+1) {order: 1;}
.blogpost:nth-child(2n) {order: 2;}
	/* <-- Masonry */
	
	.post_date {
	margin: 0px 0px 0px 0px;
}

#aboutme {
	position: relative;
	top: 90vh;
	margin-left: 25%;
	margin-bottom: 0;
	padding-top: 0.35em;
	text-align: center;
	width: 50vw;
	height: auto;
	background-color: rgba(0,0,0,0.55);
	color: white;
	font-family: 'Bangers', Calibri, Segeo, Segeo UI, Optima, sans-serif;
	font-size: 4em;
}



	/* navigation > */
nav {
	display: flex;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0px;
	width: 100vw;
	font-family: 'Montserrat', Calibri, Segeo, Segeo UI, Optima, sans-serif;
	font-size: 1.1em;
	background-color: rgba(0,0,0,0.4);
}

.nav_ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.nav_li {
	float: left;
}

.nav_li .nav_a {
	display: block;
	text-decoration: none;
	color: #DCD0F8;
	text-align: center;
	padding: 14px 16px;
	text-shadow: 0px 0px 0px 10px black;
	transition: text-shadow 0.5s;
	transition: color 0.5s;
	background-color: rgba(0,0,0,0.4);
	font-size: 1.1em;
}



	/*navigationbar-hover*/
.nav_li .nav_a:hover:not(#active) {
	text-shadow: 1px 1px 3px rgba(255,0,64,0.6);
	color: #ff0178;
}
	/*navigationbar aktive seite*/
#active {
	text-shadow: 1px 1px 3px rgba(255,66,145,0.7);
	color: #ff0178;
}
	/* < navigation */

	/* disclaimer dropdown > */
.discl_dropdown {
	position: relative;
	opacity: 0.8;
	text-align: center;
}

.discl_dropdown_content {
	display: none;
	background-color: rgba(0,0,0,0);
	z-index: 1;
	color: #DCD0F8;
	text-align: center;
	margin: 0 1em 0 1em;
}

.discl_dropdown:hover .discl_dropdown_content {
	display: block;
}
}
	/* < disclaimer dropdown */

	/* links > */
	a {
	color: #DCD0F8;
	text-decoration: none;
	text-shadow: 0px 0px 0px #000);
	transition: color, text-shadow 0.4s;
	}
	
a:link {
	color: #DCD0F8;
	text-decoration: none;
}

a:visited {
	color:#DCD0F8;
	text-decoration: none;
}

a:hover {
	color: #ab90f0;
	text-shadow: 0px 0px 8px #d5347aff;
}

a:active {
	color:#DCD0F8;
	text-decoration: none;
}
	/* < links */

/* footer > */
footer {
	display: block;
	position: absolute;
	width: 100vw;
	color: black;
	background-color: black;
}

.footer_ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.footer_li {
	float: left;
}

.footer_ul .footer_li {
	display: block;
	text-decoration: none;
	color: black;
	font-size: 0.8em;
	text-align: center;
	padding: 14px 16px;
}
/* < footer */

/* CSS HEX 
--african-violet: #9e76abff;
--periwinkle: #dacff9ff;
--telemagenta: #d5347aff;
--egyptian-blue: #2f3ca2ff;
--penn-blue: #060c40ff;
--medium-blue: #3f17b5;
*/

/*  poetry spezifisch -->  */
.flex-container-headings {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-content: center;
	background-color: rgba(0,0,0,0.55);
	width: 40vw;
	height: 100vh;
	margin: 0 auto 0 auto;
	text-align: center;
	font-size: 1.2em;
	font-family: 'Inter', Century-Gothic, Arial, Segeo-UI, Optima, sans-serif;
	
}

.poem-container {
	width: 50vw;
	height: 100vh;
	margin-left: 25vw;
	margin-right: 25vw;
	background-color: rgba(0,0,0,0.55);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.poem {
	font-family: 'Montserrat', Candara, Calibri, Segoe, Segoe UI, Optima, sans-serif;
	color: #DCD0F8;
	tab-size: 0;
	font-size: 1.2em;
	text-align: center;
	margin: 0 auto;
	
}

.poem-heading {
	font-family: Century Gothic;
	text-align: center;
	text-decoration: none;
	padding: 0;
	margin: 0.5em;
	color: #DCD0F8;
}

.heading-container {
	padding: 0;
	width: 20vw;
	margin: 1em 30vw 0.5em 30vw;
	font-size: 1.15em;
	align-self: center;
	
}

/* <-- poetry spezifisch */

	/* partial-border > */
.pseudo-partial-border {
	position: relative;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	height: auto;
	border: none;
}

.pseudo-partial-border::before,
.pseudo-partial-border::after {
	position: absolute;
	width: 15%;
	height: 30%;
	content: "";
}

.pseudo-partial-border::before {
	left: 0;
	top: 0;
	border-left: 1px solid #DCD0F8;
	border-top: 1px solid #DCD0F8;
	opacity: 0.3;
}	

.pseudo-partial-border::after {
	right: 0;
	bottom: 0;
	border-right: 1px solid #DCD0F8;
	border-bottom: 1px solid #DCD0F8;
	opacity: 0.3;
}	
/*partial-border für protocol*/
.pseudo-partial-border-prot {
	position: relative;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	border: none;
}

.pseudo-partial-border-prot::before,
.pseudo-partial-border-prot::after {
	position: absolute;
	width: 15%;
	height: 30%;
	content: "";
}

.pseudo-partial-border-prot::before {
	left: -10px;
	top: -10px;
	border-left: 1px solid #DCD0F8;
	border-top: 1px solid #DCD0F8;
	opacity: 0.3;
}	

.pseudo-partial-border-prot::after {
	right: -10px;
	bottom: -10px;
	border-right: 1px solid #DCD0F8;
	border-bottom: 1px solid #DCD0F8;
	opacity: 0.3;
}	

	/* < partial-border */
	/*starry night hintergrund, credit: https://github.com/SeikiMatt/starry-sky*/
@keyframes slide-transparency {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes scale {
	0% {
	transform: scale(1,1)
	}
	50% {
	transform: scale(1.05,1.05)
	}
	100% {
	transform: scale(1,1)
	}
}

@keyframes scale-2 {
	0% {
	transform: scale(0.9,0.9);
	opacity: 0.1;
	}
	50% {
	transform: scale(1.2,1.2);
	opacity: 0.15;
	}
	100% {
	transform: scale(0.9,0.9);
	opacity: 0.1;
	}
}

@keyframes scale-3 {
	0% {
	transform: scale(1.5,1.5);
	opacity: 0.15;
	}
	50% {
	transform: scale(1.3,1.3);
	opacity: 0.05;
	}
	100% {
	transform: scale(1.5,1.5);
	opacity: 0.15;
	}
}

@keyframes rotate {
	0% {
	transform: rotate(0deg)
	}
	50% {
	transform: rotate(180deg)
	}
	100% {
	transform: rotate(360deg)
	}
}

.animate-opacity {
  animation-name: slide-transparency;
  animation-iteration-count: infinite;
}
.freq-5 {
  animation-duration: 5s;
}
.freq-6 {
  animation-duration: 6.33s;
}
.freq-7 {
  animation-duration: 7s;
}
.freq-8 {
  animation-duration: 8.88s;
}
.freq-9 {
  animation-duration: 9s;
}
.freq-10 {
  animation-duration: 10.17s;
}
.delay-2 {
  animation-delay: 1.33s;
}
.delay-4 {
  animation-delay: 2.11s;
}
.bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #21011b, #0e0017, #130026, #170015);
  z-index: -1000;
}
.z-1,
.z-2,
.z-3 {
  position: absolute;
  width: 150vw;
  height: 150vw;
  left: -50vw;
  top: -50vw;
  transform-origin: center;
}

.z-2 {
  animation-name: scale;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  animation-timing-function: ease-in-out;
}

.z-1 {
  animation-name: scale;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-delay: 3s;
  animation-timing-function: ease-in-out;
}

.z-1 {
	animation-name: rotate;
	animation-duration: 240s;
	animation-iteration-count: infinite;
	animation-delay: 2s;
	animation-timing-function: linear;
}


.tile {
  overflow: hidden;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background-size: 512px 512px;
}

.cloud {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.1;
}

.cloud-1 {
	background-image: url(bilder/cloud1.svg);
	transform: scale(1,1);
	animation-name: scale;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	top: -20%;
}
.cloud-2 {
	background-image: url(bilder/cloud2.png);
	background-repeat: no-repeat;
	animation-name: scale-2;
	animation-duration: 40s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	
}
.cloud-3 {
	background-image: url(bilder/cloud2.png);
	opacity: 0.15;
	left: 70%;
	top: 15%;
	transform: scale(1.5,1.5);
	background-repeat: no-repeat;
	animation-name: scale-3;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.cloud-4 {
	background-image: url(bilder/cloud2.png);
	background-repeat: no-repeat;
	opacity: 0.3;
	left: 50%;
	transform: rotate(50deg);
}
.top-left {
  background-image: url("bilder/topleft.png");
}
.top-right {
  background-image: url("bilder/topright.png");
}
.bottom-left {
  background-image: url("bilder/bottomleft.png");
}
.bottom-right {
  background-image: url("bilder/bottomright.png");
}