style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;600;700;800;900&display=swap');
.pair {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 1rem;
	width: 20vw;
}

input[type='text'],
.player select {
	width: 100%;
	padding: 5px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid white;
}

.playercont {
	display: flex;
	flex-direction: row;
	gap: 10rem;
	/* justify-content: center; */
	align-items: center;
	margin: 3vh 0;
}

.header {
	font-size: 5rem;
	margin: 3vh 3vh;
}

.container {
	gap: 1rem;
	/* justify-content: center; */
	height: 60vh;
	margin: 0 3vh;
}

body {
	color: #fff;
	background-color: #222;
}

* {
	background-color: inherit;
	color: inherit;
}

.player,
.playercont .player {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

body * {
	font-family: Inter;
}

.teamselect {
	padding: 5px 10px;
}

.submit {
	color: white;
	padding: 10px 20px;
	border: none;
	font-size: 1rem;
	border-radius: 5px;
	background-color: #5588dd;
	cursor: pointer;
	transition: 0.3s;
}

#status {
	display: flex;
	flex-direction: column;
}

.submit:hover {
	background-color: #4466aa;
}