:root {
  --doba: 10; /* rychlost stoupajících čar */
}

html, body {
  width: 100vw;
  height: 100vh;
}

body {
  position: relative;
  animation: background-gradient 30s;
  animation-iteration-count: infinite;
  backface-visibility: hidden;
  animation-timing-function: ease-in-out;
  background-image: radial-gradient(circle at top, transparent 0%, #fff 50%, rgba(255, 255, 255, 0.5) 80%, transparent 100%);
}

@keyframes background-gradient {
  0% {background-color: #6cb9de;} /* modrá */
  20% {background-color: #bd96c2;} /* fialová */
  35% {background-color: #ee92ab;} /* lososová */
  50% {background-color: #f29d6f;} /* oranžová */
  65% {background-color: #faec8b;} /* žlutá */
  80% {background-color: #d5e056;} /* zelená */
  95% {background-color: #8bcfc0;} /* modro-zelená */
  100% {background-color: #6cb9de;} /* modro-zelená */
}

.light {
    position: absolute;
    z-index: -10;
    width: 1px;
    background-color: #fff;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.x1 {
  -webkit-animation: floatUp calc(var(--doba) * 2.5s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 2.5s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 2.5s) infinite linear;
  animation: floatUp calc(var(--doba) * 2.5s) infinite linear;
  left: -20%;
}

.x2 {
  -webkit-animation: floatUp calc(var(--doba) * 1.9s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.9s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.9s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.9s) infinite linear;
  left: -17%;
}

.x3 {
  -webkit-animation: floatUp calc(var(--doba) * 1.2s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.2s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.2s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.2s) infinite linear;
  left: -75%;
}

.x4 {
  -webkit-animation: floatUp calc(var(--doba) * 0.75s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 0.75s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 0.75s) infinite linear;
  animation: floatUp calc(var(--doba) * 0.75s) infinite linear;
  left: -30%;
}

.x5 {
  -webkit-animation: floatUp calc(var(--doba) * 1.1s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.1s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.1s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.1s) infinite linear;
  left: -60%;
}

.x6 {
  -webkit-animation: floatUp calc(var(--doba) * 2s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 2s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 2s) infinite linear;
  animation: floatUp calc(var(--doba) * 2s) infinite linear;
  left: -90%;
}

.x7 {
  -webkit-animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  left: -40%;
}

.x8 {
  -webkit-animation: floatUp calc(var(--doba) * 1.7s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.7s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.7s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.7s) infinite linear;
  left: -80%;
}

.x9 {
  -webkit-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  left: -82%;
}

.x10 {
  -webkit-animation: floatUp calc(var(--doba) * 1s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1s) infinite linear;
  animation: floatUp calc(var(--doba) * 1s) infinite linear;
  left: -5%;
}

.x11 {
  -webkit-animation: floatUp calc(var(--doba) * 0.85s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 0.85s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 0.85s) infinite linear;
  animation: floatUp calc(var(--doba) * 0.85s) infinite linear;
  left: 95%;
}

.x12 {
  -webkit-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  left: 93%;
}

/* .x13, .x14, .x15, .x16, .x17 jsou pouze v design-0 */

.x13 {
  -webkit-animation: floatUp calc(var(--doba) * 0.90s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 0.90s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 0.90s) infinite linear;
  animation: floatUp calc(var(--doba) * 0.90s) infinite linear;
  left: 70%;
}

.x14 {
  -webkit-animation: floatUp calc(var(--doba) * 2s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 2s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 2s) infinite linear;
  animation: floatUp calc(var(--doba) * 2s) infinite linear;
  left: 57%;
}

.x15 {
  -webkit-animation: floatUp calc(var(--doba) * 1.8s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.8s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.8s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.8s) infinite linear;
  left: 18%;
}

.x16 {
  -webkit-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.5s) infinite linear;
  left: 38%;
}

.x17 {
  -webkit-animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  -moz-animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  -o-animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  animation: floatUp calc(var(--doba) * 1.3s) infinite linear;
  left: 51%;
}

@-webkit-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-o-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}

@-webkit-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-moz-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-o-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-webkit-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-moz-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-o-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-webkit-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@-moz-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@-o-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}