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;
}
select { color: black; background: white; }
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; color: white; }
.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; }
.alertify button { min-width: 6em !important; min-height: 3em !important;}
.not-too-wide { max-width: min(90%, 40em); margin: 2em auto; font-size: max(0.75rem, 2vmax); }
.not-too-wide h2 img { height: 1.4em; vertical-align: middle; }
.not-too-wide ol { padding-left: 5vw; }
.not-too-wide li { margin-bottom: 1em; }
.not-too-wide li code { overflow-wrap: anywhere; }

#author { display: flex; flex-direction: column; width: 100vw; height: 100svh; }
#author ol { padding: 0 1em 1em 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; }
.space-below { margin-bottom: 1em !important; }
#author .bold { font-weight: bold; }
#author .good { color: #2ff724; }
#author .important {  color: #fd6400; }

#alerts { list-style-type: none; padding: 0 !important; margin: 0; font-size: max(1rem, 1.5vw); background: #fff; color: #333; font-weight: bold; text-align: center; }
#alerts li { position: relative; background: #2ff724; margin-top: .3em; padding: .5em 1.5em .5em .5em;  border: 1px solid black; }
#alerts span { position: absolute; top: .2em; right: .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; }
trix-editor[data-placeholder="true"] ol { list-style-type: none; padding: 1em 0; border: 2px solid #000; border-radius: 1em; background-color: #ffefaf; }
body.ios-safari trix-editor[data-placeholder="true"] div+ol { margin-bottom: 2em;}
body.ios-safari trix-editor[data-placeholder="true"] div+ol h1 { background: url("/assets/Apple_iOS_logo-ebed2dfb.svg") no-repeat 1% 100% / 2em; }
body:not(.ios-safari) trix-editor[data-placeholder="true"] div+ol { display: none; }
trix-editor[data-placeholder="true"] ol strong { display: inline-block; vertical-align: bottom; width: 1.8em; height: 1.5em; background: url("/assets/ios-share2-8b8d423a.png") no-repeat 0 0 / 1.5em; }
trix-editor[data-placeholder="true"] ol:not(:first-child) { cursor: pointer; }
trix-editor[data-placeholder="true"] ol li { margin-left: 0; }
.trix-content a[href="#alert"] { text-decoration: none; text-align: left; cursor: default; font-weight: bold !important; font-style: italic; color: red; }
.trix-content div:has(a[href="#alert"]) { margin-top: 2em; }
.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; text-align: left; }
.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(.85rem, 1vw);
	line-height: 1.4;
	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; }

@media (max-width: 125rem) {
  section#message-status p a { color: #fff; font-weight: bold; }
}
@media (min-width: 125rem) {
  section#message-status p a { color: #ffefaf; text-decoration: none; }
}

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; }
section#message-status h2.premium { color: orange; }

#status button, #alerts button, #abandoned button, #author input[type="submit"] { font-size: max(1rem, 1vw); font-weight: bold; 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: 0 auto; font-weight: bold; vertical-align: middle;  }
#status #push-message-turn-on { margin: 1em auto 2em auto; }
#status #share-status-link { margin: 1em auto 2em auto; }
#status button.selected { color: white; background-color: green; }
#status button > img, a.button > img { height: max(3em, 4vw); float: left; margin-right: .5vh; }
#status button span, #download-message span { display: inline-block; margin: .5em; }
#status select { font-size: max(1rem, 1.3vw); text-align: center; }

#status-div { position: relative; margin-bottom: 1em;}
#status-div .fs-buttons { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; }
#status-div .fs-buttons img { height: 3em; }
.status { display: inline-block; font-size: min(1.2rem, 5vw); color: white;  border: 2px solid black; padding: 1vh; font-weight: bold; }
.status#queued-for-creation-for-download, .status#queued-for-creation-for-upload { background-color: #898989; }
.status#being-created-for-download, .status#being-created-for-upload { background-color: #147acf; }
.status#queued-for-upload { background-color: #8600c8; }
.status#being-uploaded { background-color: #7212c6; }
.status#uploaded { background-color: #1faca4; }
.status#not-sent, .status#not-yet-requested { background-color: #666; }
.status#not-yet-shown  { background-color: #0096ff; }
.status#stopped, .status#creation-failed { background-color: red; }
.status#partially-shown  { background-color: green; }
.status#partially-shown-stopped, .status#upload-failed, .status#auth-error { background-color: #ff3201; }
.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; align-items: center; margin: 1.5em 0; }
.button-line>* { margin: 0 auto !important; }
.button-line form { display: inline; }
.chooser button:not(.selected) { background: #888; color: #ddd; }
.button-pair >:nth-child(2) { margin-left: 1em !important; }
.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; }
#vertical { aspect-ratio: 9 / 16; width: 5em;}
#horizontal { aspect-ratio: 16 / 9; height: 5em; }
#video-deliveries button { display: block; }
#status .change-upload-user { margin-top: 0.5em; }

.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.button {  display: inline-block; color: rgb(85, 26, 139); 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; }
apple-pay-button { --apple-pay-button-height: 5em; }
#buy-premium:has(apple-pay-button) { background-color: transparent; border: none; }

#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; }
#status #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: 2; cursor: pointer; opacity: 0.7;
                   }
#premium-background-watermark { position: fixed; top: 55cqh; width: 100cqw; text-align: center; z-index: 2; rotate: -10deg; 
  font-size: 6cqw; letter-spacing: .2em; font-style: italic; font-weight: bold; text-shadow: .2cqw .2cqw .4cqw; opacity: 0.3; }
#test-show-options, #test-show-options button { font-size: min(2rem, 3.6cqw) !important; }
#test-show-options button { text-align: center; padding: .4em; border-radius: 1vw; width: min(10rem, 18cqw); aspect-ratio: 1 / 1; margin: 0 0.3cqw;  }
#set-show-speed { position: absolute; top: 1cqh; right: 1cqw; z-index: 2; }
#test-show-options-bottom > span { position: absolute; bottom: 1cqh; z-index: 2; }
#set-background { right: 1cqw; }
#set-font { left: 1cqw; }
#show-speed { font-size: 1.4em; color: black; background: white; padding: .5em; border-radius: .5em; position: absolute; top: 4em; margin-left: -1.5em; }
#premium-font-banner { font-size: 1em; font-weight: bold; color: #ffde21; background: black; padding: .3em; border: 6px solid #ffde21; border-radius: .5em; position: absolute; top: -3em; margin-left: 1.5em; }
video { width: 100vw; height: 99vh;}
#show-preview { width: 100vw; height: 100vh; background-color: #000; }