* {
	box-sizing: border-box;
	--color-1: red;
	--color-2: Fuchsia;
	--color-3: green;
	--color-4: gold;
	--color-5: pink;
	--color-6: orange;
	--color-7: yellow;
	--color-8: lightblue;
	--color-9: lightgreen;
	
}

body {
	width: clamp(45ch, 50%, 70ch);
	margin: auto;
	padding: 10vh 0;
	overflow: auto;
	background-color: black;
	filter: drop-shadow(0 0 10px white);
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	color: white;
	font-size: 1.5rem;
	/*
	&.cell {
		background-image: url("../data/images/sapin.png");
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: right bottom;
	}
	*/
}
h1, h2, h3, h4 {
	text-align: center;
}

h1 {
  color: red;
}


a {
	text-decoration: none;
	color: green;
}
/*
.hidden {
	display: none;
}
*/
p.message * {
	display: inline;
}
	
.custom-color-1 {
	color: var(--color-1);
}
.custom-color-2 {
	color: var(--color-2);
	/*background-image: RADIAL-gradient(grey, black);*/
}
.custom-color-3 {
	color: var(--color-3);
}
.custom-color-4 {
	color: var(--color-4);
}
.custom-color-5 {
	color: var(--color-5);
}
.custom-color-6 {
	color: var(--color-6);
}
.custom-color-7 {
	color: var(--color-7);
}
.custom-color-8 {
	color: var(--color-8);
}
.custom-color-9 {
	color: var(--color-9);
}
.custom-size-0 {
	font-size: 1rem;
}
.custom-size-1 {
	font-size: 1.2rem;
}
.custom-size-2 {
	font-size: 1.4rem;
}
.custom-size-3 {
	font-size: 1.6rem;
}
.custom-size-4 {
	font-size: 1.8rem;
}


#calendar {
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(4, auto);
	grid-template-rows: fit-content;
	gap: 1em;
	& > div {
		/*
		min-height: 5em;
		max-width: 8em;
		padding: 1.5em;
		*/
		/*border: 5px solid grey;*/
		height: 6em;
		width: 6em;
		line-height: 6em;
		text-align: center;
		border-radius: 30px;
		opacity: 60%;
		transition: transform 0.5s;
		transition-timing-function: ease-in;
	}
	.star {
		clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
	}

	.circle {
		clip-path: circle(45%);
	}
	.heart {
		--_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
		-webkit-mask-box-image: var(--_m);
        mask-border: var(--_m);
		clip-path: polygon(-41% 0,50% 91%, 141% 0);
	}
	@supports not (-webkit-mask-box-image: var(--_m)) { 
	.heart {
    mask:
     radial-gradient(at 70% 31%,#000 29%,#0000 30%),
     radial-gradient(at 30% 31%,#000 29%,#0000 30%),
     conic-gradient(#000 0 0) bottom/100% 50% no-repeat;
		}
	}
	.square {
		/*
		display: flex;
		justify-content: center;
	align-items: center;
	*/
		border-radius : 12%;
	}
	.red {
		background-color: red;
	}
	.pink {
		background-color: pink;
	}
	.orange {
		background-color: orange;
	}
	.yellow {
		background-color: yellow;
	}
	
}

#user-input {
	padding: 0.5rem;
        background-color: black;
        border: 2px solid green;
        border-radius: 0.7em;
        color: green;
        font-size: 2rem;
        text-align: center;
        min-height: 3rem;
}

/*--------------------------------------------------------*/
/*               Shining letters                          */
/*--------------------------------------------------------*/
@keyframes shine-letter-1 {
	0% {
		color: white;
	}
	25% {
		color: white;
	}
	50% {
		color: white;
	}
	75% {
		color: orange;
	}
	100% {
		color: white
	}
}
@keyframes shine-letter-2 {
	0% {
		color: white;
	}
	25% {
		color: red;
	}
	50% {
		color: white;
	}
	75% {
		color: white;
	}
	100% {
		color: white
	}
}
@keyframes shine-letter-3 {
	0% {
		color: white;
	}
	25% {
		color: white;
	}
	50% {
		color: red;
	}
	75% {
		color: white;
	}
	100% {
		color: white
	}
}
@keyframes shine-letter-4 {
	0% {
		color: white;
	}
	25% {
		color: orange;
	}
	50% {
		color: white;
	}
	75% {
		color: white;
	}
	100% {
		color: white
	}
}
@keyframes shine-letter-5 {
	0% {
		color: white;
	}
	25% {
		color: white;
	}
	50% {
		color: white;
	}
	75% {
		color: red;
	}
	100% {
		color: white
	}
}
@keyframes shine-letter-6 {
	0% {
		color: white;
	}
	25% {
		color: white;
	}
	50% {
		color: orange;
	}
	75% {
		color: white;
	}
	100% {
		color: white
	}
}
.shine-1 {
	animation-name: shine-letter-1;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	
}
.shine-2 {
	animation-name: shine-letter-2;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	
}
.shine-3 {
	animation-name: shine-letter-3;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	
}
.shine-4 {
	animation-name: shine-letter-4;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	
}
.shine-5 {
	animation-name: shine-letter-5;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	
}
.shine-6 {
	animation-name: shine-letter-6;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	
}