/***** GLOBAL *****/

/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@font-face {
	font-family: 'agrial-icons';
	src: url('fonts/agrial-icons.woff2') format('woff2');
}

/* Modifs css Agrial */

header.page-header {
	position: relative;
	margin-bottom: 0;
}
.page-header + div {
	padding-top: 0;
}

input[type=checkbox] {
	visibility: visible;
	position: static;
	margin: 0;
}
input[type=checkbox]:checked + label:before,
input[type=checkbox] + label:before {
	content: none;
}

/* Bannière */

#banner {
	background: #ec6707 radial-gradient(circle closest-side at 25%, #fdb40c, #ec6707) center / 100% 500%;
	z-index: 1;
}
#banner .logo-bday {
	position: absolute;
	top: 1.5rem;
	margin-left: 10%;
	width: 80%;
	max-height: none;
}
#banner .dates {
	padding: 1rem;
	color: white;
	font-family: "Quicksand", sans-serif;
	font-size: 1.2rem;
}

#banner .container::before,
#banner .container::after {
	content: '';
	position: absolute;
	background-size: 100%;
	background-repeat: no-repeat;
	height: 200px;
	pointer-events: none;
}
#banner .container::before {
	top: 0;	left: 0;
	width: 35%;
	background-image: url('../images/banner/balloon_left_sm.png');
	transform: translateX(15%);
}
#banner .container::after {
	top: 5%; right: 0;
	width: 12%;
	background-image: url('../images/banner/balloon_right_sm.png');
	transform: translateX(-30%);
}

@media (min-width: 768px) {
	#banner .logo-bday {
		top: 2rem;
		margin-left: 0;
		width: 100%;
	}
	#banner .dates {
		padding: 3rem;
		font-size: 2.25rem;
	}
	#banner .container::before,
	#banner .container::after {
		height: 300px;
	}
	#banner .container::before {
		width: 40%;
		background-image: url('../images/banner/balloon_left.png');
		transform: translateX(-40%);
	}
	#banner .container::after {
		top: 0;
		width: 40%;
		background-image: url('../images/banner/balloon_right.png');
		transform: translateX(25%);
	}
}

/* Jeu */

#animation_container {
	position: relative;
	margin: auto;
}
#rgpd {
	display: none;
	margin: 10px auto;
	max-width: 1240px;
	font-size: 12px;
	font-style: italic;
}

/* PleaseRotate */

#pleaserotate-graphic {
	fill: #E35317;
}
#pleaserotate-backdrop {
	color: #e35317;
	background-color: rgba(255,255,255,0.85);
	backdrop-filter: blur(20px);
}