* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #333;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: white;
    line-height: 1.6em;
    text-align: center;
}

.container {
    width: 80%;
    margin: auto;
    padding: 0 30px;
}

#showcase {
    height: 300px;
}

#showcase h1 {
    font-size: 50px;
    line-height: 1.3em;
    position:relative;
    animation-name: head;
    animation-duration: 8s;
    animation-fill-mode: forwards;
}

@keyframes head {
    0% {
        top: -200px;
    }
    25% {
        top: 170px;
    }

    50% {
        top: 170px;
    }

    100% {
        top: -200px;
    }
}

#content {
    position: relative;
    animation-name: content;
    animation-duration: 8s;
    animation-fill-mode: forwards;
}

@keyframes content {
    0% {
        left: -1500px;
    }

    25% {
        left: 0px;
    }

    50% {
        left: 0px;
    }

    100% {
        left: -1500px;
    }
}

#btn {
    display: inline-block;
    color: white;
    position: relative;
    text-decoration: none;
    padding: 1em 2em;
    border: white 2px solid;
    margin-top: 40px;
    margin-bottom: 10px;
    opacity: 0;
    animation-name: btn;
    animation-delay: 2s;
    animation-duration: 8s;
    animation-fill-mode: forwards;
    transition-property: transform;
    transition-duration: 1s;
}

@keyframes btn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        margin-top: 40px;
    }

    100% {
        opacity: 1;
        margin-top: 220px;
    } 
}

#btn:hover {
    transform: rotateY(180deg);
}



#main-box {
    margin-top: -775px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    justify-items: center;
}


.small-box{
    animation-name: small-box;
    margin: 10px;
    padding: 7px;
    width: 20px;
    height: 20px;
    opacity: 0;
    animation-duration: 3s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes small-box {
    0% {
        opacity: 1;
        background-color: white;
        border-radius: 0%;
    }

    100% {
        opacity: 1;
        background-color: palevioletred;  
        transform: rotateZ(180deg);  
        border-radius: 30%;
    } 
}

.vanish {
    animation-name: vanish;
    animation-duration: 6s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes vanish {
    0% {
        opacity: 1;
        background-color: white;
        border-radius: 0%;
    }

    25% {
        opacity: 0;
    }

    75% {
        opacity: 0;
        background-color: palevioletred;
        transform: rotateZ(180deg);  
    }

    100% {
        opacity: 1;  
        background-color: white;
        border-radius: 0%;

    } 
}

.flash {
    margin: 0;
    padding: 0;
    position: relative;
    top: -350px;
}

#l1 {
    opacity: 0;
    animation-name: l1;
    animation-duration: 4s;
    animation-delay: 10s;
    animation-fill-mode: forwards;
    font-size: 28px;
}

@keyframes l1 {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}


#l2 {
    opacity: 0;
    animation-name: l2;
    position: relative;
    top: -380px;
    animation-duration: 4s;
    animation-delay: 16s;
    animation-fill-mode: forwards;
    font-size: 24px;
}

@keyframes l2 {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
} 

#l3 {
    opacity: 0;
    animation-name: l3;
    animation-duration: 4s;
    animation-delay: 22s;
    animation-fill-mode: forwards;
    position: relative;
    top: -400px;
    font-size: 35px;
}

@keyframes l3{
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}

#l4 {
    opacity: 0;
    animation-name: l4;
    animation-duration: 4s;
    animation-delay: 28s;
    animation-fill-mode: forwards;
    position: relative;
    top: -430px;
    font-size: 24px;
}

@keyframes l4 {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}

#l5 {
    opacity: 0;
    animation-name: l5;
    animation-duration: 4s;
    animation-delay: 34s;
    animation-fill-mode: forwards;
    position: relative;
    top: -450px;
    font-size: 33px;
}

@keyframes l5 {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}

#l6 {
    opacity: 0;
    animation-name: l6;
    animation-duration: 4s;
    animation-delay: 40s;
    animation-fill-mode: forwards;
    position: relative;
    top: -480px;
    font-size: 25px;
}

@keyframes l6 {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}

#l7 {
    opacity: 0;
    animation-name: l7;
    animation-duration: 4s;
    animation-delay: 46s;
    animation-fill-mode: forwards;
    position: relative;
    top: -510px;
    font-size: 30px;
}

@keyframes l7 {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}

@media(max-width: 980px) {
    #showcase h1 {
        font-size: 40px;
    }

    #main-box {
        margin-top: -800px;
    }

    #l1 {font-size: 23px; top: -370px;}
    #l2 {font-size: 18px; top: -395px;}
    #l3 {font-size: 25px; top: -420px;}
    #l4 {font-size: 19px; top: -445px;}
    #l5 {font-size: 25px; top: -470px;}
    #l6 {font-size: 19px; top: -495px;}
    #l7 {font-size: 25px; top: -520px;}

}

@media (max-width: 767px) {
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    #btn {
        font-size: 12px;
    }

    @keyframes btn {
        0% {
            opacity: 0;
        }
    
        50% {
            opacity: 1;
            margin-top: 40px;
        }
    
        100% {
            opacity: 1;
            margin-top: 100px;
    }
    }

    #showcase h1 {
        font-size: 20px;
    }

    #content {
        font-size: 14px;
    }

    #main-box {
        grid-gap: 0.5em;
        width: 100%;
        margin: auto;
        margin-top: -650px;
        margin-right: 0px;
        padding: 0;
        text-align: center;
        align-self: center;
    }

    .small-box{
        width: 10px;
        height: 10px;
        margin: 0;
        padding: 2px;
    }


    #l1 {font-size: 10px; top: -370px;}
    #l2 {font-size: 8px; top: -395px;}
    #l3 {font-size: 12px; top: -420px;}
    #l4 {font-size: 8px; top: -445px;}
    #l5 {font-size: 12px; top: -470px;}
    #l6 {font-size: 8px; top: -495px;}
    #l7 {font-size: 12px; top: -525px;}
}