.the{position: relative;}




body.moving_color{
    animation-name: change_main_color_body;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
@keyframes change_main_color_body {
    0%{background-color: rgb(48, 48, 48);}
    50%{background-color: rgb(0, 0, 0);}
    100%{background-color: rgb(48, 48, 48);}
}


.moving_color{
    animation-name: change_main_color;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    transition: all 15s;

}
@keyframes change_main_color {
    0%{background-color: rgb(255, 192, 192);}
    50%{background-color: rgb(255, 233, 192);}
    100%{background-color: rgb(255, 192, 192);}

    0%{box-shadow: 0px 0px 21px rgb(211, 246, 255);}
    50%{box-shadow: 0px 0px 21px rgb(255, 255, 255);}
    100%{box-shadow: 0px 0px 21px rgb(211, 246, 255);}

}
body.ChangePage{
    animation-name: change_main_color_body_CP;
    animation-duration: 1s;
    animation-iteration-count :inherit
}
@keyframes change_main_color_body_CP {
    0%{background-color: rgb(121,121,121);}
    100%{background-color: rgb(255, 255, 255);}
}

#the.hide ,#moving_color.hide{    
    animation-name: hiding;
    animation-fill-mode: forwards;
    animation-iteration-count: inherit;
    animation-duration: .5s;
    transition: all .5s;
}

@keyframes hiding {
    0%{opacity: 1; display: block;} 
    100%{opacity: 0; margin-top: 0; display: none ; }
}



.show {    
    margin-top: 10%;
    animation-name: showing;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    transition: all 1s;
}
@keyframes showing {
    0%{opacity: 0; display: block;}
    100%{opacity: 1; margin-top: 5%; }
}
.show2 {    
    animation-name: showing2;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    transition: all 1s;
    animation-iteration-count: inherit;

}
@keyframes showing2 {
    0%{opacity: 0; display: block;}
    100%{opacity: 1;  }
}