/*
* CSS Fontface declarations
*/
@font-face {
  font-family: mplus;
  src: url("/assets/mplus-regular.ttf") format('truetype'),
    url("/assets/mplus-regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: mplus;
  src: url("/assets/mplus-bold.ttf") format('truetype'),
    url("/assets/mplus-bold.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: mplus;
  src: url("/assets/mplus-black.ttf") format('truetype'),
    url("/assets/mplus-black.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
}


/*
* App state display toggles
*/

.seen-once__encrypt,
.seen-once__decrypt,
.seen-once__url-share-container {
  display: none;
}

.seen-once[data-state="decrypt"] .seen-once__decrypt {
  display: block;
}

.seen-once:not([data-state="decrypt"]) .seen-once__encrypt {
  display: block;
}

.seen-once.form-submitted .seen-once__url-share-container {
  display: block;
}

#copyToast:not(.visible) {
  opacity: 0;
}

.seen-once:not(.decoded-response-returned) .decrypted-message__failure,
.seen-once:not(.decoded-response-returned) .decrypted-message__success {
  display: none;
}


.seen-once__decrypted-message:not(.error) .decrypted-message__failure {
  display: none;
}

.seen-once__decrypted-message.error .decrypted-message__success {
  display: none;
}

.decrypted-message__failure-message {
  display: none;
}

.seen-once__decrypted-message[data-status-code="404"] .decrypted-message__failure-404 {
  display: block;
}

.seen-once__decrypted-message[data-status-code="500"] .decrypted-message__failure-500 {
  display: block;
}

.seen-once__decrypted-message:not([data-status-code="404"]):not([data-status-code="500"]) .decrypted-message__failure-other {
  display: none;
}

.seen-once.decoded-response-returned .seen-once__reveal {
  display: none;
}

.seen-once.form-submitted .form {
  display: none;
}


/*
* CSS Vars
*/

:root {
  /* colors */
  --bg-light:     #EBE9E9;
  --bg-medium:    #D8D4D4;
  --bg-dark:      #4B4444;
  --color-white:  #ffffff;

  --text-bold:    #4B4444;

  --copy-bg:      #ccf2ce;
  --copy-fg:      #4B4444;

  --success-bg:   #2A1E5C;
  --success-fg:   #EBE9E9;

  --error-fg:     #EBE9E9;
  --error-bg:     #EE4266;

  --footer-fg:    #ffffff;
  --footer-bg:    #2A1E5C;

  --dark-fg:      #464646;

  /* sizes */
  --border-radius: 0.5rem;

  /* durations */
  --transition-standard: 0.25s;
}


/*
* General styling
*/

html {
  min-height: 100vh;
}

body {
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-weight: 900;
  color: var(--dark-fg);
}

h1 {
  font-size: 3.5rem;
  margin-bottom: 2.5rem;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

p {
  margin-bottom: 0.8rem;
  line-height: 2.25rem;
  color: var(--dark-fg);
}

a {
  color: var(--dark-fg);
}

i {
  font-style: italic;
}

select {
  margin-right: 1.5rem;
}

textarea {
  box-shadow: 0 0 0px 3px var(--bg-light);
  padding: 2.5rem;
  line-height: 1.15rem;
  border-radius: var(--border-radius);
  display: block;
  width: calc(100% - 5rem);
  margin-bottom: 1.5rem;
}

button {
  border: none;
  padding: 0.25rem 1.5rem;
  background: var(--success-bg);
  font-weight: 700;
  color: var(--color-white);
  border-radius: var(--border-radius);
  cursor: pointer;
  opacity: 0.8;
}

button:hover {
  opacity: 1;
  transition-duration: var(--transition-standard);
}

hr {
  opacity: 0.25;
}

summary {
  cursor: pointer;
  user-select: none;
}

disclosure {
  padding-left: 2rem;
  display: block;
  margin-bottom: 5rem;
}

details h2 {
  display: inline-block;
}

.page-width {
  max-width: calc(100vw - 5rem);
  margin: 0 auto;
  display: block;
  padding: 0 2.5rem;
  position: relative;
  width: 80rem;
}

.seen-once {
  display: inline-block;
  width: 100%;
}

#copyToast {
  width: max-content;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  padding: 1rem 2.5rem;
  font-weight: 900;
  font-size: 2.2rem;
  background: var(--success-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 0.5rem var(--color-white);
  pointer-events: none;
  z-index: 999;
  transition-duration: var(--transition-standard);
}

#copyToast p {
  color: var(--success-fg);
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

.footer {
  background-color: var(--error-bg);
  position: sticky;
  top: 100%;
  padding: 5rem 0;
}

.footer__copyright {
  font-weight: 700;
}

.footer__copyright p {
  color: var(--error-fg);
  margin-bottom: 0;
  text-align: center;
}

.footer__copyright a {
  color: var(--error-fg);
}

.seen-once__inner > :not(:first-child) {
  margin: 5rem 0;
}

#url {
  background-color: var(--copy-bg);
  color: var(--copy-fg);
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 0 0.5rem;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

#decryptedMessage {
  background-color: var(--copy-bg);
  color: var(--copy-fg);
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 0 0.5rem;
}

.visually-hidden {
  opacity: 0;
  height: 1px;
  width: 1px;
  position: absolute;
  pointer-events: none;
}

.seen-once__intro-heading {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  margin-top: 2.5rem;
  text-decoration: none;
  font-family: 'mplus';
  font-weight: 900;
  display: block;
}

.seen-once__intro-heading .light-text {
  opacity: 0.25;
}

.body-content + .body-content {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

#revealButton {
  margin-top: 2.5rem;
}

.decrypted-message__failure button,
.seen-once__url-share-container button,
.decrypted-message__success button {
  margin-top: 4.2rem;
}