options.css

body {
  padding: 2em;
  font-family: Helvetica, Calibri, Arial, sans-serif;
  font-size: 150%;
}

/* Generic styles */

h2 { padding-top: 50px; }
h3 { padding-top: 20px; }

label, li { padding: 0 8px; line-height: 1.5em; }
input, select {
  font-family: inherit;
  font-size: inherit;
}

.separator { padding: 0 12px; }
.bold { font-weight: bold; }
.space-left { margin-left: 1em; }

/* Radio or Checkbox selection */

.selection { padding: 10px 0; }
.comment {
  font-size: 90%;
  font-weight: normal;
}

/* Font type */

#current-font-name {
  padding: 0 8px;
  font-weight: bold;
}

.font-category { cursor: pointer; }
.font-category.active { text-decoration: underline; }

#submit { opacity: .3; }
#submit.active { opacity: 1; cursor: pointer; }

.font-area .selection {
  font-size: 80%;
}

#google-fonts-area {
  display: flex;
  flex-direction: column;
}

#google-fonts-area ol { margin-top: 0; }
#google-fonts-area ol li { line-height: 2em; }

#google-fonts-area input {
  max-width: 500px;
  box-sizing: content-box;
  outline: none;
  border: 1px solid silver;
  padding: 12px;
}

/* Font size */

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  outline: none;
  background: var(--slider-background-color);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--slider-thumb-background-color);
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
}

/* With comment */

.selection.with-comment {
  display: flex;
  align-items: baseline;
}

.selection.with-comment .comment {
  margin: 15px 35px 30px 35px;
  padding: 20px;
  border-radius: 6px;
  line-height: 1.5em;
  background: var(--comment-background-color);
  color: var(--comment-text-color);
}

/* Theme labels */

.theme-label {
  display: inline-block;
  margin: 5px 0;
  padding: 10px 8px;
  border-radius: 3px;
}

#light-theme-label {
  border: 1px solid white;
  background: white;
  color: #121212;
}

#dark-theme-label {
  border: 1px solid #121212;
  background: #121212;
  color: white;
}

#custom-theme-label {
  border: 1px solid #FF9800;
  background: #FF9800;
  color: white;
  font-style: italic;
}

/* Hotkeys */

#hotkeys,
#hotkeys .hotkey {
  display: none;
}

#hotkeys td {
  vertical-align: baseline;
}

#hotkeys .description {
  font-weight: bold;
  padding-right: 2em;
}

body.os-mac #hotkeys,
body.os-other #hotkeys {
  display: block;
}

body.os-mac #hotkeys .hotkey.os-mac,
body.os-other #hotkeys .hotkey.os-other {
  display: inline-block;
}

/* Sync */

#sync-folder-location {
  word-break: break-all;
}

/* Media Queries */

@media only screen and (max-width: 600px) {
  .font-category {
    display: block;
  }

  .separator {
    display: none;
  }
}