/* ############################################### */
/* ###############   Lyzeum - CSS   ############## */
/* ############################################### */
/* ###############    für Mobiles   ############## */
/* ############################################### */
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap');
/* Quelle: M - SoftTech:*/ /* https://www.youtube.com/watch?v=LD74MTBc3pw */
:root{
	--lyzeum_dark_fontcolor: #161e2c;
	--lyzeum_dark_background: #161e2c;
	--lyzeum_fontcolor: #ccbba3;
	--lyzeum_background: #ccbba3;
}
body{
}

.merienda-<uniquifier> {
  font-family: "Merienda", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

//* ###############  Sprachen ####################### */
.lyzeum_languages{
	visibility: hidden;
	position: fixed;
	top: 5vh;
	left: 3wv;
	width: 10em;
	height: 8em;
	z-index: 300;
}


//* ###############  Lyzeum ####################### */
.lyzeum_responsive { /* Darstellung abhängig vom Viewport skalieren */
	position: fixed;	/* Position festgelegt */
	/* color: var(--main-color); */
	color: var(--lyzeum_fontcolor);
	background-color: rgba(0, 0, 0, 0.7); /* overlay */
	font-size: 2.9rem;
	font-weight: bold;	
	bottom: 20vh;
	right: 20vw;
	/* bottom: 2.5vw; */
	/* right: 3vw; */
	z-index: 700;
}

.lyzeum_resolutions{
/* .lyzeum_whoami_desktop_small{ /* 900-1050 px */ 
	/* position: fixed;	/* Position festgelegt */ 
	/* color: 000; */
	/* font-size: 0.001vw; */
	/* bottom: 0.1vw; */
	/* right: 3vw; */
	/* z-index: 800; */
/* } */
/* .lyzeum_whoami_tablet_landscape{ /* 751-900 px */ 
	/* position: fixed;	/* Position festgelegt */ 
	/* color: 000; */
	/* font-size: 0.001vw; */
	/* bottom: 0.1vw; */
	/* right: 3vw; */
	/* z-index: 800; */
/* } */
/* .lyzeum_whoami_tablet_portrait{ /* 600-750 px */ 
	/* position: fixed;	/* Position festgelegt */ 
	/* color: 000; */
	/* font-size: 0.001vw; */
	/* bottom: 0.1vw; */
	/* right: 3vw; */
	/* z-index: 800; */
/* } */
/* .lyzeum_whoami_mobile_landscape{ /* 451-600 px */ 
	/* position: fixed;	/* Position festgelegt */ 
	/* color: 000; */
	/* font-size: 0.001vw; */
	/* bottom: 0.1vw; */
	/* right: 3vw; */
	/* z-index: 800; */
/* } */
/* .lyzeum_whoami_mobile_portrait{ /* 301-450 px */  
	/* position: fixed;	/* Position festgelegt */ 
	/* color: 000; */
	/* font-size: 0.001vw; */
	/* bottom: 0.1vw; */
	/* right: 3vw; */
	/* z-index: 800; */
/* } */
/* .lyzeum_whoami_mobile_old{  /* 151-300 px */ 
	/* position: fixed;	/* Position festgelegt */ 
	/* color: 000; */
	/* font-size: 0.001vw; */
	/* bottom: 0.1vw; */
	/* right: 3vw; */
	/* z-index: 800; */
/* } */
}

/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */
/* ################  Landingpage Titel  ####################### */
/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */


.lyzeum_header{ /* Overlay hintergrund */
	visibility: hidden;
	position: fixed;	/* Position festgelegt */
	background-color: rgba(0, 0, 0, 0.4); /* overlay */
    top: 1vh; 		/* Y-Position */
    left: 0vw; 	/* X-Position */  
	width: 100%;
	height: 26vh;
	z-index: 200;
}


.lyzeum_title{ /* Lyzeum Titel */
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;

	position: fixed;	/* Position festgelegt */
	font-size: 9.3vw;	/* Schriftgröße Titel */
	/* background-color: rgba(0, 0, 0, 0.5); /* overlay */ 
	text-align: right; /* Optional: Text zentrieren */

	padding-top: 0.0vw;
	padding-bottom: 0.0vw;
	padding-left: 0.6vw;
	padding-right: 0.6vw;
	margin: 0 auto;
	
	top: 1vw; 		/* Y-Position */
	left: 0.1vw; 	/* X-Position */
	z-index: 900;
}
.lyzeum_com{ /* eure BDSM-Community*/
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;
	position: fixed;
	font-size: 2.8vw;
	
	margin: 0 auto;
	text-align: center; /* Optional: Text zentrieren */

	padding-top: 0.0vw;
	padding-bottom: 0.0vw;
	padding-left: 0.1vw;
	padding-right: 0.6vw;
	
	top: 12vw;		/* Y-Position */
	left: 4vw;		/* X-Position */
	z-index: 400;
}

.lyzeum_info{
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;
	position: fixed;
	font-size: 2.1vw;
	background-color: rgba(0, 0, 0, 0.5); /* overlay */ 
	text-align: center; /* Optional: Text zentrieren */

	border-radius: 1em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 0.9em;
	padding-right: 0.9em;
	
	bottom: 15vw;
	left: 1.6vw;
}
.lyzeum_infobtn {
    color: #ccbba3; 
		font-size: 1.8vw;
    text-decoration: none;
    border: 0.06em solid #fff;
    padding: 0.4em 0.7em;
    border-radius: 2em;
		position: fixed; 
    background-color: rgba(10, 10, 10, 0.4); /* overlay */

    bottom: 10.1vw;	/* Video-hintergrund */
    left: 2.3vw;	/* Video-hintergrund */

    transition: 300ms;
}
.lyzeum_infobtn:hover {
	background-color: #ccbba3;
	color: #000;
	transition: background-color 1.5s ease; /* Fügt eine sanfte Übergangszeit hinzu */
}

.lyzeum_todo{
	position: fixed;
	font-size: 1.1em;
	margin: 0 auto;
	text-align: center; /* Optional: Text zentrieren */
	
    bottom: 19vh;
    left: 3.6vw;
	
}

/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */
/* ################  Registrierte User  ####################### */
/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */
.userhead { /* Link position bekannter User */
	/* Username */
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;
	font-size: 3.4vw;
	position: fixed;
	border-radius: 1.3vw;
	padding: 0.6em;
	/* background-color: rgba(10, 10, 10, 0.4); /* overlay */
	text-align: center; /* Optional: Text zentrieren */

	bottom: 32.5vw;	/* Video-hintergrund */
	right: 0.5vw;	/* Video-hintergrund */
}
.usertext { /* Link position bekannter User */
	/* Begrüßung */
	font-size: 1.4vw;
	position: fixed;
	padding: 0.6vw;
	text-align: center; /* Optional: Text zentrieren */
	top: 22vw;	/* Video-hintergrund */
	right: 5vw;	/* Video-hintergrund */
}
.userinvite { /* Link position bekannter User */
	/* Begrüßung */
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;
	font-size: 2.4vw;
	position: fixed;
	/* background-color: rgba(0, 0, 0, 0.4); /* overlay */
	border-radius: 1.3vw;
	padding: 0.1vw;
	text-align: center; /* Optional: Text zentrieren */

	bottom: 34.5vw;	/* Video-hintergrund */
	right: 3.4vw;	/* Video-hintergrund */
}
.userbtn{
	/* font-family: "Merienda", "Helvetica", sans-serif;*/
	/*  padding: 10px; optionaler Abstand */
	color: #ccbba3; 
	font-size: 1.9vw;
	background-color: rgba(0, 0, 0, 0.4); /* overlay */	
	text-decoration: none;
	/* border: 0.6em solid #73AD21; */
	border: 0.06em solid #fff;
	padding: 0.5vw 1.1vw;
	border-radius: 3vw;
	transition: 300ms;

	position: fixed;
	bottom: 28vw; 		/* Video-hintergrund */
	right: 7.1vw; 		/* Video-hintergrund */

}
.userbtn:hover {
    background-color: #ccbba3;
    color: #000;
}


/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */
/* ##################  Fremde User  ####################### */
/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */

.strangerhead { /* Unbekannter Username */
	/* Username */
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;
	font-size: 3.1vw;
	position: fixed;
	border-radius: 1.3vw;
	padding: 0.2em;
	background-color: rgba(10, 10, 10, 0.4); /* overlay */
	text-align: center; /* Optional: Text zentrieren */
	top: 8vh;	/* Video-hintergrund */
	right: 2vw;	/* Video-hintergrund */
}
.strangerinvite { /* Unbekannter Username */
	/* begrüßungstext */
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;				/* Schriftfarbe */
	font-size: 2.4vw;			/* Schriftgröße */
	position: fixed;			/* Position festgelegt (abhängig vom Viewport) */
	/* border-radius: 1.3em;	/* Rand kanten krümmung*/
	margin: 0.1em;				/* Abstände innerer Rand */
	padding: 0.1em;				/* Abstände äusserer Rand */
	text-align: center; 			/* Optional: Text zentrieren */
	background-color: rgba(0, 0, 0, 0.4); /* overlay */
	/* border: 3px solid #ccbba3;  */
	padding: 0.5vw;
	border-radius: 1.3vw;
	top:  19vw; 		/* Video-hintergrund */
	right: 0.9vh; 		/* Video-hintergrund */
}
.strangerdisclaimer{
	/* Begrüßung */
	font-family: "Merienda", "Helvetica", sans-serif;
	color: #ccbba3;
	font-size: 1.4vw;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.4); /* overlay */
	border-radius: 1.3vw;
	padding: 0.5vw;
	text-align: center; /* Optional: Text zentrieren */

	bottom: 13.5vw;	/* Video-hintergrund */
	right: 5.4vw;	/* Video-hintergrund */
}
.strangerbtn{
	/* font-family: "Merienda", "Helvetica", sans-serif;*/
	/*  padding: 10px; optionaler Abstand */
	color: #ccbba3; 
	font-size: 1.9vw;
	background-color: rgba(0, 0, 0, 0.4); /* overlay */	
	text-decoration: none;
	/* border: 0.6em solid #73AD21; */
	border: 0.06em solid #fff;
	padding: 0.5vw 1.1vw;
	border-radius: 3vw;
	transition: 300ms;

	position: fixed;
	bottom: 9vw; 		/* Video-hintergrund */
	right: 5.5vw; 		/* Video-hintergrund */

}
.strangerbtn:hover {
    background-color: #ccbba3;
    color: #000;
}


/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */
/* ##################   Sonstiges   ####################### */
/* \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */

.lyzeum_todo{
	font-family: "Merienda", "Helvetica", sans-serif;
	/* padding: 10px; /* optionaler Abstand */
	color: #ccbba3; 
	font-size: 0.5em;
	background-color: rgba(0, 0, 0, 0.4); /* overlay */	
	text-decoration: none;
	text-align: right;
	border: 0.6em solid #73AD21;
	border: 0.06em solid #fff;
	padding: 0.1em 0.1em;
	border-radius: 1em;
	transition: 300ms;

	position: fixed;
	width: 1vw;
	height: 1vh;
	bottom: 1vh; 		/* Video-hintergrund */
	right: 1vw; 		/* Video-hintergrund */	
}
.screen_info{
	font-family: "Merienda", "Helvetica", sans-serif;
	font-weight: bold;
	color: #ccbba3;

	/* top: 6vh; */ 	/* Bildhintergrund */
	/*left: 34vh; */ 	/* Bildhintergrund */
	/* border: 0.6em solid #73AD21; */

	font-size: 0.8vw;
	position: fixed;
	bottom: 1vh;	/* Video-hintergrund */
	right: 0.5vw;	/* Video-hintergrund */
	background-color: rgba(0, 0, 0, 0.6); /* overlay */
	border-radius: 1.3em;
	padding: 0 0.6em 0 0.6em;
	text-align: center; /* Optional: Text zentrieren */
}
.lyzeum_footer{
	font-family: "Merienda", "Helvetica", sans-serif;
	font-weight: bold;
	font-size: 0.62vw;
	padding: 0.5vw;
	border-radius: 5px;
	background-color: rgba(10, 10, 10, 0.4); /* overlay */

	/* background-color: #000;*/
	color: #ccbba3; 

	position: fixed;
	bottom: 1vh;
	left: 1vw; 

	border: 1px solid #ccbba3;

	/* text-align: center; /* Optional: Text zentrieren */	
}
.content a {
	/* font-family: "Merienda", "Helvetica", sans-serif;
    font-size: 23px;
    color: #ccbba3; */
	
	position: fixed;
	bottom: 13vh;
	right: 10vh;
	padding: 0.6em; /* optionaler Abstand */
	
    text-decoration: none;
    border: 0.13em solid #fff;
    padding: 0.9em 1.6em;
    border-radius: 3em;
    transition: 300ms;
}
.lyz_video, lyz_img {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -998;
}