@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:  local('Roboto'),
        local('Roboto-Regular'),
        url('/fonts/roboto-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'),
       local('Roboto-Bold'),
       url('/fonts/roboto-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:  local('Roboto Italic'),
        local('Roboto-Italic'),
        url('/fonts/roboto-400i.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
 :root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/fonts/fa-solid-900.woff2") format("woff2")
}

.fas,
.fa-solid {
  font-weight: 900; }


body {
  font-family: 'Roboto', sans-serif;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
}

h2 {
  font-size: large;
}

.hex-data {
  font-family: monospace;
  font-size: x-large;
  font-weight: bold;
}

.error {
  color: red;
}

.error::before {
  content: '⚠️';
}

.pill {
  display: inline-block;
  border-radius: 15px;
  height: 10px;
  margin: 0 4px;
}

#hex-offset-representation {
  padding: 0 0px;
  margin: -20px 4px 20px;
}

.background-color-0 {
  background-color: brown;
}

.background-color-1 {
  background-color: steelblue;
}

.background-color-2 {
  background-color: yellowgreen;
}

.background-color-3 {
  background-color: coral;
}

.background-color-4 {
  background-color: violet;
}

.background-color-5 {
  background-color: crimson;
}

.color-0 {
  color: brown;
}

.color-1 {
  color: steelblue;
}

.color-2 {
  color: yellowgreen;
}

.color-3 {
  color: coral;
}

.color-4 {
  color: violet;
}

.color-5 {
  color: crimson;
}

object {
  visibility: hidden;
}

.radar {
  max-width: 100%;
  width: 590px;
  height: 232.5pt;
}

.radar-node {
  font-family: 'Font Awesome 6 Free';
  fill: #555;
}

.radar-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.radar-unit {
  margin: 20px;
  width: 590px;
}

#tooltip {
  opacity: 0;
  background-color: white;
  position: absolute;
  border: solid;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
}

[v-cloak] { display: none; }