@charset "utf-8";
#layerBg, .snows, #petal-layer{position: absolute; top: 0; left: 0; height: 100%; width: 100%; box-sizing: border-box;}
#layerBg{z-index: 1; display: block; width: 100%; height: 100%;}
#bgDay{
	background: rgba(157,210,230,1);
	background: -moz-linear-gradient(top, rgba(157,210,230,1) 0%, rgba(208,225,250,1) 100%);
	background: -webkit-linear-gradient(top, rgba(157,210,230,1) 0%, rgba(208,225,250,1) 100%);
	background: -o-linear-gradient(top, rgba(157,210,230,1) 0%, rgba(208,225,250,1) 100%);
	background: -ms-linear-gradient(top, rgba(157,210,230,1) 0%, rgba(208,225,250,1) 100%);
	background: linear-gradient(top, rgba(157,210,230,1) 0%, rgba(208,225,250,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9DD2E6', endColorstr='#D0E1FA', GradientType=0 );}
#bgNight{
	background: rgba(2, 18, 44,1);
	background: -moz-linear-gradient(top, rgba(2, 18, 44,1) 0%, rgba(171, 194, 235,1) 100%);
	background: -webkit-linear-gradient(top, rgba(2, 18, 44,1) 0%, rgba(171, 194, 235,1) 100%);
	background: -o-linear-gradient(top, rgba(2, 18, 44,1) 0%, rgba(171, 194, 235,1) 100%);
	background: -ms-linear-gradient(top, rgba(2, 18, 44,1) 0%, rgba(171, 194, 235,1) 100%);
	background: linear-gradient(top, rgba(2, 18, 44,1) 0%, rgba(171, 194, 235,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02122C', endColorstr='#ABC2EB', GradientType=0 );}
#def{height: 0; position: absolute; top: 0;}

path{fill-rule: evenodd;}
use{ width:100%; height:100%;}

/*-----------------------petal----------------------*/
#petal-layer {position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999;}
.petal, .dandelion, .leaf{position: absolute; background-size: contain; background-repeat: no-repeat; opacity: 0.9; will-change: transform, opacity; animation: flyPetal linear forwards;}
.petal{background-image: url("../images/petal.svg");}
.dandelion{background-image: url("../images/dandelion.svg");}
.leaf{background-image: url("../images/leaf.svg");}
@keyframes flyPetal {
  0% {transform: translate(0, 0) rotate(0deg); opacity: 0;}
  10% {opacity: 0.9;}
  100% {transform: translate(var(--x-move), var(--y-move)) rotate(var(--rotate)); opacity: 0;}
}

@media (prefers-reduced-motion: reduce) {
  .petal {animation: none;}
}

/*-----------------------snow----------------------*/
.snows{background: none; animation: snow 10s linear infinite; opacity: 0.7;}
#snow1{z-index: 11; background-image: url(../obrazki/tlo/snieg1.svg); animation: snow1 10s linear infinite;}
#snow2{z-index: 9; background-image: url(../obrazki/tlo/snieg2.svg); animation: snow2 10s linear infinite;}
#snow3{z-index: 2; background-image: url(../obrazki/tlo/snieg3.svg); animation: snow3 10s linear infinite;}
@keyframes snow1 {
  0% {background-position: 0px 0px;}
  50% {background-position: 500px 500px;}
  100% {background-position: 500px 1000px;}
}
@keyframes snow2 {
  0% {background-position: 0px 0px;}
  50% {background-position: 100px 200px;}
  100% {background-position: 200px 400px;}
}
@keyframes snow3 {
  0% {background-position: 0px 0px;}
  50% {background-position: -100px 150px;}
  100% {background-position: -100px 300px;}
}
/*-----------------------mountain--------------------*/
.mountain{position: absolute; left: 0; bottom: 0; height: auto; opacity: 0; transform: translate3d(0, 60px, 0) scale(1.03); will-change: transform, opacity;}
#mountain0, #mountain1, #mountain2, #mountain3{width: 100dvw;}
#mountain4, #mountain5{width: 45vw;}
#mountain0{z-index: 3;}
#mountain1{z-index: 4;}
#mountain2{z-index: 5;}
#mountain3{z-index: 6;}
#mountain4{z-index: 7;}
#mountain5{z-index: 8;}
#mountain6{z-index: 10;}
#mountain4, #mountain6{left: auto; right: 0;}
.mountain.enter {animation: mountainIn 1.4s cubic-bezier(.22, .8, .2, 1) forwards;}
@keyframes mountainIn {
  from {opacity: 0; transform: translate3d(0, 60px, 0) scale(1.03);}
  to {opacity: 1; transform: translate3d(0, 0, 0) scale(1);}
}
/*-----------------------screens----------------------*/
@media only screen and (orientation : landscape){
	
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9){
	#mountain6{width: 25vw;}
	.petal, .dandelion, .leaf {width: 1vw; height: 1vw;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9){
	#mountain6{width: 32.5vw;}
	.petal, .dandelion, .leaf {width: 1.5vw; height: 1.5vw;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
	#mountain6{width: 43.4vw;}
	.petal, .dandelion, .leaf {width: 2vw; height: 2vw;}
}
@media only screen and (orientation : portrait){
	#mountain6{width: 50vw;}
}
@media only screen and (orientation : portrait) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1){
	.petal, .dandelion, .leaf {width: 1vh; height: 1vh;}
}
@media only screen and (orientation : portrait) and (max-aspect-ratio: 3/4){
	.petal, .dandelion, .leaf {width: 1.5vh; height: 1.5vh;}
}