:root {
	--bg: #F0F0F0;
	--fg: #303090;
	--tx: #303090;
	--ov: #C09030;
	--tt: #000000;
	--font: TMAR, Arial, sans-serif;
}

@font-face {
    font-family: TMAR;
    src: url(font.otf);
}

@media (prefers-color-scheme: dark) {
	:root {
	--bg: #101010;
	--fg: #9090F0;
	--tx: #A0A0F0;
	--ov: #F0F0A0;
	--tt: #FFFFFF;
	}
}

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	color: var(--fg);

	font-family: var(--font);
	font-weight: 400;
	user-select: none;
	cursor: default;
}

a {
	display: block;
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: var(--ov);
}

a:hover.null {
	color: inherit;
}

t {
	color: var(--tt);
}

.img {
	display: inline-block;
	width: 100%;
	max-width: 210px;
	margin: 0;
	padding: 0;
	margin-left: -0.65em;
	margin-right: 1em;
}

/* Centering frame */
.frame {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: start;
	justify-content: center;
}

/* Perfect square */
.square, .items, .texte {
	width: min(100vw, 100vh);
	height: min(100vw, 100vh);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);

	font-family: var(--font);
	user-select: none;
}

.cell, .item {
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: calc(min(100vw, 100vh) * 0.15);
	line-height: 1;
	text-transform: lowercase;

	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	}

.empty {
	visibility: hidden;
}

.items, .texte {
	grid-template-columns: repeat(1, 1fr);
}

.texte {
	grid-template-rows: repeat(1, 1fr);
}

.item, .text {
	margin-left: 0.5em;
	justify-content: left;
	font-size: calc(min(1vw, 1vh) * 6);
}

.text {
}

.line, .prev {
	margin: 0 0.65em;
	text-indent: -0.65em;
	font-size: calc(min(1vw, 1vh) * 4.4);
	color: var(--tx);
}

.prev {
	color: var(--fg);
}