body {
		margin: 0;
		font-family: MyFont;
		display: flex;
		height: 100vh;
		gap: 20px;
    }
	@font-face {
		font-family: 'MyFont';
		src: url('../fonts/XCharter-Bold.otf') format('opentype'),
		font-weight: 400;
		font-style: normal;
		font-display: swap;
}
    /* Sidebar */
    #menu {
		width: 13%;
		background-color: #fffafa;
		color: #222;
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between;  */
		height: 100vh;
		
    }

    #menu a {
		display: block;
		color: #333;
		text-decoration: none;
		 margin: 10px 0; */
		padding: 0px;
		border-radius: 4px;
    }

    #menu a:hover {
		background-color: #EE82ee;
	}
	.menu-bottom {
		font-size: 12px;
		margin-top: auto;
	}

    .menu-bottom a {
		display: block;
		margin-top: 3px;
		color: white;
		text-decoration: underline;
}

	.menu-bottom a:hover {
		text-decoration-style: wavy;
	}
	
	.mobile {
		display: none;
}
    #content {
		width: 87%;
		padding: 0px;
		box-sizing: border-box;
		/* overflow-y: auto; */
		/* background-color: #C0C0C0; */
		overflow-y: scroll;
		overflow-x: hidden;
		scrollbar-color: #ffb3ff #ffe6ff;
		scrollbar-width: thin;
    }
	#content-inner {
		max-width: 1000px;
		/* width: 100%; */
		margin-left: 0;
		margin-right: auto;
	}
	#twinkler {
		position: fixed;
		top: 5px;
		right: 200px;
		font-size: 40px;
		font-weight: bold;
		color: black; 
		z-index: 1000; 
		animation: mymove 60s;
		perspective: 1000px;
	}
	@keyframes mymove {
		10% {perspective: 10px;}
	}
	#twinkleranimate {
		padding: 0px;
		position: absolute;
		border: 0px solid black;
		transform: rotateX(20deg);
	}
	.responsive-image {
		max-width: 100%;
		max-height: 90vh;

		width: auto;
		height: auto;
		display: block;
		margin: 0; 
		align: left;
}
@media (max-width: 768px) {

	body {
		flex-direction: column;
		gap: 0px;
	}

	#menu {
		width: 100%;
		height: auto;
		position: relative; /* wichtig für absolute Positionierung */
		background-color: #fff7fa;
	}

	#content {
		width: 100%;
		padding: 10px;
	}

	.menu-bottom {
		position: absolute;
		top: 60px;     /* Abstand unter "Twinkler" */
		right: 20px;
		margin: 0px;
		text-align: right;
		font-size: 10px;
	}
	.menu-bottom a {
		font-size: 12px;
		margin: 0px;
	}
	/** .menu-bottom p {
		display: none; */
	}
	#twinkler {
		font-size: 30px;
		/* text-align: right; */
		right: 140px;
	}
	#menu a {
		margin: 0px 0;
	}
	.desktop {
    display: none;
  }

	.mobile {
    display: block;
  }

}

/* contact animation */
#div1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 0px solid black;
  animation: contactani 10s infinite;
  perspective: 20px;
}

@keyframes contactani {
  10% {perspective: 200px;}
}

#div2 {
  padding: 50px;
  position: relative;
  border: px solid black;
    transform: rotateX(45deg);
}