body{width:100%;height:100%;margin:0;background-color:#000;overflow:hidden;font-family:verdana,Arial,sans-serif}
.logo img{position:absolute;z-index:2;top:2%;left:2%;width:8%;height:auto;opacity:0.5;transition:.3s}
.logo img:hover{opacity:1}
.loading{color:#fff;position:absolute;top:calc(50% - 10px);left:calc(50% - 50px)}
.canvas-container{display:flex;align-items:center;justify-content:center;font-family:sans-serif}
canvas{max-height:100vh;max-width:100vw}
.canvas-container canvas{display:inline-block!important}
.dg{display:none}
canvas{display:none!important}

#vlad{width:100%;height:100%;position:absolute;z-index:0;top:0;left:0}

#layers{width:100%;height:100%;position:absolute;overflow:hidden}
.layer{width:100%;height:100%;position:absolute;opacity:0;-webkit-animation-name:zoom;animation-name:zoom;-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.layer.layer-2{-webkit-animation-delay:1s;animation-delay:1s}
.layer.layer-3{-webkit-animation-delay:2s;animation-delay:2s}
.layer.layer-4{-webkit-animation-delay:3s;animation-delay:3s}
.layer.layer-5{-webkit-animation-delay:4s;animation-delay:4s}
.star{width:11px;height:11px;display:inline-block;position:absolute;fill:#fff}
.star:nth-child(3n+3){fill:#FEC777}
.star:nth-child(5n+5){fill:#498FB3}
@-webkit-keyframes zoom {
0%{transform:scale(0.1);opacity:0}
90%{opacity:1}
100%{transform:scale(2);opacity:0}
}
@keyframes zoom {
0%{transform:scale(0.1);opacity:0}
90%{opacity:1}
100%{transform:scale(2);opacity:0}
}


#mysky{position:absolute;width:100%;height:100%;opacity:0.1}


.aud{position:fixed;z-index:2;right:2%;bottom:2%;color:white;cursor:pointer;opacity:0.5}
.aud:hover{color:#fff;opacity:1}
.volume{--line:#fff;--line-width:6px;--duration:.5s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.volume input{display:none}
.volume input + svg{display:block;fill:none;stroke:var(--line);stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--line-width);width:50px;height:50px}
.volume input + svg path{-webkit-animation:var(--name) var(--duration) ease forwards;animation:var(--name) var(--duration) ease forwards}
.volume input + svg path:nth-child(2){stroke-dashoffset:1px}
.volume input + svg path:nth-child(3){stroke-dashoffset:1px}
.volume input:checked + svg path:nth-child(1){--name:shape-r}
.volume input:checked + svg path:nth-child(2){--name:small-r}
.volume input:checked + svg path:nth-child(3){--name:large-r}
.volume input:not(:checked) + svg path:nth-child(1){--name:shape}
.volume input:not(:checked) + svg path:nth-child(2){--name:small}
.volume input:not(:checked) + svg path:nth-child(3){--name:large}
@-webkit-keyframes small {
0%,30%{stroke-dasharray:0 0 30px 64px}
40%{stroke-dashoffset:16px}
80%,100%{stroke-dashoffset:1px}
70%{stroke-dasharray:0 43px 30px 64px}
100%{stroke-dasharray:0 39px 30px 64px}
}
@keyframes small {
0%,30%{stroke-dasharray:0 0 30px 64px}
40%{stroke-dashoffset:16px}
80%,100%{stroke-dashoffset:1px}
70%{stroke-dasharray:0 43px 30px 64px}
100%{stroke-dasharray:0 39px 30px 64px}
}
@-webkit-keyframes small-r {
0%{stroke-dasharray:0 39px 30px 64px}
0%,40%{stroke-dashoffset:1px}
70%{stroke-dashoffset:16px}
70%,100%{stroke-dasharray:0 0 30px 64px}
}
@keyframes small-r {
0%{stroke-dasharray:0 39px 30px 64px}
0%,40%{stroke-dashoffset:1px}
70%{stroke-dashoffset:16px}
70%,100%{stroke-dasharray:0 0 30px 64px}
}
@-webkit-keyframes large {
0%,30%{stroke-dasharray:0 0 50px 84px}
40%{stroke-dashoffset:16px}
80%,100%{stroke-dashoffset:1px}
70%{stroke-dasharray:0 82px 32px 84px}
100%{stroke-dasharray:0 78px 32px 84px}
}
@keyframes large {
0%,30%{stroke-dasharray:0 0 50px 84px}
40%{stroke-dashoffset:16px}
80%,100%{stroke-dashoffset:1px}
70%{stroke-dasharray:0 82px 32px 84px}
100%{stroke-dasharray:0 78px 32px 84px}
}
@-webkit-keyframes large-r {
0%{stroke-dasharray:0 78px 32px 84px}
0%,40%{stroke-dashoffset:1px}
70%{stroke-dashoffset:16px}
70%,100%{stroke-dasharray:0 0 50px 84px}
}
@keyframes large-r {
0%{stroke-dasharray:0 78px 32px 84px}
0%,40%{stroke-dashoffset:1px}
70%{stroke-dashoffset:16px}
70%,100%{stroke-dasharray:0 0 50px 84px}
}
@-webkit-keyframes shape {
0%{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}
70%{stroke-dasharray:63px 51px 184px;stroke-dashoffset:21px}
100%{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}
}
@keyframes shape {
0%{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}
70%{stroke-dasharray:63px 51px 184px;stroke-dashoffset:21px}
100%{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}
}
@-webkit-keyframes shape-r {
0%{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}
100%{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}
}
@keyframes shape-r {
0%{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}
100%{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}
}



.socialblock{position:fixed;z-index:2;bottom:2%;left:2%}
.social{padding:30px 0;display:inline}
.social a{border:2px solid #fff;text-align:center;line-height:26px;border-radius:50%;color:#fff;display:inline-block;height:26px;margin-left:10px;margin-right:10px;padding:10px;width:26px;background:#;opacity:0.5;transition:.3s}
.social a:hover{background:url(/img/space.jpg);transition:background .2s;-webkit-animation:bgscroll 200s infinite linear;-ms-animation:bgscroll 200s infinite linear;-o-animation:bgscroll 200s infinite linear;border:2px solid #fff;color:#fff;box-shadow:0 4px 4px rgba(0,0,0,.24),0 0 4px rgba(0,0,0,.12);opacity:1}
@-webkit-keyframes bgscroll {
0%{background-position:0 0}
25%,75%{background-position:-2506px 2000px}
50%{background-position:2000px -2000px}
100%{background-position:1000px 0}
}
.icon{font-size:40px;color:#fff}



.topright{position:fixed;z-index:2;top:2%;right:2%;color:#fff;display:flex;flex-direction:row}
.ionicon{color:white;fill:white}
#sunny{color:white;stroke:white;stroke-width:30;fill:white;stroke-linecap:round;cursor:pointer;opacity:0.5}
#sunny:hover{opacity:1}
#sunny-outline{color:white;stroke:white;stroke-width:30;fill:none;stroke-linecap:round;cursor:pointer;opacity:0.5}
#sunny-outline:hover{opacity:1}


#fullscreen{color:white;width:50px;margin:10px}
#expand{color:white!important;color:white;stroke:white;stroke-width:30;fill:none;stroke-linecap:round;cursor:pointer;opacity:0.5}
#expand:hover{opacity:1}


.switch-btn{color:white;width:50px;margin:10px}
.gray {filter: grayscale(90%)}

.sunny-fill{opacity:0;transition:0.3s}
.switch-on .sunny-fill{display:block;opacity:1}