/* to set the visual on the published side */
.bit186-contact-block {
    position: relative;
    padding: 10px;
    font-size: 20px;
    font-family:'Lucida Sans';
    /* make the text pop and the block with shadows and dimension; this orange tone works with the star emoji icons i want to use*/
    text-shadow: 1px 1px 4px rgba(249, 229, 52, 0.593);
    border: 1px solid rgb(225, 181, 61);
    box-shadow: 0px 3px 9px 0px rgb(255, 186, 107);
    border-radius: 30px;
    text-align: center; 
    /* sets the background to a color that works with my title text */
    background-color: rgb(101, 54, 171);
    background-image: linear-gradient(rgb(151, 102, 226), rgb(60, 0, 255));
    color: rgb(243, 243, 243);
    /* based on css knowledge from other classes, I wanted to add some visual eye-catching appeal to my contact/footer situation*/
    animation: pulse 2s infinite ease-in-out;
}

/* start and end at the same position, but add a small scale up to make it 'pop' without being too overwhelming from other content*/
@keyframes pulse {
  0% { 
        transform: scale(1); 
    }
  50% { 
        transform: scale(1.03); 
    } 
  100% { 
    transform: scale(1); 
    }
}