:root {
  @media(prefers-color-scheme: light){
    --color-background: #f5faff;
    --color-text: #373c41;
    --color-button: #c3c8cd;
    --color-delete: #ff737d;
  }
  @media(prefers-color-scheme: dark){
    --color-background: #0a0f14;
    --color-text: #c8cdd2;
    --color-button: #32373c;
    --color-delete: #8c2328;
  }
  font-family: Arial;
}

dialog {
  max-inline-size: none;
  max-block-size: none;
  inline-size: auto;
  block-size: auto;
  border: 0;
}

body, dialog:open {
  color: var(--color-text);
  padding: 10px;
  background-color: var(--color-background);
  margin: 0;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  
  &::backdrop {
    background-color: var(--color-background);
  }
}

h1, h2, h3 {
  text-align: center;
  margin-block: 8px;
}

h1 {
  font-size: 1.8rem;
  border-block-end: 2px solid var(--color-button);
  margin: 0;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
}

label, output {
  text-align: center;
}

output {
  white-space: preserve;
  margin-block: 10px;
}

button, input, textarea {
  color: unset;
  font-size: unset;
  min-block-size: 45px;
  padding-inline: 15px;
  border-radius: 15px;
  box-sizing: border-box;
}

button {
  background-color: var(--color-button);
  border: 0; 
  display: block;
  
  &.delete {
    background-color: var(--color-delete);
  }
}

input, textarea {
  background-color: unset;
  border: 2px solid var(--color-button);
}

ul {
  padding-inline: 50px;
  padding-block: 5px;
  min-block-size: 60px;
  box-sizing: border-box;
  overflow: auto;
  border: 2px solid var(--color-button);
  border-radius: 15px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px; 
  
  > li {
    list-style-type: none;
    padding: 0;
    
    > button {
      text-overflow: ellipsis;
      text-wrap: nowrap;
      inline-size: 100%;
      overflow: hidden;
    }
  }
}