.join-or-create-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	width: 85dvw;
	max-width: 1200px;
	height: 90dvh;

	padding: 20px;
	border: clamp(3px, 0.6dvh, 10px) solid gray;
	border-radius: 40px;

	overflow: hidden;

	background-color: gainsboro;

	transition: opacity 200ms ease-in;
}

@media (min-aspect-ratio: 3/2) {
	.join-or-create-container {
		width: 90dvw;
		max-width: 1200px;
		height: 85dvh;
		max-height: 700px;
	}
}

.join-or-create {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;

	width: 100%;
	height: 100%;

	border-radius: 20px;

	background: #f0f0f0;

	overflow-y: auto;
}

.join-button,
.create-button {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 90%;
	height: 40%;

	margin: 10px 0;

	border-radius: 15px;

	color: white;

	cursor: pointer;

	font-size: min(16dvmin, 12rem);
	font-weight: bold;

	border: none;

	transition: background-color 200ms ease-in-out;
}

.join-button {
	background-color: rgb(33, 150, 243);
}

.create-button {
	background-color: rgb(76, 175, 80);
}

@media (min-aspect-ratio: 3/2) {
	.join-button,
	.create-button {
		font-size: min(15dvmin, 7rem);
	}

	.join-button::after,
	.create-button::after {
		content: '\00a0Game';
	}
}

@media (hover) {
	.join-button:hover {
		background-color: rgb(32, 137, 223);
	}

	.create-button:hover {
		background-color: rgb(69, 158, 72);
	}
}

.join-button:active {
	transition: background-color 25ms ease-out;
	background-color: rgb(25, 118, 210);
}

.create-button:active {
	transition: background-color 25ms ease-out;
	background-color: rgb(56, 125, 56);
}