/* === Global Reset & Base === */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--background-color-main: transparent;
	--font-family: 'Courier New', Courier, monospace;
	--font-size: 8pt;
	--font-style: italic;
	--font-color-main: #000000;
	--tab-width: 3;
	--global-width: 80%;
	--global-padding: 5px;
	--color-debug: red; /* debug color placeholder */
	--table-color-head-background: #f8f8f8;
	--table-color-border: #d6d5d5cc;
}

html,
body {
	height: 100%;
	margin: 0;
	font: var(--font-style) var(--font-size) var(--font-family);
	color: var(--font-color-main);
	background: var(--background-color-main);
	tab-size: var(--tab-width);
	-moz-tab-size: var(--tab-width);
	-o-tab-size: var(--tab-width);
}

body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 12px 12px 80px;
	line-height: 1.4;
	min-height: 100vh;
}

/* === Info Panel === */
#info {
	cursor: pointer;
	transition: background-color 0.3s ease;
}

#info.copied {
	background-color: rgba(36, 205, 61, 0.529);
	transition: background-color 0.3s ease;
}

/* === Footer === */
#footer {
  position: relative; /* больше не фиксированный */
  left: 50%;
  transform: translateX(-50%);
  width: var(--global-width);
  font: var(--font-style) var(--font-size) var(--font-family);
  color: var(--font-color-main);
  background: rgba(0, 0, 0, 0.05);
  text-align: center;
  padding: var(--global-padding);
  margin-top: 12px; /* минимальный отступ между таблицей и футером */
  white-space: pre-wrap;
  word-wrap: break-word;
  border-radius: 8px;
}