style.css

:root {
  --foreground-color: rgb(208, 233, 232);
  --foreground-color-hover: rgb(211, 246, 255);
  --background-color: rgb(14, 15, 17);
  --panel-color: rgba(44, 98, 169, 0.05);
  --panel-color-hover: rgba(44, 98, 169, 0.15);
  --panel-color-bright-hover: rgba(44, 98, 169, 0.5);
  --border-color: rgb(40, 105, 189);
  --border-width: 2px;
  --good-color: rgb(153, 255, 51);
  --bad-color: rgb(229, 43, 80);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blockin {
  border: 1px solid magenta;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

* {
  box-sizing: border-box;
}

#background-pattern {
  display: block;
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 9%,
    transparent 9%
  );
  background-position: 0% 0%;
  background-size: 2vmin 2vmin;

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -5;
}

#background-pattern-2 {
  display: block;
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 4.5%,
    transparent 4.5%
  );
  background-position: 1vmin 1vmin;
  background-size: 2vmin 2vmin;

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -5;
}

body {
  background-color: var(--background-color);
  margin: 0;
  width: 100vw;
  height: 100vh;
}

h1,
h2,
h3,
a,
p,
i,
span,
th,
td,
input,
label,
button,
select,
option {
  color: var(--foreground-color);
  font-family: "Roboto Condensed", Sans-serif;
}

h1 {
  font-size: 2.5em;
  font-weight: bolder;
  font-style: oblique;
  text-transform: uppercase;
  white-space: nowrap;
}

.border-left {
  border-left: var(--border-width) solid var(--border-color);
}
.border-right {
  border-right: var(--border-width) solid var(--border-color);
}
.border-top {
  border-top: var(--border-width) solid var(--border-color);
}
.border-bottom {
  border-bottom: var(--border-width) solid var(--border-color);
}

.grid-container {
  display: grid;
  grid-template-columns: 400px auto 400px;
  grid-template-rows: 128px auto 1fr;
  height: 100%;
  width: 100%;
  transition: all 400ms ease;
}

.panel {
  background-color: var(--panel-color);
  transition: all 400ms ease;
  z-index: 2;
}

.panel:hover {
  background-color: var(--panel-color-hover);
  backdrop-filter: blur(var(--border-width));
  -webkit-backdrop-filter: blur(var(--border-width));
}

.panel-bright {
  background-color: var(--panel-color-hover);
  transition: all 400ms ease;
}
.panel-bright:hover {
  background-color: var(--panel-color-bright-hover);
  backdrop-filter: blur(var(--border-width));
  -webkit-backdrop-filter: blur(var(--border-width));
}

.panel:hover > #img-logo {
  filter: contrast(120%) brightness(200%)
    drop-shadow(0 0 1em var(--border-color));
}

.logo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#img-logo {
  max-width: 256px;
  margin-left: -3%;
  transition: all 400ms ease;
}

.name {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4rem;
  gap: 1rem;
  overflow: hidden;
}

.social {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rem;
  gap: 2rem;
  overflow: hidden;
}

.icon-social {
  transition: all 400ms ease;
}

.icon-social:hover {
  text-shadow: 0 0 1em var(--border-color);
  color: var(--foreground-color-hover);
}

.stats {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  resize: vertical;
  transition: background-color 400ms ease;
  max-height: 100%;
}

.query {
  grid-column: 1;
  grid-row: 3;
  padding: 1rem;
  display: grid;
  overflow-x: hidden;
  overflow-y: auto;
}

.button-query {
  background-color: var(--panel-color);
  border: var(--border-width) solid var(--border-color);
  color: var(--foreground-color);
  padding: 1rem 2rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-style: oblique;
  font-size: 1.5em;
  margin: 0.2em 0.1em;
  cursor: pointer;
  transition: all 400ms ease;
}

.button-query:hover {
  color: var(--foreground-color-hover);
  border-color: var(--foreground-color-hover);
  background-color: var(--panel-color-hover);
  text-shadow: 0 0 1em var(--border-color);
  box-shadow: 0 0 1em var(--background-color);
}

.button-query:active {
  background-color: var(--border-color);
  color: var(--background-color);
  box-shadow: none;
  transition: all 200ms ease;
}

#button-generate {
  bottom: 1em;
  left: 1em;
  right: 1em;
  width: 100%;
}

.results {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  overflow: auto;
}

.table-results {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  flex-grow: 1;
}

.table-results thead tr {
  background-color: var(--panel-color);
  color: var(--foreground-color);
  text-align: left;
  font-size: 1.5em;
  font-style: oblique;
  text-transform: uppercase;
  transition: all 400ms ease;
  border-bottom: var(--border-width) solid var(--border-color);
}
.table-results thead tr:hover {
  background-color: var(--panel-color-hover);
}

.table-results thead tr:hover > td {
  color: white;
}

.table-results th,
.table-results td {
  min-width: auto;
  max-height: min-content;
  padding: 1rem 2rem;
  overflow: hidden;
  white-space: nowrap;
}

.table-results tbody {
  overflow: scroll;
}

.table-results tbody tr {
  font-size: 1.5em;
  font-style: oblique;
  transition: all 400ms ease;
  border-bottom: var(--border-width) solid var(--border-color);
}

.table-results tbody tr td {
  color: var(--foreground-color);
}

.table-results tbody tr:hover > td {
  color: white;
}

.table-results tbody tr:hover {
  background-color: var(--panel-color);
}

.results-selected {
  background-color: var(--panel-color-hover);
}

.column-icon {
  text-align: center;
}

.results-cell {
  text-align: center;
  transition: all 400ms ease;
}

.results-cell-good {
  text-shadow: 0 0 1em var(--good-color);
  color: 0 0 1em var(--good-color);
  font-weight: bold;
}

.results-cell-bad {
  text-shadow: 0 0 1em var(--bad-color);
  color: 0 0 1em var(--bad-color);
  font-weight: bold;
}

.results-cell:hover {
  text-shadow: 0 0 1em var(--border-color);
}

.column-ship-header {
  border-left: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  text-align: left;
}

.column-score-header {
  border-left: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  text-align: center;
}

.column-deviation {
  border-left: var(--border-width) solid var(--border-color);
  text-align: center;
}

.column-deviation-header {
  border-left: var(--border-width) solid var(--border-color);
  text-align: center;
}

.column-ship {
  border-left: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  text-align: left;
  color: white;
  font-weight: bold;
  text-shadow: 0 0 1em var(--border-color);
}

.column-score {
  border-left: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  font-style: normal;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 1em var(--border-color);
  color: white !important;
}

.column-index {
  text-align: left;
}

.ship-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}