/* VARIABLES */


:root
{
	/* colors */
	--background-color: #fdf9f1;
	--border-color: #414855;
	--title-color: #bd6b65;
	--text-color: #777;

	--page-margin: 4vmax;

	--title-font: "Cormorant SC";
	--calligraphy-font: "Meow Script";
	--text-font: "Cormorant Garamond";
	--visitor-font: "Cormorant Garamond";
}


/* GLOBALS */


html
{
	overflow-x: hidden;
}

body
{
	margin: 0;
	color: var(--text-color);
	font-family: var(--text-font);
	font-size: 18px;

	background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6
{
	color: var(--title-color);
	font-family: var(--title-font);
	font-size: 2em;
	font-weight: lighter;
	font-style: italic;
	margin: 0;
}

em
{
	font-family: var(--calligraphy-font);
	font-style: normal;
	font-size: 1.5em;
}

.page
{
	width: calc(100vw - var(--page-margin) * 2);
	padding: var(--page-margin);

	display: flex;
	justify-content: center;
	align-items: center;
}

.screen
{
	width: calc(100vw - var(--page-margin) * 2);
	height: calc(100vh - var(--page-margin) * 2);
	padding: var(--page-margin);

	display: flex;
	justify-content: center;
	align-items: center;
}

.screen > div,
.page > div
{
	height: 100%;
	width: 100%;
}

.square
{
	height: 25vw;
	width: 25vw;
}

.button
{
	background-color: var(--title-color);
	text-decoration: none;
	color: var(--background-color);
	border: none;
	font-family: var(--text-font);
	padding: 0.5em 2em;
	cursor: pointer;
	transition: background-color 0.5s;
}

.button:hover
{
	background-color: color-mix(in oklab, var(--title-color) 75%, #FFF 25%);
}

.button:active, a:active:
{
	border: none;
}

.testFrame
{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.3);
}

.image
{
	background-size: cover;
	background-position: top center;
	filter: grayscale(1);
	opacity: 0.8;
}

.marquee 
{
	position: relative;
	width: 100vw;
	max-width: 100%;
	overflow: hidden;
}

.marquee-track
{
	position: absolute;
	white-space: nowrap;
	will-change: transform;;
	animation: marquee 60s linear infinite;
}

@keyframes marquee 
{
	from
	{
		transform: translateX(0);
	}
	to
	{
		transform: translateX(-50%);
	}
}

input
{
	all: unset;
}

input[type="radio"] 
{
	appearance: none;
	background-color: transparent;
	margin: 0;

	font: inherit;
	color: currentColor;
	width: .5em;
	height: .5em;
	border: 1px solid var(--text-color);
	outline: 2px solid var(--background-color);
	outline-offset: -4px;
	border-radius: 50%;
	margin: auto .25em;
}

input[type="radio"]:checked
{
	background-color: var(--text-color);
}

input[type="text"],
input[type="password"]
{
	height: 1em;
	border: 2px solid var(--text-color);
	background-color: var(--background-color);
}

input[type="text"]:focus,
input[type="password"]:focus
{
	outline: none;
}

/* HOME */


#home > .image
{
	background-image: url("../image/home.jpg");
}

#home > .title-position
{
	position: absolute;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#home .title-frame
{
	background-color: var(--background-color);
	padding: 1vmax 3vmax 1.25vmax 3vmax;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#home h1
{
	font-size: 5em;
}


/* INTRO */


#intro > div
{
	height: 55%;
}

#intro > .image
{
	flex: 4;
	background-image: url("../image/intro.jpg");
	background-size: cover;
	background-position: top center;
	filter: grayscale(1);
	opacity: 0.8;
}

#intro > .space
{
	flex: 1;
}

#intro > .text
{
	flex: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* CHATEAU */


#chateau
{
	flex-direction: column;
	justify-content: left;
}

#chateau h3
{
	text-align: left;
	width: 100%;
}

#chateau .square-direction
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#chateau .square-container
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#chateau .square
{
	text-decoration: none;
	color: var(--title-color);
	margin-top: var(--page-margin);
	position: relative;
}

#chateau .image
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#chateau .text-position
{
	position: absolute;
	top: -10px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#chateau .text-frame
{
	background-color: var(--background-color);
	padding: 10px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


/* RSVP */


#rsvp .rsvp-position
{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}


/* CARROUSEL */


#carrousel .marquee
{
	height: 25vw;
}

#carrousel img
{
	height: 25vw;
	aspect-ratio: 0.8;
	object-fit: cover;
	opacity: 0.75;
	margin-right: calc(var(--page-margin) * 0.5);
}


/* FOOTER */


#footer p
{
	width: 100%;
	text-align: center;
	margin: 100vh 0 2em 0;
}

#footer-back
{
	margin-top: 10em;
	width: 100%;
	text-align: center;
}

#footer-back a
{
	text-decoration: underline;
	color: inherit;
}
	

/* LOGIN */


#login
{
	width: calc(100vw - var(--page-margin) * 2);
	height: calc(100vh - var(--page-margin) * 2);
	padding: var(--page-margin);
}

#login form
{
	display: flex;
	flex-direction: column;
	font-size: 1.5em;
	width: 50%;
	align-items: center;
	margin-bottom: 2em;
}

#login .login-language
{
	display: flex;
	flex-direction: row;
	margin-bottom: 2em;
	margin-right: 2em;
	font-family: var(--title-font);
}

#login input[type=radio]
{
	margin-left: 3em;
}

#login input[type=text],
#login input[type=password]
{
	width: 100%;
	font-size: 1em;
	font-family: var(--visitor-font);
	text-align: center;
	color: color-mix(in srgb, var(--text-color) 60%, black 40%);
	letter-spacing: .2rem;
	font-weight: 100;
}

#login p
{
	font-size: 0.65em;
	color: var(--title-color);
	margin: 0;
	display: block;
	height: 1em;
}

#login button
{
	padding: 0.5em;
	font-size: 1.5em;
	margin-top: 1.5em;
}

#password-row
{
	width: 50%;
	display: flex;
	flex-direction: row;
}

#password-row input
{
	width: 100%;
	height: 1.25em;
}

#password-row a
{
	height: 1.25em;
	aspect-ratio: 1;
	text-decoration: none;
	border: 2px solid var(--text-color);
	border-left: none;
	background-image: url("../image/icon/eye.svg");
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center center;
}


/* INFO PAGE */


#info
{
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#info-position
{
	flex-direction: column;
	width: auto;
}

#info h4,
#info h5,
#info h6
{
	font-size: 1.5em;
}

#info h2,
#info h3,
#info h4,
#info h5,
#info h6,
#info p
{
	width: 100%;
}

#info h2	
{
	text-align: center;
}

#info h3,
#info h4,
#info h5,
#info h6
{
	color: var(--text-color);
	margin: 2em 0 0.8em 0;
}


.page-0, .page-3
{
	text-align: center;
}


/* DRESS CODE */


#dresscode
{
	flex-direction: column;
}

#dresscode .dresscode-title
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#dresscode .dresscode-row
{
	width: 100%;
}

#dresscode .dresscode-image
{
	max-width: 70vw;
	position: relative;
}


/* MEDIA QUERIES */


@media (max-aspect-ratio: 1.25)
{
	.screen
	{
		height: calc(75vh - var(--page-margin) * 2);
	}

	.square
	{
		width: calc(50vw - var(--page-margin) * 2);
		height: calc(50vw - var(--page-margin) * 2);
	}

	#intro > div
	{
		height: 66%;
	}

	#chateau .square-direction
	{
		flex-direction: column;
	}

	#chateau .square-container
	{
		flex-direction: row;
	}

	#carrousel .marquee, #carrousel img
	{
		height: 40vw;
	}

	#login form
	{
		width: 75%;
	}

	#login .login-language
	{
		margin-right: 1em;
	}

	#login input[type=radio]
	{
		margin-left: 1.5em;
	}

	#password-row
	{
		width: 60%;
	}

}


@media (max-aspect-ratio: 1.0)
{
	body
	{
		font-size: 17px;
	}
}


@media (max-aspect-ratio: 0.75)
{

	#home h1
	{
		font-size: 2.25em;
	}

	#home h2
	{
		font-size: 1.5em;
	}

	.screen
	{
		height: calc(50vh - var(--page-margin) * 2);
	}

	.square
	{
		width: calc(50vh - var(--page-margin) * 2);
		height: calc(50vh - var(--page-margin) * 2);
	}

	#intro > div
	{
		height: 75%;
	}

	#intro > .image,
	#intro > .space
	{
		display: none;
	}

	#chateau h4
	{
		font-size: 1.25em;
	}

	#chateau .square-container
	{
		flex-direction: column;
	}

	#chateau .square
	{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#chateau .text-position
	{
		width: 70%;
	}

	#rsvp
	{
		height: 70vh;
	}

	#carrousel .marquee, #carrousel img
	{
		height: 70vw;
	}

	#login form
	{
		width: 100%;
	}

	#password-row
	{
		width: 75%;
	}

}

@media (max-aspect-ratio: 0.5)
{
	.square
	{
		width: calc(100vw - var(--page-margin) * 2);
		height: calc(100vw - var(--page-margin) * 2);
	}

	#home h1
	{
		font-size: 2em;
	}

	#home h2
	{
		font-size: 1.25em;
	}

	#rsvp
	{
		height: 60vh;
	}

	#login .login-language
	{
		margin-right: 1em;
	}

	#login input[type=radio]
	{
		margin-left: 1em;
	}

	#password-row
	{
		width: 100%;
	}
}