:root {
  --color-black: #2a2a2a;
  --color-grey: #647383;
  --color-light-blue-grey: #cad5e0;
  --color-ice-blue: #ebf0f5;
  --color-pale-grey: #f5f7fa;
  --color-white: #fff;
  --color-marine: #012954;
  --color-cerulean: #0096db;
  --color-cerulean--accessible: #0079d2;
  --color-pinkish-orange: #ff6f40;
  --color-pinkish-orange--accessible: #d0491e;
  --color-bluey-grey: #647383;
  --color-bluey-grey-brighter: #949ea8;
  --color-green-blue: #00c58e;
  --color-green-blue--accessible: #008762;
  --color-transparent: rgba(1, 0, 0, 0);
}

body {
  font-family: Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ebf0f5;
  padding: 10px;
}
.container {
  min-width: 1400px;
}

h2 {
  font-weight: normal;
}

#radar {
  min-height: 1000px;
  width: 100%;
}

header {
  margin-bottom: 60px;
}
section {
  margin-bottom: 60px;
}
section + section {
  border-top: 1px dotted black;
  padding-top: 60px;
}

dt {
  font-style: italic;
}

dl {
  max-width: 600px;
}

p {
  max-width: 600px;
}

.listings {
  display: flex;
  min-height: 50vh;
}

.listings > div {
  width: 300px;
  padding: 10px;
}

.card {
  border: 1px solid black;
  display: block;
  padding: 5px;
  background: var(--color-pale-grey);
  margin-bottom: 10px;
}
.card.in-use {
  border-color: var(--color-marine);
}
.card.may-use {
  border-color: var(--color-green-blue);
}
.card.not-used {
  border-color: var(--color-grey);
  opacity: 0.5;
}
.card h1 {
  font-size: 16px;
  margin-top: 0;
}
.card a {
  display: block;
}

.card .blipize {
  margin-top: 20px;
}

.legends .in-use:before {
  color: green;
  content: " ▉ ";
}
.legends .not-used:after {
  color: gray;
  content: " ▉";
}
.legends .may-use:after {
  color: lightblue;
  content: " ▉";
}
.name {
  font-weight: bold;
}
.auth {
  position: absolute;
  top: 10px;
  right: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background-color: var(--color-cerulean--accessible);
}

.gitlab {
  width: 20px;
  position: relative;
  top: 10px;
}

.card .count {
  display: block;
}