/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
code,
img {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    text-decoration: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/ */

:root, 
[data-selected-theme="grey"] {
  --color-app-background: #2F2F2F;
  --color-app-background-2: #4D4D4D;
  --color-text: #fff;
  --color-button-pressed: #212121;
  --color-accent: #737373;
}
[data-selected-theme="night"] {
  --color-app-background: #000;
  --color-app-background-2: #1B1B1B;
  --color-text: #eee;
  --color-button-pressed: #212121;
  --color-accent: #525151;
}
[data-selected-theme="day"] {
  --color-app-background: #e0e0e0;
  --color-app-background-2: #f0f0f0;
  --color-text: #000;
  --color-button-pressed: #000;
  --color-accent: #fff;
}
[data-selected-theme="catppuccin_mocha"] {
  --color-app-background: #181825;
  --color-app-background-2: #1e1e2e;
  --color-text: #cdd6f4;
  --color-button-pressed: #313244;
  --color-accent: #f5e0dc;
}

:root {
  background-color: var(--color-app-background);
  color: var(--color-text);

  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.container {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 400;
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-app-background-2);
  transition: border-color 0.25s;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  outline: none;
}

button#set_text {
  margin-top: 5px;
  width: 25vw;
  margin-inline: auto;
}

button:hover {
  border-color: #396cd8;
}
button:active {
  border-color: #396cd8;
  background-color: var(--color-button-pressed);
}

a {
  color:#ABFFAC;
  text-decoration: underline;
}

code {
  font-family: monospace;
}

div#default_config {
  color: #FFF;
  background-color: #F37945;
  border: 2px solid #EB5B28;
  border-radius: 10px;
  width: 95vw;
  margin-inline: auto;
  margin-top: 5px;
  overflow-wrap: break-word;
}

textarea {
  background-color: var(--color-app-background-2);
  border: 3px solid var(--color-accent);
  border-radius: 5px;
  font-size: 16px;
  width: 80vw;
  margin-top: 5px;
  margin-inline: auto;
  color: var(--color-text);
}