/* Color Palette */
/*
cyan:        #00c0c0ff
ultra cyan:  #00ffffff
green:       #00cb00ff
ultra green: #00ff00ff
*/

:root {
  --color-cyan: #00c0c0ff;
  --color-ultra-cyan: #00ffffff;
  --color-green: #00cb00ff;
  --color-ultra-green: #00ff00ff;
  --color-neutral-text: #cccdcd;
  --color-bold-text: #fefefe;
  --header-height: 320px;
  --footer-height: 30px;
  --fade-in-duration: 4.8s;
  --background-size: 30px;
}

@keyframes anim_logo_main_blank {
  0% {
    fill: var(--color-ultra-cyan);
    opacity: 1;
  }
  72% {
    fill: var(--color-cyan);
    opacity: 0.6;
  }
  73% {
    fill: var(--color-ultra-cyan);
    opacity: 0.3;
  }
  79% {
    fill: var(--color-cyan);
    opacity: 1;
  }
  80% {
    fill: var(--color-ultra-cyan);
    opacity: 0;
  }
  100% {
    fill: var(--color-ultra-cyan);
    opacity: 1;
  }
}

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

html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  color: #fff;
}

body {
  background-color: #000;
  z-index: -2;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#logo_main, #logo_main > svg {
  width: var(--header-height);
  height: var(--header-height);
  position: fixed;
}

#logo_main_blank {
  opacity: 1;
  fill: var(--color-cyan);
  animation-name: anim_logo_main_blank;
  animation-duration: var(--fade-in-duration);
  animation-timing-function: linear;
}