@font-face {
  font-family: 'beyond';
  src: url('./Beyond.woff2') format('woff2');
}

:root {
  --bc-corp: #444;
  --bc-brand: rgb(255, 34, 214);
  --bc-primary-light: #fff211;
  --bc-primary-light-rgb: 255, 242, 17;
  --bc-border-color: rgba(255, 242, 17, 0.72);
  --bc-text-color: var(--bc-corp);
  --bc-action: #c74200;
  --bc-background: var(--bc-primary-light);
  --bc-background-end: rgb(255, 200, 215);

  --bc-logo-width: 2253;
  --bc-logo-height: 360;
  --bc-logo-ascender: 90;
  --bc-logo-descender: 90;
  --bc-logo-letter-space: 40;
  --bc-logo-letter-thickness: 30;
  --bc-logo-animation-speed: 0.5s;
  --bc-font-beyond: 'beyond', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bc-corp: #777;
    --bc-background: #111;
    --bc-border-color: #222;
    --bc-action: #e04b00;
    --bc-text-color: var(--bc-corp);
    --bc-background-end: rgb(0, 50, 72);
  }
}

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

html {
  background-color: var(--bc-background);
  font-family: var(--bc-font-beyond);
  height: 100%;
}

body {
  background: linear-gradient(
    to bottom,
    var(--bc-background),
    var(--bc-background-end)
  );
  background-attachment: fixed;
  color: var(--bc-text-color);
  display: flex;
  flex-direction: column;
  font-size: clamp(24px, 7vmin, 72px);
  min-height: 100%;
  padding: 0.5em;
}

svg {
  height: auto;
  width: 100%;

  .beyond {
    fill: var(--bc-corp);
  }
  .code {
    fill: var(--bc-brand);
  }
}

main {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding-bottom: 2em;
  text-align: center;
}

b {
  color: var(--bc-brand);
  font-weight: normal;
}