@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
@import url('fonts.css');

/* Color variables */
:root {
  --opencage-primary: #20b282;
  --opencage-dark-green: #1a8865;
  --opencage-light-green: #e3f5ed;
}

/* Font Awesome overrides */
.fas {
  color: var(--opencage-primary);
  font-size: 0.9em;
  padding-right: 0.3em;
}

/* Bootstrap overrides */
.btn-outline-primary {
  --bs-btn-color: var(--opencage-primary);
  --bs-btn-border-color: var(--opencage-primary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--opencage-primary);
  --bs-btn-hover-border-color: var(--opencage-primary);
  --bs-btn-focus-shadow-rgb: 32, 178, 130;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--opencage-primary);
  --bs-btn-active-border-color: var(--opencage-primary);
  --bs-btn-disabled-color: var(--opencage-primary);
}

/* Site custom styles */
body {
  font-family: Roboto, Calibri, Verdana, sans-serif;
  font-size: 0.9rem;
}

a {
  color: var(--opencage-primary);
  text-decoration: none;
}

a:hover {
  color: var(--opencage-dark-green);
  text-decoration: underline;
}

h1 {
  color: var(--opencage-dark-green);
}

#coordsform {
  max-width: 30em;
}

body > .container {
  max-width: 800px;
}

#copy-button {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: none;
  padding: 1px 5px;
}

#output table td {
  position: relative;
}

#output table td:hover {
  background-color: var(--opencage-light-green);
}

.ques {
  color: var(--opencage-dark-green);
  font-size: 1.6em;
  margin-top: 1.5em;
}

.ans {
  margin: 1em 0;
}

.blockquote {
  background-color: #fafafa;
  border: 1px solid var(--opencage-light-green);
  border-radius: 5px;
  font-style: italic;
  font-size: 1em;
  margin: 1em 0;
  padding: 1em;
}

.footer-divider {
  border-top: 1px solid var(--opencage-dark-green);
}