* {
  margin: 0;
}

html {
	background-color: #000;
  
}
body 
{ font-family : sans-serif;
  
}
#tableaux{width: 100%; height: 100%; margin: 0px; padding: 0px; margin-top:-99vh }

.save{height: 50vw;
  }
.container {
  --n: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 100%;
  width: 100%;max-height: 100%;
 
  
  
}
a {text-decoration:none;}
.container img {
  width: 100%;
  user-select: none;
  pointer-events: none;
  
  position: fixed;
  top: 00px;
  overflow:hidden;
}

.container H2{
	position: fixed; 
	top: 50px; left: 20px; 
	z-index: 1000; background: #ccc; padding: 40px;
}

.container p
{
	position: fixed; 
	top: 300px; left: 20px; 
	z-index: 1000; background: #ccc; padding: 20px;
	}
.smooth {
  transition: transform calc(var(--f, 1)*.5s) ease-out;
}
.savecolor
{background-color: #475f94;}



body {
  margin: 0;
}

#bg
{ position: fixed; width: 100%; min-height: 100%; left: 0%; margin-right: 0%; top: 0%;
	z-index: -1; text-align: center; overflow: auto;
}
#page
{position: relative; width: 900px; margin: auto; color: #fff; margin-top: 
150px;}

.app
 {
  display: flex;
  min-height: calc(100vh - 32px);
  align-items: flex-start;
  padding: 5px 32px 0;
  font-family: sans-serif;
  
}

.menu-toggle 
{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-label 
{
  position: fixed;
  z-index: 1000001;
  color: white;
  cursor: pointer;
  font-weight: bold;
  display: grid;
}

.menu-label span 
{
  grid-column: 1;
  grid-row: 1;
  transition: opacity 0.2s ease;
}

.menu-label .menu-label-close 
{
  opacity: 0; font-size: 3em;
}

.menu-label .menu-label-open 
{
  opacity: 1; font-size: 3em;
}

.app:has(.menu-toggle:checked) .menu-label-close
 {
  opacity: 1;
}

.app:has(.menu-toggle:checked) .menu-label-open
 {
  opacity: 0;
}

.fwd
{
	position: fixed; font-size: 40px; color: black; top: 50%; left: 90%;
	z-index: 100000; background: #fff; border-radius: 100%;  padding:  10px 20px 10px 20px;
}
.fwd:hover
{
	 color: white; 
	 background: blue; 
}

.back{
	position: fixed; font-size: 40px; color: black; top: 50%; right: 90%;
	z-index: 100000; background: #fff; border-radius: 100%; padding:  10px 20px 10px 20px;
}

.back:hover
{
	 color: white; 
	 background: blue; 
}


.menu-overlay 
{
  position: fixed;
  z-index: 1000000;
  inset: 0;
  clip-path: circle(0 at 0 0);
  transition: clip-path 0.3s ease-in-out;
}

.app:has(.menu-toggle:checked) .menu-overlay
 {
  clip-path: circle(calc(1.42 * 100vmax) at 0 0);
  transition: clip-path 0.5s ease-in-out;
}

.menu-nav 
{
  position: fixed;
  inset: 0;
  background-color: #fa4224;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* could be calculated with js, for dynamic dimension that respect the navigation dimensions, but i hardcoded it for now */
  clip-path: polygon(0% 4%, 64% 100%, 100% 100%, 100% 38%, 12% 0%, 0% 0%);
}

.menu-nav ul 
{
  margin: 0;
  padding: 32px;
  list-style: none;
  text-align: right;
  color: white;
  font-weight: bold;
  font-size: 36px;
}

.menu-nav a 
{
  color: inherit;
  text-decoration: none;
}

.menu-nav a:hover 
{ color: black;}
#title
{font-family: sans-serif; font-size: 2em; color : white; drop-shadow: 10px 10px 20px 20px #000; position: fixed; right: 00px; padding-right: 10px; top: 20px; z-index: 10000
	position: fixed; z-index: 100; top: 0px;height: 40px; padding-top: 20px; background: #000; width: 100vw; text-align: right; box-shadow: 10px 10px 100px 20px white;
}

	      
.items{
	float: left; 
	width: 400px; 
	text-align:left;
	overflow:hidden; 
	margin: 20px; 
	border:solid 1px #aaa;
	border-radius: 10px;
	background: none;
	box-shadow: 0px 12px 28px -12px #000;
	
	}
.infocard
	{width: 100%; background: #ddd; position: relative; margin-top: -100px; opacity: 0.9 }

.title
{ text-transform: capitalize; padding-left: 12px;   padding-bottom: 0px; padding-top: 12px; font-size: 16px; font-weight: normal; padding-bottom: 8px; color: #444;}

.subtitle
{ line-height: 1.5em; text-transform: capitalize; padding-left: 12px;   padding-bottom: 12px; padding-top: 0px; font-size: 12px;  font-weight: normal; color: #666; }

.items img{
	width: auto; 
	text-align:center;
	min-height:400px; 
	max-height: 400px; 
	width: 100%;
	min-width: 100%;
	margin-left: 0; 
	margin-right: 0; 
	}
	
.items a{
	color: #000; 
	text-decoration:none;
	}
.items h2
{ padding-left: 8px;  padding-bottom: 0px; font-size: 16px;}

#main
	{text-align center; margin-left: auto; margin-right: auto; width: 80%;  }

#more
	{text-align center; margin-left: auto; margin-right: auto; width: 80%;  }

.maintext
	{text-shadow: 2px 2px 10px white;  font-size: 1.5em; font-family: helvetica; color: #000; padding: 0px;}

.typewriter-text {
		
		font-size: 3em; font-family: helvetica; color: #000; padding: 0px; text-shadow: 2px 2px 10px white; 
  /* Initial state: hide text content */
  overflow: hidden; 
  /* Prevent text from wrapping to a new line */
  white-space: nowrap;
  /* Use a monospace font for better character spacing predictability (optional but recommended) */
  font-family: monospace; 
  /* Add a blinking cursor effect using the right border */
  border-right: .15em solid white; 
  /* Set a custom property for the number of characters, or hardcode it */
  --characters: 20; /* Approximate number of characters in the text */

  /* Apply the typing and blinking animations */
  animation: 
    typing 4s steps(var(--characters), end),
    blink-caret .75s step-end infinite;

  /* Ensures the animation stays at its final state after completion */
  animation-fill-mode: forwards; 
}
 #artbox{position: fixed; 
 left: 0px; bottom: 10px; width: 98vw; height: 70px; overflow-x : auto; z-index: 100001;}
.art{width: 70px; float:left; height: 70px;overflow:hidden;margin: auto;}
.wide img{height: 100%;}
.tall img{width:100%}
.fulltall img{height: 100vh}
.fullwide img{height: 95%;}
.art:hover{opacity: 0.8;}

/* Keyframes for the typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    /* Animate the width to the full width of the text */
    width: 675; 
  }
}

/* Keyframes for the blinking cursor animation */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
 .recent
 {color: black; width: 100%; max-width: 550px; margin:auto; margin-top: 100px;  border: solid 1px #eee; background: #ddd; padding: 20px; margin-top: 20px; border-radius: 30px;}

.recent img
{width: 100%; margin: auto; margin-bottom: 20px;  } 

.recent a {color: white;} 

#recentnews
{font-family: helvetica; color: black; margin-top: 100px; font-size 1em; padding: 20px; text-shadow: 2px 2px 0px white; }

#artist{ position:fixed; z-index: 100000;}
#studiotitle
{font-size: 5em; font-family: helvetica; color: #fff; padding: 40px;}

#studiotext
{font-size: 3em; font-family: helvetica; color: #fff; padding: 40px;}

.coolbutton
 { width: 300px; height: 50px; margin: auto; margin-top: 40px; margin-bottom: 30px; margin-left: 25%; margin-right: 25%;  text-align: center;  }

#goback
{
	text-decoration:none; color: #000; font-size: 1em;
}

.popupPhoto
{width:100%; max-width: 500px;}

.popupText{ margin:auto; max-width: 500px;padding: 10px;}

.contactText{
	font-size: 1.2em; font-family: helvetica; color: #fff; padding: 20px; margin-top: 300px
	
}
@media screen and (max-width: 501px) {
	
	#page{ width: 100%; }
	.typewriter-text{ font-size: 1.7em; margin-top: 50px; color: #fff; padding-left: 5px; }
	.maintext { color: #fff; padding-left: 5px;  }
	.recent{width: auto; padding : 10px; overflow-x: hidden;  }
	@keyframes typing {
  from {
    width: 0;
  }
  to {
    /* Animate the width to the full width of the text */
    width: 440; 
  }
}
iframe{width:440px; height: 300px}

#artist{ position: relative; max-height: 90vh; max-width: 100%; margin-top: 100px;
	}
	#artist img{ max-height: 90vh; max-width: 100% }

#artbox{position:relative; height: auto; margin-top: 40px; }
.wide img{height: 100%;
	
	margin-left: -20%;
	
}

.fullwide img{width: 100%;
	height: auto
}

.fulltall img{height: 75%;

}
	}

@media screen and (min-width: 501px) {
	iframe{width:500px; height: 350px}
	#page{ width: 900px; max-width: 90%; }
	.typewriter-text{ font-size: 2.5em; margin-top: 50px; color: #000;}
	.maintext { color: #000; text-shadow: 2px 2px 0px white;  }
	.recent{width: auto; padding : 10px; }
	
	#artist{ position: fixed; z-index: 100000; width: 100%; height: 100vh;   top: 80px; left: 0px; text-align: center; margin: auto; }
	#artist img{ max-height: 90vh; max-width: 100% }
	}