/* buttons.css */

/* Base button styles */
button,
.btn {
  cursor: pointer;
  margin: 0 auto;
  width: 210px;
  font-family: sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  border-radius: 4px;
  padding: 6px 12px;
  line-height: 1.5;
  font-size: 3em;
}

/* Compact button */
.btncp {
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  padding: 6px 6px;
  color: #666;
  background-color: #fff;
}

/* Button focus/active cleanup */
.btn:focus,
.btn.active:focus,
.btn.active.focus,
.btn:active:focus,
.btn:active.focus,
.btn.focus {
  background: none;
  outline: 0;
}

/* Dark theme */
.btn.btn-d {
  background: #222;
  color: #fff;
}

.btn.btn-d:hover,
.btn.btn-d:focus {
  background: #222;
}

/* Red theme */
.btn.btn-red {
  background: #660000;
  color: #fff;
}

.btn.btn-red:hover,
.btn.btn-red:focus {
  background: #c00;
}

/* Sizing */
.btn.btn-lg {
  font-size: 13px;
  padding: 12px 45px;
}

.btn.btn-sm {
  font-size: 13px;
  padding: 12px 15px;
}

/* Highlight border */
.btn-hl {
  border: 2px solid #ff0000;
}

.sttBtn{
  position: fixed;
  right: 10px; bottom: 10px;
  z-index: 99;
  width: 40px; height: 40px;
  border: 0; border-radius: 4px;
  background: #ccc; color: #000;
  padding: 0; line-height: 0;           /* <- no baseline shift */
  display: inline-grid; place-items: center; /* <- exact centering */
  cursor: pointer;
}
.sttBtn svg{ display: block; width: 24px; height: 24px; } /* <- no inline-gap */

/* make the hidden attribute actually hide the button */
.sttBtn[hidden] { display: none !important; }