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

@mixin button($color)
	text-decoration: none
	text-align: center
	white-space: nowrap
	background-color: RGBA($color, 0.02)
	color: RGB($color)
	border-radius: 2px
	border: 0 solid transparent
	transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out

	&:hover
		background-color: RGBA($color, 0.3)
		transform: translateY(-0.1rem)

@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')

\:root
	--black: 21, 21, 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
	--darkBlue: 9, 9, 39

*
	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($darkBlue)
	color: RGB($white)

.background
	width: 100%
	height: 100%

	object-fit: cover
	position: absolute
	z-index: 1

.app
	margin: 0 auto
	padding: 0

	width: 800px
	min-height: 100vh

	position: relative
	display: flex
	flex-direction: column

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

	> table
		width: 100%

header
	padding: 1rem

	background-color: RGBA($darkBlue, 0.7)

	> img
		margin-bottom: 1rem
		width: 100%
		height: auto
		text-align: center

nav
	margin-top: 0.3rem
	padding: 0

	display: flex
	flex-direction: row
	justify-content: center

	> span
		width: 100%

	> a
		margin: auto 0.15rem
		padding: 0.5rem 0.7rem

		text-decoration: none
		white-space: nowrap
		font-size: 0.9em

		color: RGB($primary)

		&.button
			@include button($white)

			&.primary
				@include button($primary)

			&.secondary
				@include button($secondary)

		> i
			font-size: 1.25em
			display: block

.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($darkBlue)
		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

	.block
		margin-bottom: 1rem
		padding: 1rem

		display: flex
		flex-direction: column

		background-color: rgba($darkBlue, 0.7)
		border-radius: 2px

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

		> p
			margin: 0 0 1rem 0
			font-size: 1em

		.button
			margin: 0
			padding: 0.5rem 0.7rem

			text-decoration: none
			white-space: nowrap
			font-size: 0.9em

			color: RGB($primary)

			> i
				font-size: 1.25em
				display: block

			@include button($white)

			&.primary
				@include button($primary)

			&.secondary
				@include button($secondary)

		> table
			width: 100%
			border-collapse: collapse
			> tbody > tr > td
				padding: 0 0.5rem 0.5rem 0

				text-align: left
				font-size: 0.9em

				color: RGB($white)

				transition: filter 0.2s ease-in-out

				&:last-child
					width: 100%

				&.hidden
					filter: blur(5px)

		&.secondary
			border: 1px solid RGB($secondary)

			> h2
				color: RGB($secondary)

	form
		display: flex
		flex-direction: column

		> input
			margin: 0 0 1rem 0
			padding: 0.7rem 1rem

			border: 1px solid RGB($white)
			border-radius: 2px

			background-color: RGB($darkBlue)
			color: RGB($white)

			&:focus
				outline: none
				border-color: RGB($primary)

			&.error
				border-color: RGB($secondary)

		> button
			margin: 0
			padding: 0.75rem 1rem

			font-weight: bolder

			border: transparent
			border-radius: 2px

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

			&:focus-visible, &:hover
				outline: none
				background-color: RGBA($primary, 0.3)
				color: RGB($primary)

			&.disabled
				pointer-events: none
				opacity: 0.5

			&.secondary
				background-color: RGB($secondary)
				color: RGB($black)

				&:focus-visible, &:hover
					background-color: RGBA($secondary, 0.3)
					color: RGB($secondary)

footer
	padding: 0.5rem 1rem
	width: 100%
	display: flex
	flex-direction: row
	background-color: RGBA($darkBlue, 0.7)

	> 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