:root {
	--background-image:
		linear-gradient(rgb(0,0,0,0) 20%, rgb(100,100,100,0.3) 20%, rgb(100,100,100,0.3) 70%, rgb(0,0,0,0) 70%);
	--background-size: 2px 2px;

	color: #EEEEFF;

	--blue-background-color: rgb(0,0,40);
	--transparent-color: rgb(0,0,0,0);
	--dark-blue-bolt: rgb(0, 10, 65);
	--light-blue-bolt: rgb(0, 30, 85);
	--dark-blue-strip: rgb(0,15,50);
	--light-blue-strip: rgb(0,20,70);
}

html {
	color-scheme: light dark;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	background-color: var(--blue-background-color);
	background-image:
		linear-gradient(45deg, var(--transparent-color) 15%, var(--dark-blue-strip) 15%, var(--dark-blue-strip) 38%, var(--transparent-color) 38%),
		linear-gradient(-45deg, var(--transparent-color) 65%, var(--light-blue-strip) 65%, var(--light-blue-strip) 88%, var(--transparent-color) 88%),
		linear-gradient(315deg, var(--transparent-color) 15%, var(--light-blue-strip) 15%, var(--light-blue-strip) 38%, var(--transparent-color) 38%),
		linear-gradient(-315deg, var(--transparent-color)65%, var(--dark-blue-strip) 65%, var(--dark-blue-strip) 88%, var(--transparent-color) 88%),
		conic-gradient(var(--transparent-color) 4%, var(--dark-blue-bolt) 4%, var(--dark-blue-bolt) 11%, var(--transparent-color) 11%),
		conic-gradient(var(--transparent-color) 63%, var(--dark-blue-bolt) 63%, var(--dark-blue-bolt) 70%, var(--transparent-color) 70%),
		conic-gradient(var(--transparent-color) 80%, var(--light-blue-bolt) 80%, var(--light-blue-bolt) 87%, var(--transparent-color) 87%),
		conic-gradient(var(--transparent-color) 46%, var(--light-blue-bolt) 46%, var(--light-blue-bolt) 53%, var(--transparent-color) 53%),
		conic-gradient(var(--transparent-color) 23%, var(--light-blue-bolt) 23%, var(--light-blue-bolt) 30%, var(--transparent-color) 30%);
	background-size: 8px 8px;

	#background-color: #00A3FF;
	#background-image: var(--background-image);
	#background-size: var(--background-size);

	font-family: System UI;
	font-size: 1.25rem;
	line-height: 1.5;
}

a {
	color: #FFF;
	text-decoration: none;
}

a:hover {
	color: #AACCFF;
}

.navbar {
	background-image:
		linear-gradient(90deg, rgb(0,5,20,0.5), rgb(0,20,53,0.5));
	border-radius: 0.5rem;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	position: sticky;
	top: 0;

	width: 50vw;
	height: 3rem;
	margin-bottom: 2rem;
	padding: 1rem;

	display: flex;
	align-items: center;
	justify-content: left;
	flex-direction: row;

	gap: 2rem;
}

.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, 1fr, minmax(400px, 1fr), 1fr);
	grid-auto-rows: 400px;
	gap: 2rem;
}

.card {
	background-color: rgb(0,10,40);
	background-image:
		linear-gradient(90deg, rgb(0,10,40), rgb(0,20,53));
	border-radius: 0.5rem;
	
	width: 50vw;
	aspect-ratio: 1;

	padding: 1rem;

	display: flex;
	justify-content: center;
	align-items: left;
	flex-direction: column;
}

.header-one {
	text-align: center;
}

.workplace-date {
	display: flex;
	flex-direction: row;

	gap: 50%;
}