h1{
    color: rgb(8, 203, 112);
}

.more1,.gor2,.neb3,.neb5{
  height: 321px;
  width: 330px;
  display: flex;
  align-items: end;
  border-radius: 8px;  
  animation: playbg 1s ease-in-out forwards;
  justify-self: center;
  overflow: hidden;
  background-size: cover;
 

}
.dvor3,.mor4,.nebz6{
    width: 600px;
    height: 330px;
    border-radius: 8px;
    display: flex;
    justify-self: center;    
    background-size: cover;
    overflow: hidden;  
    background-color: rgb(4, 43, 30);
    background-size: cover;
    
  }
.more1{
    background-image: url(../images/drakon/fond1.webp);
}
.gor2{
    background-image: url(../images/drakon/krafon.webp);
}

#luf{
    
    animation: transv 8s ease-in-out forwards;
}
#dv3{
    height: 90%;
    margin-top: -15%;
    margin-left: 15%;
}
#neb3{
     background-image: url(../images/drakon/fonlun1.webp);
    animation: playbg 2s ease-in forwards;
}

#vn3{
    height: 100%;
    margin-bottom: -45%;
    margin-left: 25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}
#og3{
    height: 50%;
    margin-bottom: 35%;
    margin-left: -60%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s,trnsm 5s ease-in-out forwards 5 4s;
}
#og31{
    height: 50%;
    margin-bottom: 35%;
    margin-left: 25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s, trnsm2 5s ease-in-out forwards 5 4s;;
}
@keyframes trnsm{
    0%{transform: translate(0,0);}
    55%{transform: translate(10%,12%); scale: (1.3); filter: brightness(1.8);}
    100%{transform: translate(-10%,-12%); scale: (1);}
}
@keyframes trnsm2{
    0%{transform: translate(0,0);}
    55%{transform: translate(-10%,12%); scale: (1.3); filter: brightness(1.8);}
    100%{transform: translate(10%,-12%); scale: (1);}
}
@keyframes transv{
    from{
         background-image: url(../images/drakon/krafon.webp);
    }
    to{
         background-image: url(../images/drakon/fonlun.webp);
    }
}
@keyframes transv2{
    0%{
         background-image: url(../images/drakon/molny1.webp);
    }
    45%{
         background-image: url(../images/drakon/molny.webp);
         filter: brightness(1.5);
    }
    100%{
         background-image: url(../images/drakon/molny1.webp);
    }
}
#mor4{
    background-image: url(../images/drakon/moref.webp);
    
}

#dr4{
    opacity: 0;
    height:200%;
    margin-top: 15%;
     margin-left: -25%;
    animation: apir 2s ease-in-out forwards 6s,dragonfl 2s ease-in forwards 7s;
    position: relative;
    z-index: 3;
}
#dr41{
    opacity: 0;
    height: 220%;
    margin-top: 15%;
    animation: apir 2s ease-in-out forwards 6s,dragonfl2 2s ease-in forwards 8s;
     position: relative;
    z-index: 2;
   
}
@keyframes dragonfl {
    from{transform: translate();}
   to{transform: translate(450%,-450%);}
    
}
@keyframes dragonfl2 {
    from{transform: translate();}
   to{transform: translate(-450%,-450%);}
    
}
#drg4{
    opacity: 0;
   
    position: relative;
    z-index: 4;
    height: 200%;
    margin-bottom: -55%;
    margin-left: -20%;
    animation: apir 2s ease-in-out forwards 2s;
}
#kold5{
    animation: transv2 8s ease-in-out forwards;
}
#kol5{
    height: 100%;
    opacity: 0;
    margin-bottom: -20%;
    margin-left: -5%;
    position: relative;
    z-index: 1;
    animation: apir 2s ease-in-out forwards,skk 8s ease-in-out 2s;
}
#rv5{
    height: 25%;
    margin-left: -45%;
    margin-bottom: -10%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 3s ease-in 2s, rost2 2s ease-in-out forwards 5s;
}
.neb5{
    background-image: url(../images/drakon/molny.webp);
    animation: playbg 2s ease-in-out forwards;
}
#mre1{
    background-image: url(../images/drakon/ispr.webp);
    background-position: right;
    animation: letunaz 5s ease-in-out forwards;
}
#tor1{
    opacity: 0;
    height: 25%;
    margin-bottom: 15%;
    margin-left: 10%;
    animation: apir 2s ease-in-out forwards 5s, dflip 8s ease-in-out 7s,disapr 2s ease-in-out forwards 15s;
}
#nb6{
    background-image:url(../images/drakon/nebdv.webp);
}
@keyframes apv{
    0%{opacity: 0; transform: scale(0.6) translateY(5%); }
   33%{opacity: 0.8; transform: scale(0.8)  translateY(-5%);}
   66%{opacity: 0.9; transform: scale(0.9)  translateY(5%);}
   100%{opacity: 1; transform: scale(1.2)  translateY(-5%);}
}
#nv61,#nv62,#nv63{
    height: 80%;
    opacity: 0;
    margin-top: 20%;
    animation:apv 8s ease-in-out forwards;
   
}
#nv61{
margin-left: -10%;
}
#nv62,#nv63{
    margin-left: -25%;
}
#zad1{
    opacity: 0;
    height: 85%;
    margin-left: -35%;
    margin-bottom: -10%;
    animation: apir 2s ease-in-out forwards 15s;
}
#ld5{
    height: 55%;
    opacity: 0;
    margin-bottom: -13%;
    margin-left: 55%;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out 3s;
}


#pd5{
    height: 55%;
    opacity: 0;
    margin-bottom: -13%;
    animation: apir 2s ease-in-out forwards,vetmuv 5s ease-in-out forwards 2s;
}
#kr2,#kr21{
   height: 150%;
   margin-bottom: -45%;
   margin-left: 25%;   
}
#kr2{
    animation:apir 2s ease-in-out forwards, skk 10s ease-in-out forwards 2 2s;
}
#kr21{
    animation:apir 2s ease-in-out forwards, skk 8s ease-in-out forwards 1 2s,disapr 2s ease-in forwards 6s;
}


#kd6{
    margin-top: 15%;
    height: 100%;
    opacity: 0;
    margin-left: 25%;
    animation: apir 2s ease-in-out forwards, disapr 2s ease-in-out forwards 2s;
}
@keyframes lastch{
    from{ background-image:url(../images/drakon/fonsk.webp);}
    to{ background-image:url(../images/drakon/fonmore.webp);}
}
#ls6{
    height: 180%;
    margin-top: 15%;
    margin-left: -35%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s,disapr 2s ease-in-out forwards 4s;
}
#vn{
    height: 100%;
    margin-left: 65%;
}
#fin6{
   
    animation: eflt 8s ease-in-out forwards,lastch 21s ease-in-out forwards;
    
}
@keyframes eflt{
    0%{filter: brightness(1);}
    30%{filter:brightness(0.4);}
    34%{filter: brightness(2)}
    37%{filter: brightness(1)}
    50%{filter:brightness(0.4);}
    54%{filter: brightness(2)}
    57%{filter: brightness(0.4)}
    100%{filter: brightness(1);}
}
#vn:hover, #vn:focus{
    transform: translate(-50%,15%) scale(1.1);
}

#dv2{
    opacity: 0;
    height: 125%;
    margin-bottom: -25%;
    margin-left: -80%;
    animation: apir 2s ease-in-out forwards 8s, skk 8s ease-in-out 9s;
}
@media screen and (width>=1200px) {
.more1,.gor2,.neb3,.neb5{
    height: 600px;
    width: 620px;
}

.dvor3,.mor4,.nebz6{
   height: 600px;
   width: 1080px; 
}
}

@media screen and (width<330px) {
.more1,.gor2,.dvor3,.neb3,.neb5,.nebz6{
    height: 254px;
    width: 260px;
}

}