style.css

html,
body {
	margin: 0;
	padding: 0;
	position: relative;
	line-height: 1.5;
	font-size: 18pt;
	f-ont-size: max(18pt, 2?vw);
}

div,
ul,
ol,
li,
p,
span,
form,
button,
input,
textarea,
img {
	margin: 0;
	padding: 0;
	position: relative;
	vertical-align: inherit;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	box-sizing: border-box;
	font: inherit;
}

a,
button,
input,
textarea {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	background: inherit;
	border: inherit;
	color: inherit;
	text-decoration: inherit;
	outline: none;
}
a:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
	animation: pulse 2s infinite;
}

input:not([type="button"]):not([type="submit"]),
textarea {
	width: 100%;
}
::placeholder,
.hint {
	color: inherit;
	opacity: 0.3;
}

ul,
li {
	list-style: none;
}

p {
	padding: 0;
}
p + p {
	padding-top: 0;
}

[contenteditable="true"]:empty:before {
	content: attr(placeholder);
}

.model,
.none {
	display: none;
}
.hide {
	opacity: 0;
	visibility: hidden;
	transition: all 2s;
}

.full,
.page {
	width: 100%;
	min-height: 100vh;
}

.max {
	max-width: 48em;
}
.min {
	min-width: 12em;
}
.pad {
	width: 95%;
	margin: 5% auto;
	max-width: 48em;
	min-width: 12em;
}

.right {
	float: right;
	text-align: right;
}
.left {
	float: left;
	text-align: left;
}
.center {
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}
.mid {
	margin-left: auto;
	margin-right: auto;
}
.top {
	vertical-align: top;
}
.low {
	vertical-align: bottom;
}

.rim {
	margin: 1%;
}
.gap {
	padding: 3%;
	padding: clamp(0.5em, 3%, 1.5em);
}
.stack {
	line-height: 0;
}
.crack {
	margin-bottom: 1%;
}
.sit {
	margin-bottom: 0;
}

.row {
	width: 100%;
}
.col {
	max-width: 24em;
	min-width: 12em;
}

.focus {
	margin-left: auto;
	margin-right: auto;
	float: none;
	clear: both;
}

.leak {
	overflow: visible;
}
.hold {
	overflow: hidden;
}

.act {
	/*display: block;*/
	font-weight: normal;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	cursor: pointer;
}

.unit,
.symbol {
	display: inline-block;
	vertical-align: inherit;
}
.sap {
	border-radius: 0.1em;
}
.jot {
	border-bottom: 1px dashed #95b2ca;
}

.loud {
	font-size: 150%;
}
.shout {
	font-size: 36pt;
	font-size: 6.5vmax;
}

.red {
	background: #ea3224;
}
.green {
	background: #33cc33;
}
.blue {
	background: #4d79d8;
}
.yellow {
	background: #d3a438;
}
.black {
	background: black;
}
.white {
	background: white;
}

.shade {
	background: rgba(0%, 0%, 0%, 0.1);
}
.tint {
	background: rgba(100%, 100%, 100%, 0.1);
}

.redt {
	color: #ea3224;
}
.greent {
	color: #33cc33;
}
.bluet {
	color: #4d79d8;
}
.yellowt {
	color: #d3a438;
}
.blackt {
	color: black;
}
.whitet {
	color: white;
}

.hue {
	background: #4d79d8;
	-webkit-animation: hue 900s infinite;
	animation: hue 900s infinite;
}
@keyframes hue {
	0% {
		background-color: #4d79d8;
	}
	25% {
		background-color: #33cc33;
	}
	50% {
		background-color: #d3a438;
	}
	75% {
		background-color: #ea3224;
	}
	100% {
		background-color: #4d79d8;
	}
}
@-webkit-keyframes hue {
	0% {
		background-color: #4d79d8;
	}
	25% {
		background-color: #33cc33;
	}
	50% {
		background-color: #d3a438;
	}
	75% {
		background-color: #ea3224;
	}
	100% {
		background-color: #4d79d8;
	}
}

.huet {
	color: #4d79d8;
	-webkit-animation: huet 900s infinite;
	animation: huet 900s infinite;
}
@keyframes huet {
	0% {
		color: #4d79d8;
	}
	25% {
		color: #33cc33;
	}
	50% {
		color: #d3a438;
	}
	75% {
		color: #ea3224;
	}
	100% {
		color: #4d79d8;
	}
}
@-webkit-keyframes huet {
	0% {
		color: #4d79d8;
	}
	25% {
		color: #33cc33;
	}
	50% {
		color: #d3a438;
	}
	75% {
		color: #ea3224;
	}
	100% {
		color: #4d79d8;
	}
}

.hue2 {
	background: #ea3224;
	-webkit-animation: hue2 900s infinite;
	animation: hue2 900s infinite;
}
@keyframes hue2 {
	0% {
		background-color: #ea3224;
	}
	25% {
		background-color: #4d79d8;
	}
	50% {
		background-color: #33cc33;
	}
	75% {
		background-color: #d3a438;
	}
	100% {
		background-color: #ea3224;
	}
}
@-webkit-keyframes hue2 {
	0% {
		background-color: #ea3224;
	}
	25% {
		background-color: #4d79d8;
	}
	50% {
		background-color: #33cc33;
	}
	75% {
		background-color: #d3a438;
	}
	100% {
		background-color: #ea3224;
	}
}

.huet2 {
	color: #ea3224;
	-webkit-animation: huet2 900s infinite;
	animation: huet2 900s infinite;
}
@keyframes huet2 {
	0% {
		color: #ea3224;
	}
	25% {
		color: #4d79d8;
	}
	50% {
		color: #33cc33;
	}
	75% {
		color: #d3a438;
	}
	100% {
		color: #ea3224;
	}
}
@-webkit-keyframes huet2 {
	0% {
		color: #ea3224;
	}
	25% {
		color: #4d79d8;
	}
	50% {
		color: #33cc33;
	}
	75% {
		color: #d3a438;
	}
	100% {
		color: #ea3224;
	}
}

.hue3 {
	background: #33cc33;
	-webkit-animation: hue3 900s infinite;
	animation: hue3 900s infinite;
}
@keyframes hue3 {
	0% {
		background-color: #33cc33;
	}
	25% {
		background-color: #d3a438;
	}
	50% {
		background-color: #ea3224;
	}
	75% {
		background-color: #4d79d8;
	}
	100% {
		background-color: #33cc33;
	}
}
@-webkit-keyframes hue3 {
	0% {
		background-color: #33cc33;
	}
	25% {
		background-color: #d3a438;
	}
	50% {
		background-color: #ea3224;
	}
	75% {
		background-color: #4d79d8;
	}
	100% {
		background-color: #33cc33;
	}
}

.huet3 {
	color: #33cc33;
	-webkit-animation: huet3 900s infinite;
	animation: huet3 900s infinite;
}
@keyframes huet3 {
	0% {
		color: #33cc33;
	}
	25% {
		color: #d3a438;
	}
	50% {
		color: #ea3224;
	}
	75% {
		color: #4d79d8;
	}
	100% {
		color: #33cc33;
	}
}
@-webkit-keyframes huet3 {
	0% {
		color: #33cc33;
	}
	25% {
		color: #d3a438;
	}
	50% {
		color: #ea3224;
	}
	75% {
		color: #4d79d8;
	}
	100% {
		color: #33cc33;
	}
}

.hue4 {
	background: #d3a438;
	-webkit-animation: hue4 900s infinite;
	animation: hue4 900s infinite;
}
@keyframes hue4 {
	0% {
		background-color: #d3a438;
	}
	25% {
		background-color: #ea3224;
	}
	50% {
		background-color: #4d79d8;
	}
	75% {
		background-color: #33cc33;
	}
	100% {
		background-color: #d3a438;
	}
}
@-webkit-keyframes hue4 {
	0% {
		background-color: #d3a438;
	}
	25% {
		background-color: #ea3224;
	}
	50% {
		background-color: #4d79d8;
	}
	75% {
		background-color: #33cc33;
	}
	100% {
		background-color: #d3a438;
	}
}

.huet4 {
	color: #d3a438;
	-webkit-animation: huet4 900s infinite;
	animation: huet4 900s infinite;
}
@keyframes huet4 {
	0% {
		color: #d3a438;
	}
	25% {
		color: #ea3224;
	}
	50% {
		color: #4d79d8;
	}
	75% {
		color: #33cc33;
	}
	100% {
		color: #d3a438;
	}
}
@-webkit-keyframes huet4 {
	0% {
		color: #d3a438;
	}
	25% {
		color: #ea3224;
	}
	50% {
		color: #4d79d8;
	}
	75% {
		color: #33cc33;
	}
	100% {
		color: #d3a438;
	}
}

.pulse {
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

.joy {
	width: 100px;
	height: 100px;
	position: absolute;
	background: url(https://cdn.jsdelivr.net/npm/gun/examples/pop.png) no-repeat;
	background-position: -2800px 0;
	pointer-events: none;
	z-index: 999999999;
	animation: joy 1s steps(28);
}
@keyframes joy {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -2800px 0;
	}
}

.visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}