@font-face
{
	font-family: "Thuluth";
	src: url("../fonts/A Thuluth Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "Brittany";
	src: url("../fonts/Brittany.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "IBM Plex Sans Extra Light";
	src: url("../fonts/IBMPlexSans-ExtraLight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
}

@font-face
{
	font-family: "IBM Plex Sans Light";
	src: url("../fonts/IBMPlexSans-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face
{
	font-family: "IBM Plex Sans Medium";
	src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

:root
{
	--font-fantasy: "Brittany", cursive;
	--font-arabic: "Thuluth";
	--font-light: "IBM Plex Sans Extra Light", sans-serif;
	--font-normal: "IBM Plex Light", sans-serif;
	--font-bold: "IBM Plex Sans", sans-serif;
}

:root
{
	--color-creme: #f2eae3;
	--color-rouge: #861f35;
	--color-black: #2f1b1a;
}

:root
{
	--font-base-size: 14pt;
}

html[lang=ar]
{
	:root
	{
		--font-base-size: 16pt;
	}
}

html[lang=ar],
html[lang=ar] *
{
	font-family: var(--font-arabic);
	direction: rtl;
	unicode-bidi: plaintext;
	unicode-bidi: embed;
}

input,
button,
select,
textarea
{
	font: inherit;
}

body
{
	margin: 0;
	text-align: center;
	background: var(--color-creme);

	margin-bottom: calc( var(--font-base-size) * 3 );
}

b, h2,
b *, h2 *
{
	font-family: var(--font-fantasy);
	font-size: 25pt;
	font-weight: normal;
}

*
{
	color: var(--color-rouge);
}

a
{
	text-decoration: none;
}

#mainmatter
{
	padding-right: 25px;
	padding-left: 25px;
}

#opening-animation
{
	position: fixed;
	top: 0;
	text-align: center;
	width: 500vw;
	height: 100vh;
	background: var(--color-creme);
	z-index: 99;
}

html[lang=fr] #opening-animation
{
	margin-left: -200vw;
}

html[lang=ar] #opening-animation
{
	margin-right: -200vw;
}

p, *
{
	font-family: var(--font-normal);
}



#opening-animation > div
{
	display: inline-block;
	text-align: center;
	position: relative;
	width: 100%;
}

#wrap-down,
#wrap-up
{
	position: absolute;
	top: -20vh;
	left: 0;
	right: 0;
	text-align: center;
}

#wrap-down img,
#wrap-up img
{
	text-align: center;
	height: 120vh;
	text-align: center:
}

#opening-animation.play
{
	background: transparent;
}

#opening-animation.play #wrap-up
{
	display: none;
}


@keyframes glissement-enveloppe
{
	from
	{
		margin-top: 0vh;
	}

	to
	{
		margin-top: 100vh;
	}
}

#opening-animation.play #wrap-down
{
	animation: glissement-enveloppe 2s forwards;
}


#opening-animation > *
{
	display: inline-block;
}

#switch
{
	position: fixed;
	right: 10px;
	top: 10px;
	background: var(--color-rouge);
	padding: 8px;
	border-radius: 4px;
	box-shadow: 1px 1px 10px 0px var(--color-creme), -1px -1px 10px 0px var(--color-creme);
	z-index: 100;
}

#switch *, #switch
{
	color: var(--color-creme);
}

#switch .unactive
{
	color: #2f1b1a;
}

#switch a:hover
{
	text-shadow: 2px 2px 4px var(--color-creme), -2px -2px 4px var(--color-creme);
}


#mainscreen
{
	width: 100%;
	height: calc( 100vh - 205px );
	overflow: hidden;
	/*background: url("../img/riad.jpg") no-repeat fixed center;*/

	background-image: url("../img/riad.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: cover;
}

#intro
{
	margin: 0;
	padding: 0;
}

#intro > #basmalah
{
	font-size: calc( var(--font-base-size) * 1.5 );
	font-family: var(--font-arabic);
	margin-top: 10pt;
	margin-bottom: 25pt;
}

#intro > #politesse
{
	font-size: calc( var(--font-base-size) * 1.5 );
	font-family: var(--font-arabic);
}

#intro > p
{
	margin: 0;
}

#mainscreen > img
{
	max-width: 100%;
}


#cul-de-lampe  > img
{
	max-width: 15vw;
}


#time
{
	margin-bottom: calc( 0px - ( var(--font-base-size) * 0.3 ) );
}

#year
{
	margin-top: calc( ( var(--font-base-size) * 0.3 ) );
}

#complexe-date-time,
#complexe-date-time *
{
	font-size: var(--font-base-size) ;
	text-transform: uppercase;
}

html[lang=fr] #complexe-date-time,
html[lang=fr] #complexe-date-time *,
#time,
#monthday *,
#year
{
	font-family: var(--font-light);
}


#weekday, #month
{
	display: inline-block;
	width: calc( var(--font-base-size) * 5 );
	text-align: center;
}

#monthday
{
	position: relative;
}
#monthday *
{
	font-size: calc( var(--font-base-size) * 2 );
	padding-left: calc( var(--font-base-size) * 0.5 );
	padding-right: calc( var(--font-base-size) * 0.5 );
	position: inherit;
	bottom: calc( 0px - ( var(--font-base-size) * 0.3 ) );
}

input:not([type="radio"]):not([type="checkbox"]), button
{
	padding: 10px;
	border-radius: 8px;
	border: 2px solid var(--color-rouge);
	display: inline-block;
}


input:not([type="radio"]):not([type="checkbox"])
{
	min-width: calc( 100% - 20px - ( 2px * 2 ) - ( 25px * 2 ) );
}


form  button
{
	border: 2px solid var(--color-rouge);
	background: var(--color-rouge);
	color: var(--color-creme);
	min-width: 50%;
	text-transform: uppercase;
	font-family: var(--font-bold);
}

form,
form *
{
	color: var(--color-black);
}

.answear > div
{
	background: var(--color-rouge);
	color: var(--color-creme);
	font-family: var(--font-fantasy);
	font-size: calc( var(--font-base-size) * 4 );
	display: inline-block;
	padding: calc( var(--font-base-size) * 1 );
	border-radius: 4px;
	box-shadow: 1px 1px 10px 0px var(--color-creme), -1px -1px 10px 0px var(--color-creme);
}

.answear
{
	position: fixed;
	top: 40%;
	left: 0;
	width: 100%;
	text-align: center;
	background: none;
	opacity: 0;
	visibility: hidden;

	transition:
		opacity 1s ease,
		visibility 1s ease;
}

.answear.visible
{
	opacity: 1;
	visibility: visible;
}

fieldset
{
	border: none;
	padding: 0;
}

html[lang=fr] fieldset,
html[lang=fr] fieldset *
{
	text-align: left;
}

html[lang=ar] fieldset,
html[lang=ar] fieldset *
{
	text-align: right;
}

#map
{
	margin-top: calc( var(--font-base-size) * 3 );
	background-color: var(--color-rouge);
}

#lustre img
{
	text-align: center;
	max-width: 50%;
	margin-top: calc( 3 * var(--font-base-size) );
}


#map iframe
{
	margin-bottom: -10px;
}

.entry
{
	position: relative;
}

.entry .time,
.entry .label
{
	position: absolute;
	display: inline-block;
	width: calc( ( 100vw / 2 ) - 35px ) ;
}

#program .entry:nth-of-type(odd) .label,
#program .entry:nth-of-type(even) .time
{
	left: 0;
	text-align: right;
}

#program .entry:nth-of-type(odd) .time,
#program .entry:nth-of-type(even) .label
{
	right: 0;
	text-align: left;
}

.entry .stroke
{
	height: calc( 2 * var(--font-base-size) );
	width: calc( 0.1 * var(--font-base-size) );
	background-color: var(--color-rouge);
	display: inline-block;
	margin-bottom: -5px;
}

.entry .cercle
{
	height: calc( 0.4 * var(--font-base-size) );
	width: calc( 0.4 * var(--font-base-size) );
	border-radius: calc( 0.2 * var(--font-base-size) );
	background-color: var(--color-rouge);
	display: inline-block;
}

/*
 * Aération
 */

p
{
	margin-top: calc( var(--font-base-size) * 2 );
}

#complexe-date-time
{
	margin-top: calc( var(--font-base-size) * 2 );
}

#house > small
{
	width: 100%;
	display: block;
	margin-bottom: -10px;
}

#address
{
	margin-top: calc( var(--font-base-size) * 0.5 );
}


h2
{
	margin-top: calc( var(--font-base-size) * 2.5 );
}

legend
{
}

fieldset .option:nth-of-type(1)
{
	margin-top: calc( var(--font-base-size) * 1.0 );
}

#fieldset-helper-for-ios-beug
{
	margin-top: calc( var(--font-base-size) * 1.0 );
}

.option
{
	margin-top: calc( var(--font-base-size) * 0.5 );
}

button
{
	margin-top: calc( var(--font-base-size) * 1.5 );
}

#cul-de-lampe
{
	margin-top: calc( var(--font-base-size) * 5.5 );
	margin-bottom: calc( var(--font-base-size) * 2.5 );
}


#main-name
{
	margin-top: calc( var(--font-base-size) * 2);
	font-size: calc( var(--font-base-size) * 2.5 );
	margin-bottom: calc( var(--font-base-size) * 1);
	display: inline-block;
}

#simple-date-time
{
	font-size: calc( var(--font-base-size) * 1.2 );
	font-family: var(--font-light);
}