html {
	font-size: clamp(9px, 5px + 0.25vw, 16px);
}

@media (min-resolution: 1.25x) {
	html {
		font-size: clamp(8px, 6px + 0.2vw, 14px);
	}
}

main {
	outline-color: var(--g);

	width: 42.5rem;
	margin-block-start: clamp(1rem, 10vh, 9rem);
	padding-inline-start: 0.5rem;

	grid-template-columns: 17.5rem 25rem;
	grid-template-rows: 5.5em 34.5rem;

	
	box-shadow: 0 0 4rem 4rem rgba(34, 34, 34, 0.75);
	background: rgba(34, 34, 34, 0.75);
}

#box {
	--s: 3rem; /* the size on the corner */
	--t: 0.5rem;  /* the thickness of the border */
	--p: 0.3rem; /* border space */
	--w: calc(42.2rem + 2 * (var(--p) + var(--t))); /* width of the box */
	--h: calc(40.2rem + 2 * (var(--p) + var(--t)));
	inset:  calc(clamp(1rem, 10vh, 9rem) - var(--t) - var(--p)) calc(50% - (var(--w) / 2) - var(--t));
	
	outline: var(--t) solid var(--g);
}

h1 {
	font-size: 3.6rem;
	font-weight: 600;
	line-height: 4.1rem;

	letter-spacing: 0.02em;
}

#menu {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.8rem;
	line-height: 2.5rem;
	border: 0.3rem solid var(--dg);
	margin: 0.5rem;

	background: var(--dg);
}

#menu:hover{
	background: var(--b);
	color: var(--dg);
	border: 0.3rem solid var(--dg);
}

#premenu{
	width: 1rem;
	height: 2.5rem;
	border: 0.3rem solid var(--gb);
	margin: 0.5rem;

	position: relative;
	inset-inline: 7.5rem;
}

#bar {
	grid-column: 1 / 3;
}

#data {
	grid-row: 2 / 2;
	justify-content: flex-start;
}

#info {
	margin: 0.5rem;
}

h3 {
	width: 15rem;
	height: 7.75rem;
	padding: 0;
	border-width: 0.5rem;

	border-color: var(--lg);
	color: var(--lg);

	font-size: 4rem;
	font-weight: 600;
	line-height: 7.7rem;
}

h6 {
	font-size: 1.6rem;
	padding: 0 1.5rem;
	margin: 0.05rem 0;
	order: 1;
}

#t1, #t2 {
	width: 28rem;
	margin: 0.6rem 0.5rem auto 0.5rem;
	border: none;
}

#t1 {
	height: 10.3rem;
	order: 2;
	margin-block-start: 1.2rem;
}

#t2 {
	height: 9.7rem;
	margin-block-end: 0;
	order: 3;
}

#t1.w0::after, #t2.w0::after {
	font-size: 2.4rem;
	inset: -3.55rem 15.65rem;
}

h4 {
	width: 8rem;
	height: 3rem;
	border: 0.2rem solid var(--gw);
	inset: -0.5rem !important;

	font-size: 1.4rem;
	line-height: 3rem;
	color: var(--gw);

	letter-spacing: -0.05em;
}

#t1.w1 {
	height: 21.2rem;
	width: 17.5rem;
	margin-block-end: auto;
}

#t2.w1, #t2.w2 {
	height: 0;
	margin: 0 0.5rem;
	border: 0;
}

#t2.w1 h4, #t2.w2 h4 {
	width: 9.6rem;
	height: 3.7rem;
	inset: -4.2rem 18.15rem !important;
	border: 0.2rem solid var(--lg);
	line-height: normal;

	margin: 0;
	color: var(--gw);

	font-size: 1.2rem;
	font-weight: 400;
	padding: 0;

	display: flex;
	align-items: center;
}

#t2.w2 h4 {
	color: var(--b);
	border-color: var(--dg);
}

#t1.w2 {
	height: 21.9rem;
	width: 17.5rem;
	margin: 0.5rem 0.5rem auto 0.5rem;
	border: 0;
	background: #210 !important;
}

#t1.w2 h4 {
	position: relative;
	inset: 0 0 !important;
	padding-inline: 2rem 3.5rem;
	width: 11.6rem;
	height: calc(100% - 0.3rem);
	background: none;
	border: 0.2rem solid #f20;

	font-size: 1.2rem;
	font-weight: 500;
}

#ui {
	border: 0.7rem solid var(--b);
	border-block-start: none;
	margin: 0;
	height: 29rem;
}

#slider {
	appearance: none;
	display: block;
	position: absolute;
    writing-mode: vertical-lr;
    direction: rtl;
	width: 1rem;
	margin: 1rem 1.5rem;
	padding: 0;
	height: 27rem;
	background: var(--b);
	z-index: 2;
}

#slider:hover {
	cursor: pointer;
}

#slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 2rem;
	height: 1.5rem;
	border: none;
	border-radius: 0.2rem;
	background: var(--gw);
	cursor: pointer;
}
#slider::-moz-range-thumb {
	width: 2rem;
	height: 1.5rem;
	border: none;
	border-radius: 0.2rem;
	background: var(--gw);
	cursor: pointer;
}
#slider::-ms-thumb {
	width: 2rem;
	height: 1.5rem;
	border: none;
	border-radius: 0.2rem;
	background: var(--gw);
	cursor: pointer;
}

#control, #stats, #dial {
	border: none;
	padding-inline: 4.5rem 1rem;
}

#control {
	justify-content: space-between;
	margin: 0;
	padding-block-end: 0;
}

label {
	flex: 0;
	padding-inline-start: 0.5rem;
}

#mass {
	background: none;
	width: fit-content;
}

label, #mass {
	font-size: 2.7rem;
	color: var(--gw);
}

#stats{
	padding: 0 1rem 0.5rem 4rem;
	height: 19rem;
	background: var(--dg);
}

.intro {
	font-size: 1.4rem;
	padding: 0;
	letter-spacing: -0.05em;
}

p {
	font-size: 1.8rem;
	padding: 1rem 2rem;
}

span {
	color: var(--gw);
}

.letter, .dash {
	display: block;
}

.name {
	display: none;
}

#dial {
	display: inline-block;
	width: calc(100% - 5.5rem);
}

button {
	background: var(--dg);
	border: 0.2rem solid var(--gw);
	color: var(--gw);
	font-family: Noto Sans Mono;
	font-size: 1.8rem;
	width: 7.75rem;
	height: 2.2rem;
	line-height: 0;
	margin: 0 0.3rem;
}

button:hover{
	cursor: pointer;
}

#version {
	font-size: 1.8rem;
	letter-spacing: 0.05em;
	padding: 1rem;
}
#version:hover {
	letter-spacing: 0.1em;
}

#support {
	font-size: 2rem;
	margin: 1.5rem auto;
}

#about {
	inset: calc(clamp(1rem, 10vh, 9rem) - 0.8rem) 0;
	width: 43rem;
	height: 42.8rem;
	padding: 1rem;
	grid-template-columns: 1fr 1fr 5rem;
}

h5 {
	font-size: 2.4rem;
}


#about a {
	font-size: 1.6rem;
}

#about p {
	font-size: 1.6rem;
}

#text {
	padding: 2rem;
}

#set p {
	font-size: 1.8rem;
}

.select {
	font-size: 2rem !important;
	line-height: 2.2rem;
}