/*Yekateryna kOLESNYK iNFO f-13 06.01.26 - 08.01.26*/
/*06.01.2026*/
img#header{
    width: 10%;
    height: 10%;
    transform: translateX(0px);
}
header{
    
    display: flex;
    border-bottom: 1px solid rgb(0, 255, 55);

    
    
}
#onpage{
    color: rgb(255, 0, 0);
}
a{
    color: rgb(0, 255, 98);
    
}
nav :hover{
    color: rgb(56, 177, 20);
}
nav{
   
    display: flex;  
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    
}

h1{
    color: rgb(159, 255, 81);
    
}
main{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
img{
    width: 15dvw;
    height: auto;
    
    
}
*{
    color : rgb(97, 172, 107);
    margin: 10px;
    background-color: rgb(0, 0, 0);

    /*07.01.26*/
}
div{
display: flex;
align-items: center;

}
ul{
   
    opacity: 0;
    transform: translateX( -500px);
    width: 150px;
    
}
/*08.01.26 - finished mobile version and correct pc version*/
/* ----------------------------------------------
* Generated by Gradienty on 2026-01-06 13:45
* animation slide-right-normal
* ----------------------------------------
*/
@keyframes slide-right-normal {0% { transform: translateX(0px); } 100% { transform: translateX(110px);} }

.sliding-image { 
    animation: slide-right-normal 1s ease 0s normal both; 
}

    /* ----------------------------------------------
* Generated by Gradienty on 2026-01-07 07:45
* animation fade-in-normal
* ----------------------------------------
*/
  

@keyframes fade-in-normal {0% { opacity: 0; } 100% { opacity: 1;} }


  .appear {  
    transform: translateX(-250px);
    animation: fade-in-normal 1s ease 1s 1 normal both;
    
  }
  @media screen and (max-width: 1000px ) and (min-width: 601px){
    
        .appear {  
            transform: translateX(-300px);
            animation: fade-in-normal 1s ease 1s 1 normal both;
            
          }

    img{
        width: 30dvw;
        height: auto;
    }
        
    }
    @media screen and (max-width: 600px ){
        
        
        img{
            width: 60dvw;
            height: auto;
        }
        .appear {  
            transform: translateX(-370px);
            animation: fade-in-normal 1s ease 1s 1 normal both;
            
          }
    }
    @media screen and (min-width: 1400px ){
        
        .appear {  
            transform: translateX(-300px);
            animation: fade-in-normal 1s ease 1s 1 normal both;
            
          }
        
        
    }