.testDiv{
    opacity: 0;
    width: 0px;
    height: 0px;
    border: 4px solid rgb(4, 4, 7);
    color: white;
    left: 250px;
    background-color: rgb(6, 7, 7);
    border-radius: 25px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;    
    padding-top: 20px;
    font-size: 0px;
    transition-duration: 2s;
        
}

.final{
    width: 150px;
    height: 70px;
    font-size: 30px;
    color: black;
    opacity: 1;
}

.showBL {
    background-color: rgb(91, 100, 223) !important; 
    border: 4px solid rgb(23, 7, 168) !important;
    transform: translate(20px,-120px);
    animation-delay: 10s;
}


.showGR {
    opacity: 1;
    background-color: lightgreen !important; 
    border: 4px solid green !important;
    color: black;
    transform: translate(20px,-120px);
    animation-delay: 2s;
}
.showRD {
    opacity: 1;
    background-color: rgb(233, 113, 109) !important; 
    border: 4px solid #800000 !important;
    color: black;
    transform: translate(20px,-120px);
    animation-delay: 3s;
}

.showYE {
    opacity: 1;
    background-color: rgb(235, 238, 78) !important; 
    border: 4px solid rgb(150, 142, 29) !important;
    transform: translate(20px,-120px);
    color: black;
    animation-delay: 3s;
}

.basicDiv{
    opacity: 0;
    width: 400px;
    height: 150px;
    left: 0px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;    
    font-size: 30px;
    transition-duration: 1s;
}


.nameDiv{
    opacity: 0;
    width: 400px;
    height: 150px;
    left: 0px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;    
    font-size: 30px;
    transition-duration: 1s;
}

.showText {
    opacity: 1;
    transform: translate(650px, 0px);
}

.showLogo {
    opacity: 1;
    transform: translate(0px, -120px);
}