*{
    margin: 0px;
    padding: 0px;
    direction: rtl;
}
body{
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /*centers items on the line (the x-axis by default)*/
    align-items: center; /*centers items on the cross-axis (y by default)*/
    flex-direction: column;
    background-color: #f4f7f2;
    padding: 5px;
}
.background{
    position:absolute;
    left: 0px;
    top: 0px;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;

}
#img{
    width: 100%;
    height: auto;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
@-webkit-keyframes fadeOut {
    0% {opacit1y: 1;
    width: 100%;}
    100% {opacity: 0;
    width: 0px}
 }
 
 @keyframes fadeOut {
    0% {opacit1y: 1;
    width: 100%;}
    100% {opacity: 0;
    width: 0px}
 }
 
 .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
 }

 .main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
 }
.main h1{
    font-family: "Marhey",sans-serif;
    color: #b52819;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
 .form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
}

 @-webkit-keyframes fadeIn {
    0% {opacit1y: 0;
    width: 0%;
    height: 0px;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;
    width: 100%;
    height: 200px;}
 }
 
 @keyframes fadeIn {
    0% {opacit1y: 0;
    width: 0%;
    height: 0px;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;
    width: 100%;
    height: 100%;}
 }
 
 .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
 }

 @-webkit-keyframes fadeIn1 {
    0% {opacit1y: 0;
    width: 0%;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;
    width: 100%;}
 }
 
 @keyframes fadeIn1 {
    0% {opacit1y: 0;
    width: 0%;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;
    width: 80%;}
 }
 
 .fadeIn1 {
    -webkit-animation-name: fadeIn1;
    animation-name: fadeIn1;
 }

 @-webkit-keyframes fadeInButton {
    0% {opacit1y: 0;
    width: 0%;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;
    width: 100%;}
 }
 
 @keyframes fadeInButton {
    0% {opacit1y: 0;
    width: 0%;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;
    width: 40%;}
 }
 
 .fadeInButton {
    -webkit-animation-name: fadeInButton;
    animation-name: fadeInButton;
 }

 @-webkit-keyframes fadeInH {
    0% {opacit1y: 0;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;}
 }
 
 @keyframes fadeInH {
    0% {opacit1y: 0;
    visibility:hidden;}
    1%{
        visibility:visible;
    }
    100% {opacity: 1;}
 }
 
 .fadeInH {
    -webkit-animation-name: fadeInH;
    animation-name: fadeInH;
 }

.name{
    height: 10%;

}
 .name,.paragraph,.form button{
    padding: 4px;
    color: #b52819;
    font-size: 12px;
    font-family: "Marhey",sans-serif;
    width: 80%;
    margin-top: 20px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 7%;
    border-width: 1px;
    border-color: #b52819;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;

 }

 

 .form button{
    width: 40%;
    height: 10%;
    padding: 2px;
    border-width: 2px;
 }
 .form label{
    margin-top: 20px;
    font-family: "Marhey",sans-serif;
    color: #b52819;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
 }
 .paragraph{
    height: 40%;
    background-color: rgba(255,255,255,0.8);
    border-radius: 6%;
    border-width: 1px;
    border-color: #b52819;
    margin-top: 20px;
 }
 .form button{
    max-width:80% ;
    margin-top: 20px;
 }

 .file{
    margin-top: 0px;
    padding: 4px;
    color: #b52819;
    font-size: 12px;
    font-family: "Marhey",sans-serif;
    width: 80%;
    background-color: rgba(255,255,255,0.8);
    border-radius: 7%;
    border-width: 1px;
    border-color: #b52819;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-duration: 3s;animation-duration: 3s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
 }
 .name{
    margin-top: 0px;
 }