.card {
padding: 20px;
border-radius: 20px;
background: var(--white);
box-shadow: var(--shadow);
margin-bottom: 25px;
}
.card #title {
	margin-bottom: 5px;
}
#picture {
display: flex;
background-image: url("/assets/images/clouds.webp");
background-size: cover;
overflow: hidden;
width: 376px;
}
#picture #face {
	display: flex;
	background-image: url("/assets/svg/face.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 80%;
	height: 80%;
	margin: auto;
}
@media only screen 
and (max-width : 500px) {
	#picture {
		width: 100%;
	}
	#picture #face {
		margin-top: 37%;
		height: 50%;
		width: 50%;
	}
}
#toast {
visibility: hidden;
background-color: var(--black); /* Black background color */
color: var(--white); /* White text color */
text-align: center; /* Centered text */
border-radius: 100px; /* Rounded borders */
padding: 10px; /* Padding */
position: fixed; /* Sit on top of the screen */
bottom: 32px;
margin-left: 42%;
transform: translateX(-42%);
opacity: 0.7;
}
@media only screen 
and (max-width : 980px) {
	#toast {
		margin-left: 25%;
		transform: translateX(-25%);
	}
}
@media only screen 
and (max-width : 500px) {#toast {
		margin-left: 50%;
		transform: translateX(-50%);
	}
}
#toast.show {
	visibility: visible;
	animation: fadein 0.5s;
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 32px; opacity: 0.7;}
}
.changer {
border-bottom: 2px dotted black;
}
#window {
position: fixed;

min-width: 310px;
width:  calc( 100vw - var(--window-hor)*2 );
    height: calc( 100vh - var(--window-ver)*2 );
top:  var(--window-ver);
left: var(--window-hor);

overflow: hidden;
border-radius: 20px;
background-color: #fafafa;
opacity: 90%;

background-color: var(--white);
/*box-shadow: 8px 8px 0px #00000080;*/

  scrollbar-color: var(--black) #00000000;

}
#window #header {
	opacity: 80%;
	/*background-color: aquamarine;*/
	z-index: 10;
	position: relative;
}
#window #content {
	display: block;
	margin: 0px;
	overflow-y: auto;
	padding: 15px;
	height: 87%;

}
#window #content:not(.index) {
		margin-top:-55px;
		padding-top:67px;
		padding-left: 25pt;
		padding-right: 25pt;
	}
#window footer {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 0;
	padding: 5px;
	height: 25px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--white) 100%);
}
@media only screen 
and (max-width : 500px) {
	#window {
		opacity: 70%;
		top:0;
		left:0;
		transform: translate(0,0);
		width: 100%;
		height: 100%;
		border-radius: 0px;
		border: none;
	}
	#window #header {
		position: fixed;
		width: 100%;
	}
	#window #content {
		margin-top: 20pt;

	}
		#window #content:not(.index) {
			margin-top:0pt;
			padding-top:45pt;
		}
	#window #content.full {
		height: 100%;
		padding: 0;
		width: 100%;
	}
}
#window #lc2 {
	display: none;
}
@media only screen 
	and (max-width : 500px) {
		#window #lc2 {
			display: inline;
		}
	}
#header {
margin-left: 0;
display: flex;
padding: 10px;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, var(--white) 32%, var(--white) 100%);
}
#header #right {
	position: absolute;
	right: 10px;
}
@media only screen 
and (max-width : 500px) {
#header {
	padding-left: 0;
	padding-right: 0;
	background: none;
}
	#header.cover {
		padding: 10px;
	}
	#header #right {
		display: none;
	}
}
#back {
--size: 1.4em;
border-radius: 100px;
width: var(--size);
height: var(--size);
margin-right: 5px;

background-color: var(--white);
color: black;
border: 2px solid var(--black);
color: var(--black);
font-size: 18pt;
font-weight: bold;
text-align: center;
}
#back:hover {
	background-color: var(--black);
	color: var(--white);
}
#menu {
padding-top: 4px;
}
#menu a {
	font-size: 15pt;
	border-radius: 7px;
	padding: 4px;
	margin-right: 2px;
}
#menu #lc2 {
	display: none;
}
@media only screen 
and (max-width : 500px) {
#menu {
	background-color: white;
	border-radius: 20px;
	padding: 5px;
	text-align: center;
}
	#menu #lc2 {
		display: inherit;
	}
}
@media only screen 
and (max-width : 500px) {
#header:not(.cover) #menu {
	background-color: var(--white);
	margin-left: auto;
	margin-right: auto;
}
}