body {
	margin: 2em;
	font-family: sans-serif;
	font-size: 1.2em;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: flex;
	gap: 1.5rem;

	label {
		margin-block: 1em;
	}
}

label {
	display: block;
	margin: 2em 0;

	span {
		display: block;
		padding: .5em 0;
		font-weight: bold;
		text-transform: capitalize;
	}

	select {
		font-size: .9em;

		option:disabled {
			background-color: #aaa;
		}
	}
}

button {
	box-sizing: content-box;
}

#qrcodeBtn {
	margin-block: 2em;
}

#copyBtn {
	padding: .25em;
	width: 1.75em;
	height: 1.75em;

	svg {
		width: 1.5em;
		aspect-ratio: 1;

		path {
			fill: #000;
		}
	}
}

#url-line {
	display: flex;
	align-items: center;
	gap: .25em;
}

mark:not(:empty) {
	display: inline-block;
	width: max-content;
	padding: .25em .5em;
	border: 1px solid black;
	margin-block: 1em;
}

#qrcode-area {
	padding-inline: 1em;
	border: 1px solid black;
	border-radius: .25em;

	p span {
		display: block;
		font-size: .8em;
		line-break: anywhere;
	}
}

#qrcode {
	width: 5.5cm;
	aspect-ratio: 1;
	margin: 1em 0;
}

@page {
	size: 10.5cm 14.8cm;
	margin: 1.5cm 1.25cm;
	break-inside: avoid;
}

@media print {
	body {
		margin: 0;
	}

	#selectForm,
	#qrcodeBtn,
	#url-line {
		display: none;
	}

	#qrcode-area {
		border: none;
		font-size: 5mm;

		p {
			margin-top: 0;
		}
	}

	#qrcode {
		margin-inline: auto;
	}
}