bandeau {
	display: inline-block;
	background-color: var(--bs-info);
	width: 8rem;
	height: 1rem;
}

.fs-small {
	font-size: .9rem;
}

.text-info2 {
	color: #ddff22;
}

.bg-radial-dark {
    background-color: var(--bs-dark);
    background: radial-gradient(circle, #4a4a4a 0%, #333 80%);
    color: var(--light);
}

	.bg-radial-dark > * {
		color: var(--bs-light);
	}
	
/* Image */
.img-avatar {
	float: left;
	shape-outside: circle(40%);
	width: 40%;
	object-fit: cover;

	padding: 2rem;
	padding-left: 0;
	margin-top: 3rem;
}

.img-icon {
	width: 3rem;
	object-fit: cover;
	filter: invert(92%) sepia(6%) saturate(33%) hue-rotate(169deg) brightness(106%) contrast(98%);
}

.img-link {
	text-decoration: none;
	width: 3rem;
	margin-right: 1rem;
}

.img-link > img {
	border-radius: 3rem;
	border: solid 0.15rem transparent;
	transition: border-color .2s;
	
	width: inherit;
	object-fit: cover;
	padding: .1rem;
}

.img-link:hover > img {
	border-color: var(--bs-dark);
}	

/* Progress Bar */
.progress {
	border-radius: 1em;
	appearance: none;
	-webkit-appearance: none;

	background-color: #999;

	height: .5rem;
	width: 12rem;
}

/*
background-image:
		-webkit-linear-gradient(-45deg,
			transparent 33%, rgba(0, 0, 0, .1) 33%,
			rgba(0, 0, 0, .1) 66%, transparent 66%),
		-webkit-linear-gradient(top,
			rgba(255, 255, 255, .25),
			rgba(0, 0, 0, .25)),
		-webkit-linear-gradient(left, var(--info), var(--danger));
*/

.progress::-webkit-progress-bar {
	background-color: transparent;
	border-radius: 1rem;
	box-shadow: 0 .2rem .5rem #000a inset;
}

.progress::-webkit-progress-value {
	background-color: var(--bs-info);

	border-radius: 1rem;
	background-size: 3.5rem 2rem, 100% 100%, 100% 100%;
}

.pg-alter::-webkit-progress-value {
	background-color: #ddff22;
}

.progress {
	position: relative;
	background-color: transparent;

	margin: .2rem 0;
	padding-right: 1rem;
}

.progress[value]::before {
	position: absolute;
	content: attr(value);
	font-size: .5rem;

	right: 0;
	top: -0.15rem;
}

/*
.progress[value]::before {
	content: attr(value);
	position: relative;
	float: right;

	font-size: .75rem;

	left: 1rem;
	top: -.2rem;
}
*/

/* Snake */
.popup > div * {
	border-radius: inherit;
}

#canvas {
	align-self: center;

	background-color: var(--bs-dark);
	border-radius: 1rem 1rem 0 0;
	aspect-ratio: 1;

	padding: .5rem;
	width: 80vw;
	max-width: 80vh;
}

#snakeTable {
	background-color: #ea6;
	height: 100%;
	width: 100%;
}

	#snakeTable td.snake {
		border-radius: 20%;
		background-color: var(--bs-green);
	}

	#snakeTable td.apple {
		border-radius: 100%;
		background-color: var(--bs-red);
	}

#snakeButton {
	align-self: center;
	border-radius: 0 0 1rem 1rem;
	width: 100%;
	max-width: 80vh;
}