@import "../js/leaflet/leaflet.css";
@import "../js/components/map/map.css";
@import "../js/components/list/list.css";
@import "../js/components/locate/locate.css";
@import "../js/components/pin/pin.css";
@import "../js/components/info/info.css";
@import "../js/components/message/message.css";
@import "../js/components/status/status.css";

:root {
  --color-blue: #aad3df;
  --color-darkgreen: #235a0c;
  --color-mediumgreen: #add19e;
  --color-lightgreen: #cdebb0;
  --color-lightgrey: #f2efe9;

  --color: #fff;
  --color-1: #ddd;
  --color-3: #bbb;
  --color-5: #999;
  --color-7: #666;
  --color-9: #333;
  --bg: #000;

  --accent: #ffaa66;

  --action-bar-height: 3rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  font: 1em/1.3 sans-serif;
  background-color: var(--bg);
  color: var(--color);
}

button,
.button {
  border: solid 2px transparent;
  background-color: var(--bg);
  padding: 0.75rem 1rem;
  color: var(--color);
  font-weight: 700;

  img {
    width: 1.5rem;
    height: auto;
  }
}

button:hover,
button:active,
.button:hover,
.button:active {
  background-color: var(--color-7);
}

button:focus,
.button:focus {
  border: solid 2px var(--accent);
}

button[disabled] {
  opacity: 0.3;
}

#go-github {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  opacity: 0.9;
  width: 3rem;
  height: 3rem;
  background-color: transparent;

  &:hover,
  &:active {
    background-color: var(--accent);
  }
}

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}