body {
    font-family:Verdana, sans-serif;

}

.animationarea {
    display:grid;
    grid-template-columns:25% 25% 25% 25%;
    width: 85%;
    height: 300px;
    margin:auto;
    border:#000000 1px solid;
    overflow:hidden;
}

    .animationarea > .animate3 {
        width: 100px;
        height: 100px;
        display: inline-block;
        position: relative;
        background-color: #212388;
    }

.animate1, .animate2  {
    width: 100px;
    height: 100px;
    display:inline-block;
    position: relative;

}


.animate1 {
    background-color: #000000;
    border: #000000 solid 1px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    opacity: 0;
}

.animate2 {
    color:#00ffff;
    font-size:5em;
    opacity:0;
    position:absolute;
}

i {
    display:inline-block;
    
    position:absolute;
    
}

button {
    margin: 10px;
    
}

#spacer {
    width:0px;
    display:inline-block;
}