html, body {margin:0; padding:0; display:grid;}
*{
	box-sizing: border-box;
	scroll-behavior: smooth;
}

html, body {overflow-x:hidden; font-family: arial;}

grid {display:grid;}

@font-face {
	font-family: acidic;
	src: url("/fonts/Acidic.TTF");
}

:root {
	--color-1: #FFFF35;
	--color-2: #55c5f7;
	--color-3: #d444df;
	--color-1b: 255,255, 53;
	--color-2b: 85, 197, 247;
	--color-3b: 212, 68, 223;
}

fit-app {
	display:grid;
	background:var(--color-1) url("/tex/fit-bg-2.png");
	grid-template-rows: max-content 1fr max-content;
	height:100svh;
}

calendrier {
	display:grid;
	grid-template-columns: repeat(7, 1fr);
	place-self:center;
	background:var(--color-1);
	gap:3px;
}

calendrier day {
	color: var(--color-2);
	place-self:center;
}

calendrier day.weekend {
	color: var(--color-3);
}

calendrier a {
	display:grid;
	text-decoration: none;
	background:rgba(var(--color-2b),.2);
	min-height:2em;
	min-width:2em;
	place-content: center;
}
calendrier a:hover {
	background:#fff8;
}
calendrier a.regular {
	border:var(--color-2) solid 3px;
}
calendrier a.special {
	background:var(--color-3)
}

fit-events {
	display:grid;
	gap:2em;
}

button {
	font-family: acidic;
	font-size: 40px;
	border:none;
	color:#fff;
	background: #000;
}
button:hover {
	background: var(--color-3);
}
button:active {
	margin-top:4px;
	margin-bottom:-4px;
}

fit-event {
	white-space: pre-wrap;
	display:grid;
	place-self:center;
	padding:1em;
	background: var(--color-2);
	max-width:22em;
	background-size:cover;
	background-position:center;
	/* aspect-ratio:3/2; */
	grid-template-rows:1fr max-content;
	width:100%;
}
fit-event main {
	display:grid;
	grid-template-rows:max-content 1fr;
}
fit-event date {
	font-weight:bolder;
	color:var(--color-3);
	background: var(--color-1);
	padding: .5em 1em;
	place-self:end;
}
fit-event titre {
	font-weight:bolder;
	margin: .5em 0;
	padding: .25em .5em;
	display: inline-block;
	color:var(--color-1);
	background: var(--color-3);
	width:max-content;
}
fit-event about {
	display: inline-block;
	color:white;
	background: rgba(var(--color-2b),.7);
	padding: .25em .25em;
	margin-bottom: .5em;
}
fit-event.special {
	background:var(--color-3);
}
fit-event.special titre {
	background:var(--color-2);
}
fit-event.special about {
	background:none;
	color:white;
}
fit-event about.short {
	cursor:pointer;
}

fit-event.registered titre,
fit-event.registered about,
fit-event.registered button {
	background:gold;
}
fit-event.registered {
	background:yellow !important;
}