:root {
  font-family: "Inter", sans-serif;
  font-size: 16px;

  color-scheme: light dark;
  color: var(--neutral-12);
  background-color: var(--neutral-1);
}

:root {
  --whiteblack: white;

  --sage-1: #fbfdfc;
  --sage-2: #f7f9f8;
  --sage-3: #eef1f0;
  --sage-4: #e6e9e8;
  --sage-5: #dfe2e0;
  --sage-6: #d7dad9;
  --sage-7: #cbcfcd;
  --sage-8: #b8bcba;
  --sage-9: #868e8b;
  --sage-10: #7c8481;
  --sage-11: #5f6563;
  --sage-12: #1a211e;

  --green-1: #fbfefc;
  --green-2: #f4fbf6;
  --green-3: #e6f6eb;
  --green-4: #d6f1df;
  --green-5: #c4e8d1;
  --green-6: #adddc0;
  --green-7: #8eceaa;
  --green-8: #5bb98b;
  --green-9: #30a46c;
  --green-10: #2b9a66;
  --green-11: #218358;
  --green-12: #193b2d;

  --slate-1: #fcfcfd;
  --slate-2: #f9f9fb;
  --slate-3: #f0f0f3;
  --slate-4: #e8e8ec;
  --slate-5: #e0e1e6;
  --slate-6: #d9d9e0;
  --slate-7: #cdced6;
  --slate-8: #b9bbc6;
  --slate-9: #8b8d98;
  --slate-10: #80838d;
  --slate-11: #60646c;
  --slate-12: #1c2024;

  --blue-1: #fbfdff;
  --blue-2: #f4faff;
  --blue-3: #e6f4fe;
  --blue-4: #d5efff;
  --blue-5: #c2e5ff;
  --blue-6: #acd8fc;
  --blue-7: #8ec8f6;
  --blue-8: #5eb1ef;
  --blue-9: #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;

  --mauve-1: #fdfcfd;
  --mauve-2: #faf9fb;
  --mauve-3: #f2eff3;
  --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6;
  --mauve-6: #dbd8e0;
  --mauve-7: #d0cdd7;
  --mauve-8: #bcbac7;
  --mauve-9: #8e8c99;
  --mauve-10: #84828e;
  --mauve-11: #65636d;
  --mauve-12: #211f26;

  --ruby-1: #fffcfd;
  --ruby-2: #fff7f8;
  --ruby-3: #feeaed;
  --ruby-4: #ffdce1;
  --ruby-5: #ffced6;
  --ruby-6: #f8bfc8;
  --ruby-7: #efacb8;
  --ruby-8: #e592a3;
  --ruby-9: #e54666;
  --ruby-10: #dc3b5d;
  --ruby-11: #ca244d;
  --ruby-12: #64172b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --whiteblack: black;

    --sage-1: #101211;
    --sage-2: #171918;
    --sage-3: #202221;
    --sage-4: #272a29;
    --sage-5: #2e3130;
    --sage-6: #373b39;
    --sage-7: #444947;
    --sage-8: #5b625f;
    --sage-9: #63706b;
    --sage-10: #717d79;
    --sage-11: #adb5b2;
    --sage-12: #eceeed;

    --green-1: #0e1512;
    --green-2: #121b17;
    --green-3: #132d21;
    --green-4: #113b29;
    --green-5: #174933;
    --green-6: #20573e;
    --green-7: #28684a;
    --green-8: #2f7c57;
    --green-9: #30a46c;
    --green-10: #33b074;
    --green-11: #3dd68c;
    --green-12: #b1f1cb;

    --slate-1: #111113;
    --slate-2: #18191b;
    --slate-3: #212225;
    --slate-4: #272a2d;
    --slate-5: #2e3135;
    --slate-6: #363a3f;
    --slate-7: #43484e;
    --slate-8: #5a6169;
    --slate-9: #696e77;
    --slate-10: #777b84;
    --slate-11: #b0b4ba;
    --slate-12: #edeef0;

    --blue-1: #0d1520;
    --blue-2: #111927;
    --blue-3: #0d2847;
    --blue-4: #003362;
    --blue-5: #004074;
    --blue-6: #104d87;
    --blue-7: #205d9e;
    --blue-8: #2870bd;
    --blue-9: #0090ff;
    --blue-10: #3b9eff;
    --blue-11: #70b8ff;
    --blue-12: #c2e6ff;

    --mauve-1: #121113;
    --mauve-2: #1a191b;
    --mauve-3: #232225;
    --mauve-4: #2b292d;
    --mauve-5: #323035;
    --mauve-6: #3c393f;
    --mauve-7: #49474e;
    --mauve-8: #625f69;
    --mauve-9: #6f6d78;
    --mauve-10: #7c7a85;
    --mauve-11: #b5b2bc;
    --mauve-12: #eeeef0;

    --ruby-1: #191113;
    --ruby-2: #1e1517;
    --ruby-3: #3a141e;
    --ruby-4: #4e1325;
    --ruby-5: #5e1a2e;
    --ruby-6: #6f2539;
    --ruby-7: #883447;
    --ruby-8: #b3445a;
    --ruby-9: #e54666;
    --ruby-10: #ec5a72;
    --ruby-11: #ff949d;
    --ruby-12: #fed2e1;
  }
}

.theme-green {
  --neutral-1: var(--sage-1);
  --neutral-2: var(--sage-2);
  --neutral-3: var(--sage-3);
  --neutral-4: var(--sage-4);
  --neutral-5: var(--sage-5);
  --neutral-6: var(--sage-6);
  --neutral-7: var(--sage-7);
  --neutral-8: var(--sage-8);
  --neutral-9: var(--sage-9);
  --neutral-10: var(--sage-10);
  --neutral-11: var(--sage-11);
  --neutral-12: var(--sage-12);

  --accent-1: var(--green-1);
  --accent-2: var(--green-2);
  --accent-3: var(--green-3);
  --accent-4: var(--green-4);
  --accent-5: var(--green-5);
  --accent-6: var(--green-6);
  --accent-7: var(--green-7);
  --accent-8: var(--green-8);
  --accent-9: var(--green-9);
  --accent-10: var(--green-10);
  --accent-11: var(--green-11);
  --accent-12: var(--green-12);
}

.theme-blue {
  --neutral-1: var(--slate-1);
  --neutral-2: var(--slate-2);
  --neutral-3: var(--slate-3);
  --neutral-4: var(--slate-4);
  --neutral-5: var(--slate-5);
  --neutral-6: var(--slate-6);
  --neutral-7: var(--slate-7);
  --neutral-8: var(--slate-8);
  --neutral-9: var(--slate-9);
  --neutral-10: var(--slate-10);
  --neutral-11: var(--slate-11);
  --neutral-12: var(--slate-12);

  --accent-1: var(--blue-1);
  --accent-2: var(--blue-2);
  --accent-3: var(--blue-3);
  --accent-4: var(--blue-4);
  --accent-5: var(--blue-5);
  --accent-6: var(--blue-6);
  --accent-7: var(--blue-7);
  --accent-8: var(--blue-8);
  --accent-9: var(--blue-9);
  --accent-10: var(--blue-10);
  --accent-11: var(--blue-11);
  --accent-12: var(--blue-12);
}

.theme-ruby {
  --neutral-1: var(--mauve-1);
  --neutral-2: var(--mauve-2);
  --neutral-3: var(--mauve-3);
  --neutral-4: var(--mauve-4);
  --neutral-5: var(--mauve-5);
  --neutral-6: var(--mauve-6);
  --neutral-7: var(--mauve-7);
  --neutral-8: var(--mauve-8);
  --neutral-9: var(--mauve-9);
  --neutral-10: var(--mauve-10);
  --neutral-11: var(--mauve-11);
  --neutral-12: var(--mauve-12);

  --accent-1: var(--ruby-1);
  --accent-2: var(--ruby-2);
  --accent-3: var(--ruby-3);
  --accent-4: var(--ruby-4);
  --accent-5: var(--ruby-5);
  --accent-6: var(--ruby-6);
  --accent-7: var(--ruby-7);
  --accent-8: var(--ruby-8);
  --accent-9: var(--ruby-9);
  --accent-10: var(--ruby-10);
  --accent-11: var(--ruby-11);
  --accent-12: var(--ruby-12);
}

body {
  max-width: 750px;
  margin: 0 auto;
  padding: 54px 16px;
}

p,
input,
textarea,
label {
  color: var(--neutral-12);
}

p {
  line-height: 1.5;
}

a {
  color: var(--accent-11);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-8);

  &:hover {
    border-bottom: 2px solid var(--accent-9);
  }
}

input,
textarea {
  font: inherit;
}

button {
  font: inherit;
  font-size: 17px;
  font-weight: 700;

  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--accent-6);
  color: var(--accent-11);
  background-color: var(--accent-3);

  &:hover {
    border: 1px solid var(--accent-8);
  }

  &:active:not(:disabled) {
    background-color: var(--accent-4);
  }

  &.primary {
    color: white;
    border: 1px solid var(--accent-10);
    background-color: var(--accent-9);

    &:hover {
      background-color: var(--accent-10);
    }

    &:active:not(:disabled) {
      background-color: var(--accent-11);
    }
  }
}

/* Title */
h1 {
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 32px;

  .accent {
    color: var(--accent-11);
  }
}

/* Heading */
h2 {
  font-weight: 600;
  font-size: 22px;
  margin: 42px 0 26px;
}

strong {
  font-weight: 600;
}

.hide {
  display: none;
}

.tool-group {
  margin-bottom: 72px;
}

.tool {
  --padding: 17px 18px;
  width: calc(100% - ((2 * var(--padding)) + 2px));
  height: 270px;
  border: 1px solid var(--accent-7);
  border-radius: 12px;
  padding: var(--padding);
  background-color: var(--whiteblack);
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
  gap: 8px;

  textarea {
    border: 0;
    padding: 0;
    font-size: inherit;
    line-height: 1.25;
    background-color: transparent;
    caret-color: var(--accent-9);
    outline: none;
    grid-column: span 2;
    resize: none;

    &::placeholder {
      color: var(--neutral-10);
    }

    .mode-decrypt & {
      font-family: "IBM Plex Mono", monospace;
    }
  }

  .timegroup {
    align-self: end;
  }

  input[type="datetime-local"] {
    margin-bottom: -5px;
    border: 0;
    border-bottom: 2px dotted var(--accent-11);
    padding: 0;
    padding-bottom: 1px;
    font-weight: 500;
    color: var(--accent-11);
    background-color: transparent;

    &:disabled {
      color: var(--neutral-11);
      -webkit-text-fill-color: var(--neutral-11);
      border-bottom-color: transparent;
    }
  }

  .buttons {
    justify-self: end;
    display: flex;
    gap: 16px;
  }

  button.primary {
    min-width: 108px;
  }
}

#message {
  font-size: 14px;
  margin: 12px 20px;
  color: var(--ruby-10);
}

code,
pre,
.codeblock {
  font-family: "IBM Plex Mono", monospace;
}

.codeblock {
  font-size: 15px;
  margin: 1em 0;
  border: 1px solid var(--neutral-7);
  padding: 26px 30px;
  background-color: var(--whiteblack);
  text-wrap: nowrap;
  overflow: scroll;
}

.disclaimer {
  font-weight: 600;
}

footer {
  margin: 90px 0 0;
}

@media (max-width: 900px) {
  body {
    padding: 24px 16px;
  }

  .tool {
    height: 290px;
    grid-template-columns: 1fr;
    gap: 18px;

    textarea {
      grid-column: auto;
    }

    .timegroup {
      text-align: center;
    }

    .buttons {
      justify-self: stretch;
    }

    button {
      width: 100%;
    }
  }
}