* {
	font-family: Roboto-Regular;
	text-rendering: optimizeLegibility;
}

body {
	flex-flow: nowrap;

	margin: 0;

	color: white;
	background: unset;

	overflow: hidden;
}

/* BADGES */

.badge-row-anchor {
	position: absolute;
	right: 0;
	z-index: 1;

	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 0.05em;

	height: 0;
}

.badge {
	position: absolute;
	left: 0;
	bottom: 0.03em;
	z-index: 1;

	width: 1em;
	height: 1em;

	cursor: default;
}

.badge-row-anchor .badge {
	position: relative;
	left: unset;
	top: unset;
	bottom: unset;
	z-index: unset;
}

.badge-content {
	position: relative;
	width: 100%;
	height: 100%;

	background-color: transparent;
	filter: drop-shadow(1px 1px 2px hsla(0deg, 0%, 0%, 35%));

	text-shadow: none;

	transition-property: filter;
	transition-duration: 50ms;
}

.badge-layer {
	position: absolute;

	left: 0;
	top: 0;

	display: flex;
	flex-direction: row;
	align-items: center;

	width: 100%;
	height: 100%;

	text-align: left;
}

.badge-layer-gradient {
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.badge-layer > span::before {
	top: 0;
	width: 100%;
	height: 100%;
}

.badge-text {
	text-align: center;
	font-size: 0.29em;
}

.year-rank-badge .badge-text {
	margin-top: 2.2em;
}

.win-streak-badge .badge-text {
	margin-top: 0.47em;
}

.badge-text,
.badge-text * {
	font-family: Roboto-Black;
}

.badge-effect-container {
	position: absolute;
	left: 0.35em;
	top: 50%;

	width: 0;
	height: 0;
}

/* TOOLTIPS */

.tooltip {
	position: absolute;
	right: 100%;
	top: calc(50%);

	height: 0;

	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 999;

	visibility: hidden;
	opacity: 0;

	transition-property: opacity;
	transition-duration: 150ms;
	transition-delay: 100ms;
}

.tooltip-content {
	width: 12.7em;

	display: flex;
	row-gap: 0.5em;
	flex-direction: column;

	padding: 0.5em 0.5em;

	text-align: justify;
	font-size: 1em;
}

.tooltip-pointer {
	width: var(--tooltip-pointer-width);
	height: calc(var(--tooltip-pointer-width) * 1.5);

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

	transform: translateX(-0.5px);
}

/** GENERAL PRESENTATION */

#general-presentation-content {
	display: flex;
	flex-direction: column;

	margin-top: 2em;
	margin-bottom: 3em;
	margin-inline: 2em;

	color: white;
	text-align: justify;
	overflow: visible;
}

#general-presentation-content #general-presentation-background {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;

	background-image: linear-gradient(
		0deg,
		hsl(256deg, 52%, 20%) 0%,
		hsl(256deg, 57%, 32%) 100%
	);
}

#general-presentation-content #general-presentation-body {
	display: flex;
	flex-direction: column;
	row-gap: 1.2em;

	width: 100%;
	max-width: 48em;
	margin-inline: auto;
}

#general-presentation-content img {
	margin-bottom: 1em;
}

#general-presentation-content .general-presentation-block {
	display: flex;
	flex-direction: column;
	row-gap: 0.54em;
}

#general-presentation-content h2 {
	margin-bottom: 0.12em;
}

#general-presentation-content p {
	margin: 0;
}

#general-presentation-content a {
	font-family: Roboto-Medium;
	color: white;
}

#general-presentation-content b {
	font-family: Roboto-Bold;
	font-weight: initial;
}

#general-presentation-content i {
	font-family: Roboto-Italic;
	font-style: initial;
}

#general-presentation-content ul {
	display: flex;
	flex-direction: column;
	row-gap: 0.35em;

	margin: 0;
}

#general-presentation-content .bot-command {
	height: 10em;
	margin: 0.05em;
	padding-inline: 0.25em;

	font-family: Roboto-Bold;
	border-radius: 0.2em;
	color: var(--text-accentuation-color-bright);

	background-color: hsla(0deg, 100%, 100%, 100%);
}

/** PRIVACY NOTICES */

#privacy-notice-content {
	display: flex;
	flex-direction: row;

	color: black;

	overflow: visible;
}

#privacy-notice-content #privacy-notice-decoration {
	position: relative;
	width: 2.5em;
	overflow: hidden;
}

#privacy-notice-content #privacy-notice-decoration .nfp-background {
	position: absolute;
	left: 0;
	right: 0;
	top: -10em;
	bottom: -10em;

	background-image: linear-gradient(
		180deg,
		hsl(116, 59%, 62%, 100%) 0%,
		hsl(116, 59%, 62%, 100%) calc(100% / 7 * 1),
		hsl(0, 80%, 62%, 100%) calc(100% / 7 * 1),
		hsl(0, 80%, 62%, 100%) calc(100% / 7 * 2),
		hsl(59, 73%, 56%, 100%) calc(100% / 7 * 2),
		hsl(59, 73%, 56%, 100%) calc(100% / 7 * 3),
		hsl(240, 81%, 60%, 100%) calc(100% / 7 * 3),
		hsl(240, 81%, 60%, 100%) calc(100% / 7 * 4),
		hsl(299, 64%, 59%, 100%) calc(100% / 7 * 4),
		hsl(299, 64%, 59%, 100%) calc(100% / 7 * 5),
		hsl(178, 64%, 46%, 100%) calc(100% / 7 * 5),
		hsl(178, 64%, 46%, 100%) calc(100% / 7 * 6),
		hsl(40, 75%, 57%, 100%) calc(100% / 7 * 6),
		hsl(40, 75%, 57%, 100%) calc(100% / 7 * 7)
	);

	background-size: 10em 20em;
	background-repeat: repeat-y;

	transform: skewY(-14deg);

	overflow: hidden;
}

#privacy-notice-content #privacy-notice-body {
	max-width: 42em;
}

#privacy-notice-content #privacy-notice-body > * {
	margin-left: 24px;
}

#privacy-notice-content #privacy-notice-body .privacy-notice-main-title {
	margin: 2em 0 2em 0;
	padding-block: 0.2em;

	border-top: var(--text-accentuation-color-bright) solid 4px;
	border-right: var(--text-accentuation-color-bright) solid 4px;
	border-bottom: var(--text-accentuation-color-bright) solid 4px;

	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#privacy-notice-content #privacy-notice-body .privacy-notice-main-title > * {
	margin: 0.2em 0 0.2em 0.65em;
}

#privacy-notice-content h1 {
	font-family: Roboto-Regular;
	font-size: 2.2em;
	text-transform: uppercase;
	color: var(--text-accentuation-color-bright);
}
#privacy-notice-content h2 {
	margin-left: 0;
	font-family: Roboto-Regular;
	font-size: 1.25em;
	color: var(--text-accentuation-color-bright);
}

#privacy-notice-content b {
	font-weight: initial;
	font-family: Roboto-Bold;
	color: var(--text-accentuation-color-bright);
}

#privacy-notice-content h1 b,
#privacy-notice-content h2 b,
#privacy-notice-content h3 b {
	font-family: Roboto-Black;
}

#privacy-notice-content b {
	font-family: Roboto-Bold;
	color: var(--text-accentuation-color-bright);
}

#privacy-notice-content a {
	color: var(--text-accentuation-color-bright);
}

#privacy-notice-content .disclaimer,
#privacy-notice-content .disclaimer a {
	font-family: Roboto-Italic;
}

#privacy-notice-content .address {
	margin-left: 1em;
	font-family: Roboto-Regular;
}

#privacy-notice-content p {
	font-family: Roboto-Regular;
	text-align: justify;
}