/* 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-key-background: #363636;
  --color-key-background-pressed: #212121;
  --color-text: #fff;
  --color-accent: #737373;
}
[data-selected-theme="night"] {
  --color-app-background: #000;
  --color-key-background: #0f0f0f;
  --color-key-background-pressed: #212121;
  --color-text: #eee;
  --color-accent: #525151;
}
[data-selected-theme="day"] {
  --color-app-background: #e0e0e0;
  --color-key-background: #fff;
  --color-key-background-pressed: #eee;
  --color-text: #000;
  --color-accent: #fff;
}
[data-selected-theme="catppuccin_mocha"] {
  --color-app-background: #181825;
  --color-key-background: #1e1e2e;
  --color-key-background-pressed: #313244;
  --color-text: #cdd6f4;
  --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: 500;
  font-family: inherit;
  color: #0f0f0f;
  background-color: #ffffff;
  transition: border-color 0.25s;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  outline: none;
}

button:hover {
  border-color: #396cd8;
}
button:active {
  border-color: #396cd8;
  background-color: #e8e8e8;
}

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;
}

div#keys,
div#mouse_buttons {
  /* horizontal spacing between keys is dependent on font-size of the parent div? */
  font-size: 0;
}

.key {
    width: 100px;
    height: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 5px;
    border: 5px solid var(--color-accent);
    border-radius: 5px;
    transition: var(--pressed-transition);
    background-color: var(--color-key-background);
    cursor: pointer;
    user-select: none;
}

[data-press-display="ease"] {    
  --pressed-transition: background-color 0.1s ease, transform 0.1s ease;
}

.pressed {
  background-color: var(--color-key-background-pressed) !important;
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}