@font-face {
	font-family: "f1";
	src: url("./assets/Formula1-Bold_web_0.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "f1";
	src: url("./assets/Formula1-Regular_web_0.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "f1-wide";
	src: url("./assets/Formula1-Wide_web_0.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.f1-fantasy-main {
	button,
	a.btn {
		background-color: #e10600;
		padding: 10px 20px;
		border-radius: 5px;
		transition: background-color 0.3s ease;
		&:hover {
			background-color: #ff0000;
		}
	}
	.container {
		max-width: 1000px;
		padding-inline: 20px;
		margin-inline: auto;
	}

	background-color: #15151e;
	font-family: "f1", sans-serif;
	color: white;
	.login-page {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		.login-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;
			img {
				width: 200px;
				height: auto;
			}
			border: 2px solid white;
			padding: 20px;
			border-radius: 10px;
			form {
				display: flex;
				gap: 10px;
				input {
					border-radius: 5px;
					padding: 5px;
					background-color: #15151e;
					border: 1px solid white;
				}
			}
		}
	}

	.dashboard-page {
		min-height: 100dvh;
		h2,
		p.wide,
		span.wide {
			font-family: "f1-wide", sans-serif;
		}
		background-color: #15151e;
		font-family: "f1", sans-serif;
		color: white;

		.top-row {
			padding-block: 20px;
			.logo {
				display: flex;
				justify-content: center;
				img {
					height: 80px;
					width: auto;
					@media (min-width: 768px) {
						height: 100px;
					}
					@media (min-width: 1024px) {
						height: 120px;
					}
				}
			}
		}

		.logout-container {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 10px;
			a.btn {
				padding: 5px 10px;
				font-size: 12px;
			}
		}

		.last-row {
			display: flex;
			justify-content: flex-end;
			padding-block: 20px;
		}
	}

	.content-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: 1024px) {
			grid-template-columns: repeat(3, 1fr);
		}
		.points-table {
			z-index: 100;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #15151e;
			border: 1px solid white;
			border-radius: 5px;
			width: 90%;
			max-width: 400px;
			padding: 8px;
			table {
				border-collapse: collapse;
				width: 100%;
				th,
				td {
					padding-inline: 8px;
					text-align: left;
				}
				.place {
					font-family: "f1-wide", sans-serif;
				}
				.place.place-1 {
					color: gold;
				}
				.place.place-2 {
					color: silver;
				}
				.place.place-3 {
					color: #cd7f32;
				}
				.points {
					font-size: 20px;
				}
			}
		}

		.guess-table {
			@media (min-width: 1024px) {
				grid-column: span 3;
			}
			form h3 {
				margin-top: 24px;
				margin-bottom: 8px;
				text-align: center;
			}
			.race-grid {
				padding-top: 16px;
				width: 100%;
				display: grid;
				align-items: start;
				gap: 20px;
				grid-template-columns: repeat(2, 1fr);
				.first,
				.second,
				.third,
				.fourth,
				.fifth,
				.sixth,
				.seventh,
				.eighth,
				.ninth,
				.tenth {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 5px;

					position: relative;
					border-top: 4px solid white;
					border-left: 4px solid white;
					border-right: 4px solid white;
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
					padding-top: 80px;

					&::after {
						position: absolute;
						top: 20px;
						left: 50%;
						transform: translateX(-50%);
						font-family: "f1-wide", sans-serif;
						font-size: 24px;
					}
				}
				.second,
				.fourth,
				.sixth,
				.eighth,
				.tenth {
					margin-top: 65px;
				}
				.first {
					&::after {
						content: "1";
					}
				}
				.second {
					&::after {
						content: "2";
					}
				}
				.third {
					&::after {
						content: "3";
					}
				}
				.fourth {
					&::after {
						content: "4";
					}
				}
				.fifth {
					&::after {
						content: "5";
					}
				}
				.sixth {
					&::after {
						content: "6";
					}
				}
				.seventh {
					&::after {
						content: "7";
					}
				}
				.eighth {
					&::after {
						content: "8";
					}
				}
				.ninth {
					&::after {
						content: "9";
					}
				}
				.tenth {
					&::after {
						content: "10";
					}
				}
			}
			select {
				width: 90%;
				background: transparent;
				border: 1px solid white;
				outline: none;
				padding: 5px 16px;
				font-family: sans-serif;
				font-size: 18px;
				&,
				&::picker(select) {
					appearance: base-select;
				}
				option {
					color: black;
					.icon {
						margin-right: 3px;
					}
					&[data-team="Mercedes"] {
						.icon {
							color: #00d2be;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Mercedes"] {
						color: #00d2be;
						font-family: "f1", sans-serif;
					}
					&[data-team="Ferrari"] {
						.icon {
							color: #dc0000;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Ferrari"] {
						color: #dc0000;
						font-family: "f1", sans-serif;
					}
					&[data-team="McLaren"] {
						.icon {
							color: #ff8700;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="McLaren"] {
						color: #ff8700;
						font-family: "f1", sans-serif;
					}
					&[data-team="Red Bull Racing"] {
						.icon {
							color: #0600ef;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Red Bull Racing"] {
						color: #0600ef;
						font-family: "f1", sans-serif;
					}
					&[data-team="Racing Bulls"] {
						.icon {
							color: #0600ef;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Racing Bulls"] {
						color: #0600ef;
						font-family: "f1", sans-serif;
					}
					&[data-team="Alpine"] {
						.icon {
							color: #0090ff;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Alpine"] {
						color: #0090ff;
						font-family: "f1", sans-serif;
					}
					&[data-team="Aston Martin"] {
						.icon {
							color: #006f62;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Aston Martin"] {
						color: #006f62;
						font-family: "f1", sans-serif;
					}
					&[data-team="Haas F1 Team"] {
						.icon {
							color: #bd9e57;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Haas F1 Team"] {
						color: #bd9e57;
						font-family: "f1", sans-serif;
					}
					&[data-team="Williams"] {
						.icon {
							color: #005aff;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Williams"] {
						color: #005aff;
						font-family: "f1", sans-serif;
					}
					&[data-team="Audi"] {
						.icon {
							color: #ff0000;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Audi"] {
						color: #ff0000;
						font-family: "f1", sans-serif;
					}
					&[data-team="Cadillac"] {
						.icon {
							color: #00bfff;
							font-family: "f1-wide", sans-serif;
							font-size: 12px;
						}
					}
					&[data-steam="Cadillac"] {
						color: #00bfff;
						font-family: "f1", sans-serif;
					}
				}
			}
			input {
				width: 90%;
				background: transparent;
				border: 1px solid white;
				outline: none;
				padding: 5px 16px;
				border-radius: 5px;
			}
		}

		.pagination {
			padding-top: 12px;
			display: flex;
			justify-content: center;
			gap: 10px;
		}
	}

	.btn-top {
		background-color: transparent;
		border: 1px solid white;
	}
	.sticky-row {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #15151e;
		padding-block: 8px;
		display: flex;
		justify-content: center;
		gap: 10px;
	}
}