* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none;
	color: inherit;
	font-family: inherit;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}
body {
	overflow: hidden;
	position: absolute;
	display: grid;
	height: 100vh;
	width: 100vw;
	place-items: center;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 18px;
}
container {
	z-index: -10;
	display: grid;
	position: absolute;
	height: 100%;
	width: 100%;
	place-items: center;
	overflow: hidden;
}
line {
	position: absolute;
	width: 10000vw;
	height: 0px;
	border: 3px solid rgb(13 77 130/70%);
	transform-origin: center center;
}
#lineAngle {
	transform: rotate(-30deg);
}
box,
box:before {
	border-radius: 14px;
}
box {
	background-color: rgb(13 77 130/30%);
	padding: 9px 17px;
	text-align: center;
	position: absolute;
}
#boxAngle {
	right: 20px;
	top: 20px;
	font-size: 140%;
	color: rgb(13 77 130/80%);
}
#boxChange {
	left: 20px;
	top: 20px;
	display: grid;
	grid-template-columns: auto 1fr;
	place-items: center;
	gap: 12px;
}
#boxActions {
	right: 20px;
	bottom: 20px;
	display: grid;
	place-items: center;
}
box:before {
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgb(255 255 255/80%);
}

.selector {
	width: 40vw;
	padding-bottom: 9px;
}

.select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background-color: rgb(13 77 130/30%);
	border-radius: 4px;
}

.select::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 11px;
	height: 22px;
	border-radius: 7px;
	background-color: rgb(13 77 130/50%);
	cursor: pointer;
}

.select::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 11px;
	height: 22px;
	border-radius: 7px;
	background-color: rgb(13 77 130/70%);
	cursor: pointer;
}

.icon {
	margin-bottom: -15%;
}
.icon:before,
.icon:after {
	font-family: "hugeicons-stroke-rounded";
	font-size: 120%;
	color: rgb(13 77 130/80%);
}
.iconAngle:before {
	content: "\f15c6";
}
.iconThickness:before {
	content: "\f22e6";
}
.iconPrint:before {
	cursor: pointer;
	content: "\f23a7";
}

copyright {
	font-size: 12px;
	font-weight: 500;
	position: absolute;
	left: 20px;
	bottom: 20px;
	max-width: 60vw;
	text-wrap: balance;
}

@media print {
	body,
	html {
		width: 100%;
		height: 100%;
	}
	#boxChange,
	#boxActions {
		display: none;
	}
	* {
		background: none !important;
		color: rgb(0 0 0/100%) !important;
	}
	line {
		border-color: rgb(0 0 0/100%) !important;
	}
	#boxAngle {
		font-size: 240%;
	}
}