*{
    margin: 0;
    padding: 0;
}

body{ /*https://www.youtube.com/watch?v=k2XTkIW9Y0I&list=PLDyJYA6aTY1meZ3d08sRILB46OJ-wojF2&index=5*/
    /*width: 100vw;
    height: 100vh;*/
    background: url('img/gribes.jpg')no-repeat;
    background-size: cover;
	}
		
#data_time{
    color: #f0f000;
    font-size: 2.5vh;
    position: absolute;
    right: 2vw;
    top: 2.5vh;
}

#id_clock{
    position: relative;
    left: 0.5vw;
    color: #f0f000;
}

#header{ /*https://www.youtube.com/watch?v=cVeFNl3Jz8I&list=PLDyJYA6aTY1meZ3d08sRILB46OJ-wojF2&index=8*/
    float: left;
    width: 100vw;
    height: 10vh;
    /*background: linear-gradient(to top, #ffC5CD 0%, #5BCAFF 100%);*/
}	

#main0{
    float: left;
    width: 20vw;
}
#main1{
    float: left;
    width: 20vw;
}
#main2{
    float: left;
    width: 40vw;
}
#settings{
    float: right;
    width: 7vw;
}

.icon{
		display:block;      /*эти две строчки нужгны, чтобы*/
        width: 1px;         /*указатель мышки высвечивал только эконку*/
        margin-left: 20px;
        margin-top: 4.5vh;
	margin-bottom: 120px;
		}

img{ width: 5vw; }

.but_img{
        width: 3vw;
        float: left;
        display:block;
        position: relative;
        left: 50vw;
        top: 2.5vh;
}
.but_w1{
        float: right;
        display:block;
        position: absolute;
        right: 14vw;
        /*margin-left: 1vw;*/
        top: 2vh;
		}
.but_w2{
        float: right;
        display:block;
        position: absolute;
        right: 20vw;
        /*margin-left: 1vw;*/
        top: 2vh;
		}
/*************************Batterfly*******************************************************/

#container {
  perspective: 600px;
  perspective-origin: 50% 0%; 
  margin-top: 13vh;
  margin-left: 5vw;
}
#butterfly {
  width: 20vw;
  height: 33vh;
  transform-origin: 100% 30%;
  transform-style: preserve-3d;
  animation: butterfly 15s linear infinite;
}
#leftwing {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(img/butterfly.png);
  transform-origin: inherit;
  animation: leftwing 0.35s linear infinite;
}
#rightwing {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(img/butterfly.png);
  transform-origin: inherit;
  animation: rightwing 0.35s linear infinite;
}

@keyframes butterfly {
  from {transform: rotate3d( 0,   1, 0,    0deg) scale3d(0.2, 0.2, 0.2) translate3d(-25vw, 20vh, 0);}
  25%  {transform: rotate3d( 0.2, 1, 0,  -90deg) scale3d(0.2, 0.2, 0.2) translate3d(-25vw, 20vh, 0);}
  50%  {transform: rotate3d( 0,   1, 0, -180deg) scale3d(0.2, 0.2, 0.2) translate3d(-25vw, 20vh, 0);}
  75%  {transform: rotate3d(-0.2, 1, 0, -270deg) scale3d(0.2, 0.2, 0.2) translate3d(-25vw, 20vh, 0);}
  to   {transform: rotate3d( 0,   1, 0, -360deg) scale3d(0.2, 0.2, 0.2) translate3d(-25vw, 20vh, 0);}
}

@keyframes rightwing {
  from {transform: rotateX(80deg) rotate3d(0, 1, 0, 180deg);}
  50%  {transform: rotateX(80deg) rotate3d(0, 1, 0, 100deg);}
  to   {transform: rotateX(80deg) rotate3d(0, 1, 0, 180deg);}
}

@keyframes leftwing {
  from {transform: rotateX(80deg) rotate3d(0, 1, 0, 0deg);}
  50%  {transform: rotateX(80deg) rotate3d(0, 1, 0, 80deg);}
  to   {transform: rotateX(80deg) rotate3d(0, 1, 0, 0deg);}
}
/*************************************************************************/
#container1 {
  perspective: 900px;
  perspective-origin: 50% 0%; 
  margin-top: 0vh;
  margin-left: 1vw;
}
#butterfly1 {
  width: 20vw;
  height: 33vh;
  transform-origin: 100% 30%;
  transform-style: preserve-3d;
  animation: butterfly1 30s linear infinite;
}
#leftwing1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(img/butterfly.png);
  transform-origin: inherit;
  animation: leftwing1 0.5s linear infinite;
}
#rightwing1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(img/butterfly.png);
  transform-origin: inherit;
  animation: rightwing1 0.5s linear infinite;
}

@keyframes butterfly1 {
  from {transform: rotate3d( 0,   1, 0,     0deg) scale3d(0.4, 0.4, 0.4) translate3d(-35vw, 10vh, 0);}
  /*25%  {transform: rotate3d( 0,   1, 0,   -90deg) scale3d(0.4, 0.4, 0.4) translate3d(-35vw, 10vh, 0);}
  50%  {transform: rotate3d( 0,   1, 0,  -180deg) scale3d(0.4, 0.4, 0.4) translate3d(-35vw, 10vh, 0);}
  75%  {transform: rotate3d( 0,   1, 0,  -270deg) scale3d(0.4, 0.4, 0.4) translate3d(-35vw, 10vh, 0);}*/
  to   {transform: rotate3d( 0,   1, 0,  -360deg) scale3d(0.4, 0.4, 0.4) translate3d(-35vw, 10vh, 0);}
}
@keyframes rightwing1 {
  from {transform: rotateX(80deg) rotate3d(0, 1, 0, 180deg);}
  50%  {transform: rotateX(80deg) rotate3d(0, 1, 0, 100deg);}
  to   {transform: rotateX(80deg) rotate3d(0, 1, 0, 180deg);}
}

@keyframes leftwing1 {
  from {transform: rotateX(80deg) rotate3d(0, 1, 0, 0deg);}
  50%  {transform: rotateX(80deg) rotate3d(0, 1, 0, 80deg);}
  to   {transform: rotateX(80deg) rotate3d(0, 1, 0, 0deg);}
}