/* calliope_serial.css (Segmentanzeige) | by T. Meinike 08/26 */

@font-face
{
  font-family: "DSEG7 Classic";
  src: url("fonts/DSEG7Classic-Regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

@font-face
{
  font-family: "DSEG7 Classic";
  src: url("fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

:root
{
  --green: #00E676;
  --yellow: #FFEA00;
  --red: #FF1744;
  --back: #000000;
  --text: #A9AAA2;
  --line: #3A3B36;
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body
{
  height: 100%;
  background: var(--back);
}

body
{
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  padding: 1.25em 1.5em;
  max-width: calc(68.75em + 3em);
  margin: 0 auto;
}

header
{
  display: grid;
  justify-items: center;
  gap: 0.5em;
  padding-bottom: 0.875em;
}

header > h1 > span
{
  display: inline-grid;
  place-items: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 0.5em;
  font-weight: 700;
  vertical-align: middle;
  margin-right: 0.25em;
  position: relative;
  top: -0.1em;
}

h1
{
  text-align: center;
  font-size: clamp(1.25em, 3.2vw, 1.875em);
  font-weight: 600;
}

header > div
{
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 0.5em;
  font-size: 0.875em;
  margin-top: 0.75em;
}

header > div > button
{
  background: none;
  border: 2px solid var(--line);
  color: var(--text);
  padding: 0.3em 0.8em;
  border-radius: 0.3em;
  font-size: inherit;
  transition: border-color 0.3s, color 0.3s;
}

header > div > button:first-of-type:hover
{
  border-color: var(--green);
  color: var(--green);
}

header > div > button:last-of-type:hover
{
  border-color: var(--red);
  color: var(--red);
}

header > div > span:first-of-type
{
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  color: var(--text);
  background-color: currentcolor;
  transition: color 0.3s;
  margin-left: 0.75em;
  margin-right: 0.1em;
}

header > div > span:last-of-type
{
  margin-right: 0.75em;
  margin-top: -0.1em;
}

main
{
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  margin-top: 0.875em;
  border-top: 1px solid var(--line);
}

main > section:first-child
{
  width: 100%;
  display: grid;
  place-items: center;
  place-content: center;
  padding: 1.25em 0;
  border-bottom: 1px solid var(--line);
}

main > section:first-child > p:nth-child(2),
main > section:last-child > div > p > span:first-child
{
  font-family: "DSEG7 Classic", "Segoe UI", monospace;
  font-weight: bold;
  color: var(--green);
  line-height: 1;
}

main > section:first-child > p:nth-child(2)
{
  font-size: clamp(5.625em, 19vw, 11.875em);
  text-shadow: 0 0 0.125em rgba(118, 250, 107, 0.5);
  transition: text-shadow 0.3s;
}

main > section:first-child > p:nth-child(2) > span
{
  display: inline-block;
  min-width: 4ch;
  text-align: center;
}

main > section:first-child > h2
{
  font-size: clamp(0.875em, 2vw, 1.25em);
  font-weight: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75em;
  margin-left: 0.2em;
}

main > section:first-child > p:last-child
{
  margin-top: 1.5em;
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  font-size: clamp(0.875em, 1.8vw, 1.125em);
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: 100vh;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

main > section:first-child > p:last-child > span:first-child
{
  line-height: 1;
  font-size: 1.2em;
}

main > section:last-child
{
  display: grid;
  grid-template-columns: auto auto;
  place-items: center;
  gap: clamp(1.75em, 7vw, 6.875em);
  padding: 1.75em 0 2.375em 0;
}

main > section:last-child > div
{
  text-align: center;
}

main > section:last-child > div > h2
{
  font-size: 0.8125em;
  font-weight: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
  margin-left: -1.8em;
}

main > section:last-child > div > p
{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5em;
}

main > section:last-child > div > p > span:first-child
{
  font-size: clamp(1.875em, 4.5vw, 3em);
  text-shadow: 0 0 0.3em rgba(118, 250, 107, 0.4);
}

main > section:last-child > div > p > span:last-child
{
  font-size: clamp(1em, 2vw, 1.375em);
  color: var(--text);
}

footer
{
  display: grid;
  grid-template-columns: auto auto auto;
  place-items: center;
  gap: 1.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: 0.75em;
}

footer > span
{
  display: inline-block;
}

footer > span > a
{
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s;
  margin-left: 4em;
}

footer > span > a:hover
{
  color: var(--green);
}

.status-anim
{
  animation: pulsieren 1.2s ease-in-out infinite;
}

@keyframes pulsieren
{
  0%, 100%
  {
    color: var(--green);
  }
  50%
  {
    color: var(--back);
  }
}

@media (max-width: 35em)
{
  body
  {
    padding: 0.75em;
  }

  main > section:last-child
  {
    gap: 1.25em;
  }

  footer
  {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }

  footer > span > a
  {
    margin-left: 0;
  }
}