styles.css

/* Thank you Josh W. Comeau for this CSS reset default */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
  font-family: "Helvetica", "Helvetica Neue", "Arial";
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

html {
  color: #fff;
  background-color: #151517;
}

:root {
  --faded-white: #ffffffbd;
  --astra-pink: #ffb8ba;
  --stellar-purple: #4a4857;
}

.spacecraft-id {
  border: 3px solid var(--faded-white);
  border-radius: 24px;

  -webkit-box-shadow: 0px 0px 2px 1px var(--faded-white);
  box-shadow: 0px 0px 2px 1px var(--faded-white);

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 24px;
  width: 650px;
}

.spacecraft-id h3 {
  color: var(--faded-white);
  text-shadow: 0 0 4px #fff;
  font-size: 24px;
}

.circle {
  height: 12px;
  width: 12px;
  border-radius: 12px;
  background-color: var(--astra-pink);

  -webkit-box-shadow: 0px 0px 2px 1px var(--astra-pink);
  box-shadow: 0px 0px 2px 1px var(--astra-pink);
}

.bar-graph-container {
  padding: 4px;
}

.bar-graph-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--faded-white);
  text-shadow: 0 0 4px #fff;

  padding: 0 0 2px 2px;
}

.bar-graph {
  border: 3px solid var(--faded-white);
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 2px 1px var(--faded-white);
  box-shadow: 0px 0px 2px 1px var(--faded-white);
  height: 75px;
  width: 225px;

  display: flex;
  flex-direction: column-reverse;
}

.bar {
  width: 100%;
  height: 56%;
  border-top: 3px solid var(--faded-white);
  background-color: var(--stellar-purple);

  -webkit-box-shadow: 0px -1px 2px 1px var(--faded-white);
  box-shadow: 0px -1px 2px 1px var(--faded-white);

  animation: bar-expanding 5s infinite alternate ease-in-out;
}

.radiation-graph {
  border: 3px solid var(--faded-white);
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 2px 1px var(--faded-white);
  box-shadow: 0px 0px 2px 1px var(--faded-white);
  height: 100px;
  width: 300px;

  display: flex;
}

.scanner {
  height: 94px;
  width: 25px;
  position: absolute;

  border-right: 3px solid var(--faded-white);
  -webkit-box-shadow: 0px 0px 2px 1px var(--faded-white);
  box-shadow: 0px 0px 2px 1px var(--faded-white);

  animation: scanner-scanning 3s infinite alternate ease-in-out;
}

.thruster-graph-container {
  padding: 4px;
}

.thruster-graph {
  border: 3px solid var(--faded-white);
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 2px 1px var(--faded-white);
  box-shadow: 0px 0px 2px 1px var(--faded-white);

  height: 125px;
  width: 830px;

  display: flex;
}

.threshold {
  height: 100%;
  width: 50px;
  border-right: 3px solid var(--faded-white);
  -webkit-box-shadow: 0px 0px 2px 1px var(--faded-white);
  box-shadow: 0px 0px 2px 1px var(--faded-white);
  z-index: 6;

  display: flex;
  flex-direction: column-reverse;
}

.threshold span {
  color: var(--faded-white);
  text-shadow: 0 0 4px #fff;
  padding-left: 4px;
  font-size: 12px;
}

.threshold:last-child {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.thruster {
  position: absolute;
  margin-top: 16px;
  height: 85px;
  max-width: 824px;

  background-color: var(--astra-pink);
  -webkit-box-shadow: 0px 0px 2px 1px var(--astra-pink);
  box-shadow: 0px 0px 2px 1px var(--astra-pink);

  z-index: 5;
  animation: thruster-expanding 7.5s infinite alternate ease-in-out;
  animation-fill-mode: forwards;
}

/* Chrome for the win ?? */
@property --num {
  syntax: "<integer>";
  initial-value: 10;
  inherits: false;
}

#system-reserves-percent {
  animation: counter 5s infinite alternate ease-in-out;
  counter-reset: num var(--num);
}

#system-reserves-percent::after {
  content: counter(num) "%";
}

@keyframes counter {
  0% {
    --num: 12;
  }
  20% {
    --num: 39;
  }
  40% {
    --num: 54;
  }
  80% {
    --num: 37;
  }
  100% {
    --num: 92;
  }
}

@keyframes bar-expanding {
  0% {
    height: 12%;
  }
  20% {
    height: 39%;
  }
  40% {
    height: 54%;
  }
  80% {
    height: 37%;
  }
  100% {
    height: 92%;
  }
}

@keyframes scanner-scanning {
  from {
    width: 0px;
  }
  to {
    width: 295px;
  }
}

@keyframes thruster-expanding {
  0% {
    width: 700px;
  }
  20% {
    width: 620px;
  }
  40% {
    width: 670px;
  }
  80% {
    width: 720px;
  }
  100% {
    width: 700px;
  }
}