@media (max-width: 768px) {
	*, :root {
	--small_text_size:12px;
	--small_text_lh: 113%;
	--medium_text_size: 12px;
	--medium_text_lh: 113%;
	--large_text_size: 5.3vw;
	--large_text_lh: 113%;

	--large_padding: 0.8rem 0.8rem 1.2rem 0.8rem;


	.green, #interface_details, #algorithmes, #credits {
		color:black;
		background-color: var(--green);
	}

	.black, #book, #software {
		color:white;
		background-color: black;
	}

	#topbar {
		position:fixed;
		width:100%;
		z-index:3;
		font-size: var(--small_text_size);
		line-height: var(--small_text_lh);
		padding-bottom:1rem;
	}


	#submenu > * {
		margin-left:5px;
	}

	#submenu .active {
		display:none;
	}

	#introduction {
		padding-top:20vw;
	}


	#interface > video {
		margin-left:-0.4vw;
		margin-top:3vw;
		width:96vw;
	}

		/* Hide scrollbar for Chrome, Safari and Opera */
	*::-webkit-scrollbar {
	  display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	* {
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}

	#book {
		position: relative;
		top:auto;
		right:auto;
		z-index:2;
		background-color: auto;
	}

	video {
		position: relative;
		top:0;
		right:0;
		margin-right:0;
		width:95vw;
		background-color: transparent;
		z-index:1;
		pointer-events: auto;
	}

	#circle {
		position: relative;
		top:auto;
		right:auto;
		width:auto;
		aspect-ratio: auto;
		border-radius: 0px;
		color:white;
		background-color: transparent;	
		transform: none;
		text-align: left;
		display: block;
	  	padding-top:5px;
	  	font-size: var(--small_text_size);
		line-height: var(--small_text_lh);
	}

	#circle br {
		display: none;
	}
	#circle.green_shadow {
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.detail > video {
		position: relative;
		display: block;
		width:60vw !important;
		margin-top:2vw;

	}
	#detail_zoom {
		margin-top:0vw;
		margin-left:30vw;
		margin-bottom:auto;
	}

	#detail_reglages {
		margin-top:5vw;
		margin-left:2vw;
	}

	#detail_niveaux {
		margin-top:5vw;
		margin-left:12vw;
		color:black;
	}

	.algorithmes {
		display:grid;
		margin-top:3vw;
		gap: 3vw;
		grid-template-columns: 1fr 1fr;
	}

	#software {
		display:grid;
		margin-top:1.5vw;
		gap: 1vw;
		grid-template-columns: 1fr 1fr ;
	}

	#software a:hover {
		color:var(--green);
	}

	#credits br {
		display: none;
	}

	#credits .caption {
		margin-top:1rem;
		display: block;
	}

	#credits a:hover {
		color:black;
	}


}