:root {
    /*--gray: #4C4A47; !* fuscous gray *!*/
    /*--pearl: #E6DBCD; !* pearl bush *!*/
    /*--blue-light: #92C3CC; !* half backed *!*/
    /*--blue-dark: #65A5B7; !* hippie blue *!*/
    /*--red-light: #cc9297; !* hue +166 *!*/
    /*--red-dark: #B76566; !* hue +166 *!*/

    /* vintage */
    --v-white: #f3f3ec;
    --v-white-dark: #e3ddd1;
    --v-red-light: #e8d1d1;
    --v-red-dark: #9d2222;
    --v-blue-light: #cddaeb;
    --v-blue-dark: #1f3972;

    /* palette */
    --white: var(--v-white);
    --white-dark: var(--v-white-dark);
    --primary-light: var(--v-red-light);
    --primary-dark: var(--v-red-dark);
    --secondary-light: var(--v-blue-light);
    --secondary-dark: var(--v-blue-dark);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--white);
    color: #222;
    font-size: 110%;
    margin: 0;
}

.selectable {
    cursor: pointer;
}

.card {
    background-color: var(--white);
    border: 2px solid var(--white-dark);
    border-radius: 6px;
    margin: 10px;
    adding: 10px;
    position: relative;
}

.card-header {
    background-color: var(--white-dark);
    display: flex;
    font-size: 140%;
    justify-content: space-between;
    padding: 16px;
}

.card-body {
    font-size: 120%;
    overflow: auto;
    padding: 16px;
}

.disabled {
    color: #888;
}

.page-container {
    padding: 20px;
}


/* https://getcssscan.com/css-buttons-examples */
.button-primary {
  appearance: none;
  background-color: var(--secondary-dark);
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.button-secondary {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, .15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 6px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}