@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "JetBrains Mono", monospace;
	background: #557da0;
	color: #252809;
	font-size: 14px;
}

.spacer {
	flex-grow: 1;
}

/* Header */
.header {
	box-sizing: border-box;
	width: 100%;

	background-color: #c2c98d;
	border-bottom: 1px solid #252809;

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

	padding: 12px 32px;

	font-weight: 1000;
	font-size: 24px;
	line-height: 1;

	position: fixed;
	z-index: 1000;
}

.bg-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.8;
}

.left-panel {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 60px;
	gap: 10px;
}

.gif {
	width: 550px;
	border: 2px solid #252809;
}

/* Info panel */
.info-panel {
	position: relative;
	background: #e1e5c4;
	padding: 30px;
	width: 550px;
	border: 2px solid #252809;
}

.info-panel h1 {
	font-size: 52px;
	margin-bottom: 20px;
	font-weight: 1000;
}

.user-data {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ud-key {
	color: #6e7769;
}

.ud-value {
	color: #000000;
	font-weight: 500;
}

.big-text {
	color: #e1e5c4;
	font-size: 120px;
	font-weight: 900;
}