@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css");

@font-face {
  font-family: "Open Sans";
  src: url("Open Sans.ttf");
  font-weight: normal;
}
:root {
  --bs-dark: #1d1f2a;
  --bs-dark-rgb: 29, 31, 42;
  --bs-body-font-family: "Open Sans";
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 500;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--bs-dark);
  --bs-body-color-rgb: var(--bs-dark-rgb);
  --bs-body-bg: rgb(239, 239, 239);
  --bs-body-bg-rgb: 239, 239, 239;
}
.legend {
  gap: 12px 20px;
  margin-top: 10px;
}

.legend-item {
  align-items: center;
  gap: 0.5em;
}

.swatch {
  width: 1.75em;
  height: 1.25em;
  background: var(--color);
}

#circle {
  --radius: 200px;
  width: 800px;
  aspect-ratio: 1;
  position: relative;
  margin-inline: auto;
}

.icon {
  position: absolute;
  width: min(calc((85 / var(--total-num)) * 14px), 100px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle))
    translateY(calc(-1.5 * var(--radius))) rotate(calc(-1 * var(--angle)));
  z-index: 1;
}

.selected {
  box-shadow: 0 0 0 3px var(--color) !important;
}

#ship-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}