body{
    background-color: orange;
    color: black;
    text-align: center;
    font-family: "Archivo Black", sans-serif;
    font-size: xx-large;
}

/* custom animations*/
@keyframes FadeSlideIn{
    0% {opacity: 0; top: 50px;}
    100% {opacity: 1; top: 0px;}
}

@keyframes fadeLeftCornerIn{
    0% {opacity: 0; left: -200px; top:-200px}
    100% {opacity: 1; left: 0px; top:0px}
}

@keyframes fadeRightCornerIn{
    0% {opacity: 0; right: -200px; top:-200px}
    100% {opacity: 1; right: 0px; top:0px}
}

@keyframes fadeSlideUp {
    0% {opacity: 0; top: -50px;}
    100% {opacity: 1; top: 0px;}
}

@keyframes slideInLeft {
    0% {opacity: 0; left:-500px}
    100% {opacity: 1; left:0px}
}

/*lines*/
.line1{
   animation-name: fadeIn;
   /*animation-delay: 1s;*/
   animation-duration: 5s;
   opacity: 0;
   animation-fill-mode: forwards;
}

.line2{
    opacity: 0;
    animation-name: fadeIn;
    animation-delay: 6s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

.line3{
    opacity: 0;
    position: relative;
    animation-fill-mode: forwards;
    animation-name: FadeSlideIn;
    animation-delay: 12s;
    animation-duration: 5s;
}

.line4{
    opacity: 0;
    position: relative;
    animation-fill-mode: forwards;
    animation-name: fadeLeftCornerIn;
    animation-delay: 18s;
    animation-duration: 5s;
}

.line5{
    opacity: 0;
    position: relative;
    animation-fill-mode: forwards;
    animation-name: fadeRightCornerIn;
    animation-delay: 24s;
    animation-duration: 5s;
}

.line6{
    opacity: 0;
    position: relative;
    animation-name: fadeSlideUp;
    animation-fill-mode: forwards;
    animation-delay: 30s;
    animation-duration: 5s;
}

.line7{
    opacity: 0;
    animation-name: fadeInLeftBig;
    animation-fill-mode: forwards;
    animation-delay: 36s;
    animation-duration: 5s;
}

.line8{
    opacity: 0;
    animation-name: jackInTheBox;
    animation-fill-mode: forwards;
    animation-delay: 42s;
    animation-duration: 5s;
}

.line9{
    opacity: 0;
    animation-name: backInDown;
    animation-fill-mode: forwards;
    animation-delay: 48s;
    animation-duration: 5s;
}

.line10{
    opacity: 0;
    animation-name: backInUp;
    animation-fill-mode: forwards;
    animation-delay: 54s;
    animation-duration: 5s;
}