:root {
    --main-margin: 15px;
    --both-margin: 30px;
    --main-color: slategray;
    --main-color-bright: rgba(19,211,179,.1);
    --gray: #bbb;
    --back-gray: #f0f0f0;
    --accent-1: #ffb224;
    --accent-2: #e02080;
    --main-radius: 4px;
    --weak-shadow: 0 0 1px rgba(0,0,0,.3);
    --panel-shadow: 0 1px 2px rgba(0,0,0,.4);
    --float-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.navbar-toggler:hover {
    background-color: #13d3b3;
}
.navbar-toggler {
    background-color: #0fa88f;
}
.navbar {
    background-color: #13d3b3;
}

.navbar li a {
    color: white;
}
#title span {
    display: table-cell;
    color: white;
    font-size: 1.2rem;
    text-shadow: var(--panel-shadow);
}

#title strong {
    color: var(--accent-1);
    font-size: 1.5rem;
    font-weight: bold;
}

#title p{
    font-size: 0.6rem;
    color: white;
    margin:0px;
}

#title a:hover {
    color: white;
}


* {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.link {
  color: mediumblue;
}
a.link:visited {
  color: steelblue;
}
main {
    width: 100%;
    color: #222;
    font-size: 13px;
    font-family: sans-serif;
    -webkit-text-size-adjust: none;
}
h1 {
  color: var(--main-color);
  font-size: 2rem;
  font-weight: bold;
}
h1.page-title {
  margin: var(--main-margin) var(--main-margin) 0 var(--main-margin);
}
.note {
  margin: var(--main-margin);
}
hr {
  margin: var(--main-margin) 0 var(--main-margin) 0;
  border: none;
  border: 0.5px solid lightgray;
}
th, td {
  padding: 0.5rem;
  vertical-align: middle;
}
button, input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: 1px solid var(--gray);
  border-radius: 0;
  background-color: white;
  margin: 0;
  padding: 0.45em 0.7em 0.45em 0.7em;
}
button {
  border-radius: var(--main-radius);
  transition-property: background-color;
  transition-duration: 0.2s;
}
button:hover {
  color: white;
  background-color: var(--main-color);
  text-shadow: var(--weak-shadow);
  border-color: transparent;
}
button:active {
  background-color: var(--accent-1);
}
button.act {
  color: white;
  background-color: var(--main-color);
  font-weight: bold;
  border-color: transparent;
  text-shadow: var(--weak-shadow);
  box-shadow: var(--panel-shadow);
}
.composite {
  display: flex;
  align-items: center;
}
.composite input, .composite button {
  margin: 0 -1px 0 0;
  border-radius: 0;
}
.composite button:first-of-type {
  border-radius: var(--main-radius) 0 0 var(--main-radius);
}
.composite button:last-of-type {
  border-radius: 0 var(--main-radius) var(--main-radius) 0;
}
dl.recent {
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: var(--back-gray);
  border-radius: var(--main-radius);
}
dl.recent dt {
  float: left;
}
dl.recent dd {
  margin-left: 6.5em;
}

.darkmode--activated .straye_exp_settings_table label,
.darkmode--activated .straye_exp_settings_table span,
.darkmode--activated .straye_exp_settings_table input,
.darkmode--activated .straye_exp_settings_table .button,
.darkmode--activated .exp-memo-area label,
.darkmode--activated .exp-memo-area input,
.darkmode--activated .exp-memo-area textarea {
    background-color: black !important;
    color: white !important;
}