style.css

:root {
	--color-primary: 50 205 50; 		/* limegreen */
	--color-secondary: 13 38 19;		/* dark green */
	--color-tertiary: 2 12 5; 			/* almost black green */
	--color-supplement-01: 96 241 96;	/* light limegreen */
	--color-supplement-02: 18 94 18;	/* dark limegreen */
	--stripes: linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(0 0 0) 50%, rgb(0 0 0) 50%, rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 0%) 100%);

	/* -- typography */
	--font-primary: "Courier New", serif;

	/* -- spacing */
	--gap: 1.6rem;

	/* -- misc */
	--timing: 350ms;
	--easing: ease-in-out;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

*:focus-visible {
	outline-color: rgb(var(--color-supplement-01));
	color: rgb(var(--color-supplement-01)) !important;
}

html {
	background-color: rgb(var(--color-tertiary));
}

h1,
h2,
h3 {
	margin-block: 0;
	color: rgb(var(--color-primary));
}

a {
	color: rgb(var(--color-primary));
	position: relative;
	text-decoration: none;
}

a:hover {
	color: rgb(var(--color-supplement-01));
}

a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	border-top: 1px dashed rgb(var(--color-supplement-02));
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	padding: calc(var(--gap) * 3) var(--gap);
	margin: 0;
	text-align: center;
	line-height: 1.3;
	background-image: radial-gradient(circle, #0d2613, #0d2513, #0c2313, #0c2212, #0c2112, #0c1f11, #0c1d10, #0b1b0f, #09180d, #08150b, #061109, #050d07);
	font-family: var(--font-primary);
	color: rgb(var(--color-primary));

	/* Standard version (Firefox only for now) */
	scrollbar-color: rgb(var(--color-secondary)) rgb(var(--color-tertiary));
}

/* Thanks https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/ */
/* For Chrome & Safari */
body::-webkit-scrollbar {
	width: calc(var(--gap) / 2);
	height: calc(var(--gap) / 2);
}

body::-webkit-scrollbar-thumb {
	background: rgb(var(--color-secondary));
	border-radius: 5px;
}

body::-webkit-scrollbar-track {
	background: rgb(var(--color-tertiary));
}

/* -- lines */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: #000000;
	background: var(--stripes);
	background-size: 3px 3px;
	pointer-events: none;
	z-index: 1;
}

/* -- innner shadow */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	box-shadow: 0 0 20vh 0 inset #000;
	z-index: 5;
}

.glares {
	position: fixed;
	left: 5vw;
	right: 5vw;
	top: 5vh;
	z-index: 10;
}

/* -- Fake "glares" */
.glares::before,
.glares::after {
	position: fixed;
	content: '';
	display: block;
	filter: blur(20px);
	border-radius: 2vw 2vw 10vw 10vw;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.7) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: .15;
	pointer-events: none;
}

.glares::before {
	width: calc((100%) - 10vw);
	height: 25vh;
}

.glares::after {
	width: 15vw;
	height: 60vh;
	right: 15vw;
	top: 15vh;
	filter: blur(50px);
}

/* MAIN APP WINDOW
   ========================================================== */
.app {
	position: relative;
	z-index: 20;
}

@media (min-width: 581px) {
	.app {
		max-width: 75vw;
	}
}

@media (min-width: 993px) {
	.app {
		max-width: calc(var(--gap) * 18);
	}
}

.app__form {
	position: relative;
}

.app__form::after {
	content: 'max ' attr(data-length) ' chars';
	position: absolute;
	right: 0;
	top: calc(var(--gap) / 2);
	color: rgb(var(--color-primary));
	font-size: .6rem;
}

/* APP TITLE AND SUBTITLE
   ========================================================== */
.app__title {
	font-weight: 400;
	position: relative;
	font-size: 1.25rem;
	text-shadow: 0 0 4px rgb(var(--color-primary));
}

@media (min-width: 581px) {
	.app__title {
		font-size: 2.125rem;
	}
}

/* -- shadow text */
.app__title::after {
	content: attr(data-title);
	color: rgb(var(--color-secondary));
	text-shadow: 0 0 15px rgb(var(--color-primary));
	opacity: .8;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

.app__title-text,
.app__subtitle-text {
	position: relative;
	z-index: 5;
}

.app__subtitle {
	font-weight: 400;
	position: relative;
	text-shadow: 0 0 4px rgb(var(--color-primary));
	font-size: 1rem;
}

/* -- shadow text */
.app__subtitle::after {
	content: attr(data-title);
	color: violet;
	text-shadow: 0 0 15px rgb(var(--color-primary));
	opacity: .75;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

/* APP FORM
   ========================================================== */
.app__label {
	display: none;
}

.app__textarea {
	background-color: transparent;
	width: 100%;
	min-height: calc(var(--gap) * 3);
	border: 2px dashed rgba(var(--color-primary) / 25%);
	margin-top: var(--gap);
	resize: vertical;
	color: rgb(var(--color-primary));
	padding: calc(var(--gap) / 2) calc(var(--gap) / 2);
	transition: box-shadow var(--timing) var(--easing);
	caret: rgb(var(--color-primary)) block;
}

.app__textarea:focus {
	background-color: rgba(var(--color-secondary) / 5%);
	outline: 3px solid rgba(var(--color-primary) / 30%);
	box-shadow: 0 0 20px -4px rgb(var(--color-primary));
}

.app__buttons {
	display: flex;
	justify-content: space-between;
	margin-top: calc(var(--gap) / 2);
}

.app__button {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	padding: calc(var(--gap) / 3) calc(var(--gap) / 2);
	text-transform: uppercase;
	font-family: var(--font-primary);
	color: rgb(var(--color-primary));
	border: 2px dashed rgb(var(--color-primary) / 75%);
	border-right: 0;
	cursor: pointer;
	transition:
		border-color var(--timing) var(--easing),
		text-shadow var(--timing) var(--easing),
		color var(--timing) var(--easing);
	width: calc(var(--gap) * 5);
	text-align: left;
	transform: translate3d(0, 0, 0); /* iOS Safari fix ... */
}

.app__button + .app__button {
	border: 2px dashed rgb(var(--color-primary) / 75%);
	border-left: 0;
	text-align: right;
}

.app__button:hover {
	border-color: rgb(var(--color-primary));
	text-shadow: 0 0 7px rgb(var(--color-primary));
	color: #ffffff;
}

/* APP DESCRIPTION
   ========================================================== */
.app__desc {
	font-size: .875rem;
	text-shadow: 0 0 10px rgb(var(--color-primary));
	margin-top: calc(var(--gap) * 2);
	padding-top: calc(var(--gap) / 2);
	border-top: 2px dashed rgb(var(--color-primary) / 25%);
}

/* MODAL
   ========================================================== */
.modal {
	display: none;
	padding: var(--gap) var(--gap);
	position: fixed;
	inset: 0;
	background-color: rgb(var(--color-tertiary));
	color: rgb(var(--color-primary));
	z-index: 30;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
}

@media (min-width: 993px) {
	.modal {
		padding: calc(var(--gap) * 2.25) calc(var(--gap) * 2.25);
	}
}

.modal.is-visible {
	display: flex;
}

.modal.lights-on {
	background-color: #fff;
	color: rgb(var(--color-secondary));
}

.modal.lights-on .modal__button {
	border-color: rgb(var(--color-secondary));
	color: rgb(var(--color-secondary));
}

.modal.lights-on .modal__button::before {
	display: none;
}

.modal__body {
	word-break: break-word;
	font-weight: 600;
	max-height: calc(100vh - (var(--gap) * 6));
	letter-spacing: .05rem;
	overflow: hidden;
}

/* -- modal buttons */
.modal__button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(var(--gap) * 2);
	height: calc(var(--gap) * 2);
	background-color: transparent;
	color: rgb(var(--color-primary));
	position: absolute;
	text-decoration: none;
	transition: background-color var(--timing) var(--easing),
	color var(--timing) var(--easing);
	border: 2px dashed rgb(var(--color-primary) / 50%);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transform: translate3d(0, 0, 0); /* iOS Safari fix ... */
}

.modal__button:hover {
	background-color: rgba(var(--color-primary) / 75%);
	color: rgb(var(--color-secondary));
}

/* -- stripe effect */
.modal__button::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--stripes);
	background-size: 3px 3px;
	opacity: .2;
	pointer-events: none;
	transform: translate3d(0, 0, 0); /* iOS Safari fix ... */
}

.modal__button::after {
	display: none;
}

.modal__button svg {
	transform: translate3d(0, 0, 0); /* iOS Safari fix ... */
}

/* -- button variants */
.modal__button-icon {
	display: flex;
}

.modal__button-icon--on {
	display: none;
}

.modal__button.is-active .modal__button-icon--on {
	display: flex;
}

.modal__button.is-active .modal__button-icon--on + .modal__button-icon {
	display: none;
}

.modal__button--close {
	right: calc(var(--gap) / 2);
	top: calc(var(--gap) / 2);
}

.modal__button--fullscreen {
	left: calc(var(--gap) / 2);
	top: calc(var(--gap) / 2);
}

.modal__button--lights,
.modal__button--qr {
	left: calc(var(--gap) / 2);
	bottom: calc(var(--gap) / 2);
}

.modal__button--qr {
	left: calc(var(--gap) * 3);
}

.modal__button--plus,
.modal__button--minus {
	right: calc(var(--gap) / 2);
	bottom: calc(var(--gap) / 2);
}

.modal__button--minus {
	right: calc(var(--gap) * 3);
}

/* QR CODE
   ========================================================== */
[id="qr-code-container"]:not(:empty) {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--gap) var(--gap);
	background-color: rgb(var(--color-tertiary));
	position: fixed;
	inset: calc(var(--gap) * 3) calc(var(--gap) / 2);
	z-index: 35;
	transform: translate3d(0, 0, 0); /* iOS Safari fix ... */
}

[id="qr-code-container"] img,
[id="qr-code-container"] canvas {
	border: var(--gap) solid #fff;
	max-width: 100%;
}

.lights-on [id="qr-code-container"]:not(:empty) {
	background-color: #fff;
}

/* FOOTER
   ========================================================== */
.footer {
	font-size: .75rem;
	color: rgb(var(--color-supplement-02));
	transition: color var(--timing) var(--easing);
	line-height: 1.5;
	z-index: 10;
	margin-top: calc(var(--gap) * 2);
}

@media (min-height: 700px) {
	.footer {
		position: fixed;
		left: 50%;
		bottom: calc(var(--gap) / 2);
		translate: -50% 0;
	}
}

.footer:hover,
.footer:hover a {
	color: rgb(var(--color-supplement-01));
}

.footer a {
	color: rgb(var(--color-supplement-02));
	transition: color var(--timing) var(--easing);
}