html {
	font-family: William Semi, "Helvetica Neue", sans-serif; font-size: 16px;
	text-align: justify;
}
body { margin: 0; }
button, input[type="submit"] {
	user-select: none;
	-webkit-touch-callout: none;
  -webkit-user-select: none;
}
button:enabled, input[type="submit"]:enabled, .fs-buttons img, #abandon, trix-editor a { cursor: pointer; }
button:disabled, input[type="submit"]:disabled, select:disabled {cursor: not-allowed }
.hidden { display: none !important; } 
.grecaptcha-badge { visibility: hidden; }
.alert { color: white; background-color: red; text-align: center; font-weight: bold; font-style: italic; padding: 1em; }
.turbo-progress-bar { visibility: hidden; }
.alertify { font-size: max(1rem, 1vw); text-align: left; }

#author { display: flex; flex-direction: column; width: 100vw; height: 100svh; }
#author  ol { padding-inline-start: 1em; }
#author button:active:enabled { background-color: #ffca00; }
#author .highlight { background-color: orange; padding: 1em; }
#author .nowrap { text-wrap: nowrap; }
#author .nobreak { white-space: nowrap; break-before: avoid; }
#author .unjustified { text-align: left !important; }
#author .centered-text { text-align: center !important; }
#author .space-above { margin-top: 1em; }
#author .more-space-above { margin-top: 2em; }
#author .bold { font-weight: bold; }
#author .good { color: #2ff724; }
#author .important {  color: #fd6400; }

#alerts { list-style-type: none; padding-left: 0 !important; margin: 0; font-size: max(1rem, 1.5vw); background: #fff; color: #333; font-weight: bold; text-align: center; }
#alerts li { background: #2ff724; margin-top: .3em; padding: .5em;  border: 1px solid black; }
#alerts span { float: right; margin-left: 2em; cursor: pointer; }

#author-pages { flex-grow: 1;  position: relative; }

#edit { font-size: max(1.2rem, 2vmax); }
#create-buttons { position: absolute; top: 0.2em; right: .2em; z-index: 2; }
#create-buttons * { vertical-align: middle; }
#create-buttons .fs-buttons img { height: 1.5em; }
#create-buttons #message-length, #create-buttons #abandon { font-size: .7em; }
#preview-button { font-size: .7em !important; padding: .3em !important; }
#preview-button:enabled { color: #ffefaf; background-color: #006100; }
#message-length { font-weight: bold; color: #006100; }
#message-length.too-long { color: red }

trix-editor { position: absolute; top: max(2.4rem, 3.2vmax); bottom:0; width:100%; box-sizing: border-box; overflow: auto; }

.trix-button--icon-link, .trix-button--icon-code, .trix-button--icon-attach, .trix-button-group--file-tools,
.trix-button--icon-decrease-nesting-level, .trix-button--icon-increase-nesting-level, .trix-button--icon-quote,
.trix-button--icon-strike, .trix-button--icon-bullet-list { display: none !important }
@container (width < 22em) {	.trix-button--icon-redo { display: none !important; } }

trix-toolbar { container-type: inline-size; margin-left: .2em; }
.trix-button-row, .trix-button-group--text-tools, .trix-button-group--block-tools, .trix-button-group--history-tools {
	display: inline !important; }
trix-toolbar .trix-button-group { border: 0; }
trix-toolbar .trix-button { margin-right: 8px; }
.trix-button-emoji { font-size: 1.4em !important; }
.trix-emoji-container { position: relative; }
em-emoji-picker { height: 80vh; position: absolute; z-index: 1; right: 0;  top: 6em; }

trix-editor[data-placeholder="true"] h1:first-child { text-align: left; padding: 1em 0 0 3.5em !important; background: url("/assets/envelope-head-40f7ee42.svg") no-repeat 1% bottom / 2.5em; }
.trix-content a[href="#alert"] { text-decoration: none; text-align: left; cursor: default; font-weight: bold !important; font-style: italic; color: red; }
.trix-content a[href="#start"] { color: #333; font-weight: bold; text-decoration: none; background-color: #2ff724; padding: 1rem; border: 1px solid black; border-radius:.5em; }
.trix-content { line-height: 1.35; }
.trix-content li { margin-bottom: .5em; text-align: left; }
.trix-content ul { margin-top: 1em; }
.trix-content li:last-child { margin-bottom: 0; }

#abandoned {
	height: 100vh;
	background-image: url("/assets/peace-796dc2a8.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

#abandoned div {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 1em;
}

#abandoned button {
	font-size: min(3rem, 3vw) !important; width: min(16rem, 20vw); aspect-ratio: 1 / 1;  
}

#status {
	position: absolute; top: 0; bottom: 0;  width: 100%; overflow: auto;
	font-size: max(1rem, 1vw);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(99vw, 30rem), 1fr));
	grid-auto-flow: dense;
	grid-gap: 1rem;
	padding: 0.5vw;
	box-sizing: border-box;
}

#status #alert { grid-column: span 3; text-align: center; }
#status section { border: 2px solid black; border-radius: 1rem; padding: .75rem; }
section#message-status, section#message-control, section#send { color: #ffefaf; background-color: #333; }
section#premium-description, section#premium-options { color: #000; background: #ffde21; }
section#share-site { background: #83d0f2; display: flex; flex-direction: column; justify-content: center; }
section#message-preview { grid-row: span 3; font-size: max(1.3rem, 1.3vw); text-align: justify; background-color: #ffefaf; }
section#message-control {grid-row: span 2; }
#status h2, section#message-status, section#premium-description #notes, section#premium-options,
  section#message-control, section#send, section#share-site { text-align: center; }

#status button, #abandoned button, #author input[type="submit"] { font-size: max(1rem, 1vw); text-align: center; padding: .3em; border-radius: .5em; }
#status input[type="text"], input[type="email"] { font-size: max(1rem, 1.2vw); text-align: center; width: 26em; max-width: 95%; }
#status label { font-size: 1.3em; }
#status button.danger { color: #ffefaf; background-color: red;  }
#status button.warning { color: #333; background-color: orange; }
#status h2 { margin: 0 0 2rem 0; }
#status p { text-align: justify; }
#status div.info { display: inline-block; text-align: left; width: 80% }
#status button, #status input { margin: 1em auto; font-weight: bold; vertical-align: middle;  }
#status button.selected { color: white; background-color: green; }
#status button > img, #download > img { height: max(3em, 4vw); float: left; margin-right: .5vh; }
#status button span, #download span { display: inline-block; margin-top: .5em; }
#status select { font-size: max(1rem, 1.3vw); text-align: center; }

#status-div { position: relative;  padding: 2em 0; background: url("/assets/envelope-head-40f7ee42.svg") no-repeat 0 1em / 3em; }
#status-div .fs-buttons { position: absolute; right: 0; top: 1.25em; }
#status-div .fs-buttons img { height: 3em; }
.status { font-size: min(1.3rem, 4vw); color: white;  border: 2px solid black; padding: 1vh; font-weight: bold; }
.status#not-sent  { background-color: #666; }
.status#not-yet-shown  { background-color: #0096ff; }
.status#stopped  { background-color: red; }
.status#partially-shown  { background-color: green; }
.status#partially-shown-stopped { background-color: #fe5e00; }
.status#shown  { background-color: #00d501; }
.status#expired-unshown { background-color: black; }
#recipient-statuses { margin: 1em 0 2em 0; }

.button-line { display: flex; gap: 1em; flex-wrap: wrap; margin: 1.5em 0; }
.button-line button { margin: 0 auto !important; }
.button-pair >:nth-child(2) { margin-left: 1em !important; }
.button-line form { display: inline; }
.button-pair a { display: inline-block; }
#message_number_of_replays_allowed { margin-bottom: 1em; }
#voice-options select, #try-voice { display: block; margin: 1em auto; }
#voice-preview.playing { background-color: #fe5e00; }

.share-link-div { max-width: min(23em, 100%); margin: 1em auto; color: #333; background: #ffca00; border: 1px solid black; border-radius: 1rem; padding: 1em; }
.share-link-div .button-line { gap: 0; }
.share-link-div p { margin-bottom: 0; }
.share-url { font-size: max(14px, 1.5vw); font-weight: bold; color: #222; }

#continue-editing:enabled { color: #ffefaf; background-color: #147acf; }
#push-message-turn-on, #send-form>button, #share-site>button { display: block; margin: 1em auto; }
#push-denied-ios img { height: 1.5em;  vertical-align: bottom; }
a#download { font-size: max(1rem, 1.1vw); font-weight: bold; text-decoration: none; background-color: #2ff724;
             padding: .5em; border: 1px solid black; border-radius:.5em; margin: 0 1em; }

#premium-description li { margin-bottom: 1em; }
#buy-premium, #resend-validation-email { display: block; margin: 0 auto; }

#premium-options input { margin-top: 0; display: block; }
#message_notification_email::placeholder { background-color: #fff; }
#message_notification_email:invalid { background-color: #f78181; }
#message_notification_email:valid { background-color: #90ee90; }
#validation-email-status, #premium-save-status { font-size: 200%; color: #2ff724; }
#validation-email-status.error, #premium-save-status.error { color: red; font-size: 120%; }
#resend-validation-email img, #set-premium-options img { height: 4em; }
#set-premium-options { margin-top: 2em; }

#send-form button span, #share-site button span { float: right; }
.recipient-nickname { margin: 1em auto !important; }
#message-url { color: #147acf; text-align: center; }
.get-qr img { display: block; margin: 1em auto; width: 50%; aspect-ratio: 1 / 1; }
#print-qr-link img { vertical-align: middle; }

#show-preview-back { position: fixed; top: max(10px, 1.25vmax); left: max(10px, 1.25vmax);
	                   width: max(40px, 5vmax); height: max(40px, 5vmax); border-radius: max(40px, 5vmax);
                     background: url("/assets/arrow_back-bcfff7c2.svg") no-repeat 50% 50% / max(30px, 4vmax) #ffff;
                     z-index: 1; cursor: pointer; opacity: 0.7;
                   }
#premium-background-watermark { position: fixed; top: 55vh; width: 100%; text-align: center; z-index: 2; rotate: -10deg; 
  font-size: 6vw; letter-spacing: .2em; font-style: italic; font-weight: bold; text-shadow: .2vw .2vw .4vw; opacity: 0.3; }
#test-show-options, #test-show-options button { font-size: min(2rem, 3.6vw) !important; }
#test-show-options > span { position: absolute; bottom: 1vh; z-index: 2; }
#test-show-options button { text-align: center; padding:.4em; border-radius: 1vw; width: min(10rem, 18vw); aspect-ratio: 1 / 1; }
#set-background { right: 0; }
#set-show-speed { left: 0; }
#set-background button, #set-show-speed button { margin: 0 .5vw; }
#show-speed { font-size: 1.4em; color: black; background: white; padding: .5em; border-radius: .5em; position: absolute; top: -3em; margin-left: -1.5em; }