$black: var(--black)
$white: var(--white)
$primary: var(--primary)
$secondary: var(--secondary)
$gold: var(--gold)
$silver: var(--silver)
$bronze: var(--bronze)

\:root
	--black: 31, 27, 21
	--white: 232, 227, 227
	--primary: 210, 206, 97
	--secondary: 185, 77, 77
	--gold: 255, 222, 70
	--silver: 229, 220, 206
	--bronze: 193, 145, 69

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap')
@import "profile-settings"
@import "block"
@import "button"
@import "hint"

*
	box-sizing: border-box
	font-family: 'Merriweather', serif

html
	margin: 0
	padding: 0

body
	margin: 0
	padding: 0
	display: flex
	flex-direction: row
	background-color: RGB($black)
	color: RGB($white)

.background
	position: fixed
	inset: 0
    overflow: hidden
	z-index: 1

	> img
        width: 100%
        height: 100%
        object-fit: cover

.app
	margin: 0 auto
	padding: 0

	width: 900px
	min-height: 100vh

	position: relative
	display: flex
	flex-direction: column

	background-color: rgba($black, 0.5)
	backdrop-filter: blur(5px)
	z-index: 2

.table
	width: 100%
	height: auto
	background-color: rgba($black, 0.5)
	border-radius: 2px
	border: 1px solid RGBA(var(--white),0.05)
	overflow: hidden

	> table
		width: 100%
		border-collapse: collapse

		> tbody
			> tr
				height: 2.75rem
				vertical-align: middle

				> th
					padding: 0.5rem
					background-image: linear-gradient(to bottom, RGBA($white, 0.05), transparent)
					text-align: center
					font-weight: bolder

				> td
					padding: 0.5rem
					text-align: center

					> a
						color: RGB($white)
						text-decoration: none

						&#you
							color: RGB($primary)
							text-shadow: 0 0 5px RGBA($primary, 0.4)

						&:hover
							text-decoration: underline

					> i
						padding: 0.25rem
						color: RGB($black)
						border-radius: 2px

						&.first
							background-color: RGBA($gold, 0.6)

						&.second
							background-color: RGBA($silver, 0.6)

						&.third
							background-color: RGBA($bronze, 0.6)

				&:nth-child(odd) > td
					background-color: RGBA($white, 0.01)

header
	padding: 1rem 1rem 0
	display: flex
	flex-direction: column
	gap: 0.4rem
	background-image: linear-gradient(to bottom, RGB(var(--black)), transparent)

	> hr
		margin: 0
		width: 100%
		border: none
		border-bottom: 1px solid RGBA($white, 0.1)

.title
	margin-bottom: 1rem
	height: auto
	> img
		width: 100%
        height: auto
        max-width: 100%

nav, nav > form
	padding: 0
	width: 100%
	display: flex
	flex-direction: row
	justify-content: center
	gap: 0.4rem

	.spacer
		width: 100%

@media (max-width: 700px)
	nav, nav > form
		&.compact
			flex-direction: column

.flash
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center

	> p
		margin: 0
		padding: 0.75rem 1rem

		width: 100%
		position: relative

		background-color: RGB($black)
		color: RGB($primary)

		transition: background-color 0.2s ease-in-out, padding 0.2s ease-in-out

		> span
			position: absolute
			top: 0
			left: 0
			bottom: 0
			width: 0.25rem

			display: flex
			justify-content: center
			align-items: center

			background-color: RGB($primary)
			color: transparent

			overflow: hidden
			transition: width 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out

			> i
				font-size: 1.25em

		&:hover
			padding: 0.75rem 1rem 0.75rem 4rem
			background-color: RGBA($primary, 0.1)
			cursor: pointer

			> span
				width: 3rem
				color: RGB($black)

		&.success
			color: RGB($primary)

			> span
				background-color: RGB($primary)

			&:hover
				background-color: RGBA($primary, 0.1)

		&.error
			color: RGB($secondary)

			> span
				background-color: RGB($secondary)

			&:hover
				background-color: RGBA($secondary, 0.1)

main
	padding: 1rem
	height: 100%

	display: flex
	flex-direction: column

	> h2
		margin: 0 0 1rem 0
		font-size: 1.5em
		color: RGB($white)

	.center-text
		height: 100%

		display: flex
		flex-direction: column
		justify-content: center
		align-items: center

		> h2
			margin: 0
			text-align: center
			font-size: 2em
			color: RGB($white)

		> p
			margin: 0
			text-align: center
			font-size: 1em
			color: RGB($white)

		> img
			margin: 1rem auto 0
			max-width: 100%
			max-height: 15rem
			border-radius: 2px

footer
	padding: 0.5rem 1rem
	width: 100%
	display: flex
	flex-direction: row

	p
		margin: 0
		width: 100%
		text-align: center
		font-size: 0.8em
		white-space: nowrap
		color: RGB($white)

	a
		color: RGB($secondary)
		text-decoration: none

		&:hover
			text-decoration: underline