:root {
	--bg-color1: #e8f0f8;
	--bg-color2: #b0c0e0;
	--bg-color3: #8090c080;
	--section-color: #f0f8ff;
	--dash-item-color: #f8ffff;
	--titlebar-color: #90a0d0;
	--text-color: #303040;
	--light-text-color: #8080a0;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
	color: var(--text-color);
}

@property --bg-anim-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000;
}

@property --bg-anim-pos1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

@property --bg-anim-pos2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

@keyframes colorChange {
	0% {
		--bg-anim-color: #f0f0ff20;
		--bg-anim-pos1: 0%;
		--bg-anim-pos2: 100%;
	}
	100% {
		--bg-anim-color: #40209060;
		--bg-anim-pos1: 100%;
		--bg-anim-pos2: 30%;
	}
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

body > * {
	width: 100%;
	height: 100%;
}

#titlebar {
	padding: 1em;
	background: var(--titlebar-color);
	display: grid;
	grid-template-columns: auto auto;
}

#titlebar h1 {
	font-size: 1em;
	text-align: left;
}

#titlebar p {
	font-size: 1em;
	text-align: right;
}

#main {
	padding: 2em;
	overflow-y: auto;
	animation: colorChange 5s infinite alternate;
	background: linear-gradient(transparent, var(--bg-anim-color)),
		radial-gradient(ellipse at var(--bg-anim-pos2) bottom, var(--bg-color3), transparent),
		radial-gradient(ellipse at var(--bg-anim-pos1) top, var(--bg-color1), var(--bg-color2) 80%);
}

#container {
	margin: auto;
	max-width: 40em;
}

#dashboard {
	display: none;
}

section {
	padding: 2em;
	margin: 2em 0;
	border-radius: 2em;
	background: var(--section-color);
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

section > div {
	flex-grow: 1;
	flex-basis: 0;
	padding: 2em;
	border-radius: 2em;
	background: var(--dash-item-color);
}

section > h1, section > p {
	flex-basis: 100%;
}

#points, #lastsip {
	font-size: 200%;
}

table {
	width: 100%;
}

table > thead td {
	color: var(--light-text-color);
}

table tr > td:first-child {
	color: var(--light-text-color);
	text-align: center;
}

table td {
	padding: 0.25em;
}

.rankcell {
	width: 1.5em;
}

.pointscell {
	width: 8em;
}

.lastsipcell {
	width: 8em;
}

.marker-text {
	color: var(--light-text-color);
}

#login section {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

#login section > * {
	display: inline;
	flex-grow: 1;
	margin: auto;
}

input, button {
	font-family: inherit;
	font-size: inherit;
	padding: 0.5em 1em;
	border: 1px solid var(--titlebar-color);
	border-radius: 2em;
}