@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap');

html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}
body
{
	text-align: center;
	font-family: "Alan Sans", sans-serif;
	font-style: normal;
}
header
{
	border-bottom: solid black 3px;
}
header h1
{
	font-weight: 800;
	margin: 0;
}
footer
{
	border-top: solid black 3px;
}

div.corps
{
	width: 500px;
	margin: 0 auto;
	padding: 0;
}
div.bookend
{
	height: 200px;
}
div.bookend img
{
	width: 96px;
	height: 96px;
	position: relative;
	image-rendering: pixelated;
}
#bookend1 {left: 0px; top:100px;}
#bookend2 {left:10px; top: 60px;}
#bookend3 {left:30px; top:100px;}
#bookend4 {left: 0px; top: 20px;}
#bookend5 {left: 0px; top: 70px;}
div.cadre
{
	margin: auto;
	width: 480px;
	border-style: solid;
	border-width: 3px;
	border-color: black;
	border-radius: 30px;
	transition: 0.3s;
}
div.cadre:hover
{
	background-color: #ffc39d;
	transition: 0.3s;
}
div.cadre a
{
	color: black;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 100%;
}
div.cadre h2
{
	margin: 10px 0;
}
div.cadre img
{
	margin-bottom: 10px;
	width: 30%;
}
p.cadre
{
	margin-top: 0;
}
p.cadre a
{
	color: black;
	font-weight: bold;
}
.modele3d
{
	margin: auto;
	width: 500px;
	height: 500px;
}
#lazy-load-poster
{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url("../img/poster.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#button-load
{
	background-color: #fff;
	color: black;
	cursor: pointer;
	border-radius: 6px;
	display: inline-block;
	padding: 7px 10px;
	font-weight: 500;
	box-shadow: 0 0 8px rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, .25);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	transition: 0.3s;
}
#button-load:hover
{
	background-color: #f0f;
	transition: 0.3s;
}
.controls
{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: left;
	bottom: 8px;
	left: 8px;
}
.hotspot
{
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: none;
	background: #00000000;
	box-sizing: border-box;
	cursor: pointer;
	--min-hotspot-opacity: 0;
}
.hotspot img
{
	width: 32px;
	height: 32px;
	position: absolute;
	left: -6px;
	top: -6px;
}
.annotation
{
	background: rgb(255, 255, 255);
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px;
	color: rgba(0, 0, 0, 0.8);
	display: block;
	font-family: "Alan Sans", sans-serif;
	font-weight: 700;
	left: calc(100% + 1em);
	max-width: 128px;
	overflow-wrap: break-word;
	padding: 0.5em 1em;
	position: absolute;
	top: 50%;
	width: max-content;
}
:not(:defined)>*
{
	display: none;
}

@media (max-width: 640px)
{
	*
	{
		box-sizing: border-box;
	}

	body, div.corps
	{
		width: auto;
		margin: 0;
		padding: 0;
	}

	h1
	{
		font-size: 14vw;
	}
	h2
	{
		font-size: 6vw;
	}
	h3
	{
		font-size: 4vw;
	}
	p
	{
		font-size: 2vw;
	}
	#button-load
	{
		width: 40vw;
		font-size: 5vw;
	}
	.annotation
	{
		font-size: 4vw;
	}

	h2 + img
	{
		max-width: 98%;
	}
	#lazy-load
	{
		height: 98vw;
		width: 98vw;
	}

	div.cadre
	{
		width: 96vw;
	}
	div.bookend
	{
		height: 35vw;
	}

	div.bookend img
	{
		width: 18vw;
		height: 18vw;
	}
	#bookend1 {left:  0; top:20vw;}
	#bookend2 {left:2vw; top:12vw;}
	#bookend3 {left:6vw; top:20vw;}
	#bookend4 {left:  0; top: 4vw;}
	#bookend5 {left:  0; top:14vw;}
	.hotspot img
	{
		width: 10vw;
		height: 10vw;
		position: absolute;
		left: -6px;
		top: -6px;
	}
}
@media (min-width: 640px)
{
	h1
	{
		font-size: 4em;
	}
	p
	{
		font-size: 0.68em;
	}
	.annotation
	{
		font-size: 18px;
	}
}

@media (prefers-color-scheme: dark)
{
	body
	{
		color: #fef3eb;
		background-color: #0e151b;
	}
	header
	{
		border-bottom: solid #fef3eb 3px;
	}
	footer
	{
		border-top: solid #fef3eb 3px;
	}

	div.cadre
	{
		border-color: #fef3eb;
	}
	div.cadre:hover
	{
		background-color: #4f332d;
	}
	div.cadre a
	{
		color: #fef3eb;
	}
	p.cadre a
	{
		color: #fef3eb;
	}
	#button-load
	{
		background-color: #2d3034;
		color: #fef3eb;
	}
	#button-load:hover
	{
		background-color: #4f332d;
	}
	.annotation
	{
		background-color: #2d3034;
		color: #fef3eb;
	}
}