styles.css

body{
    margin: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.photo{
    width: 150px;
    border-radius: 15px;
}
.border-color{
    border: 2px dotted rgb(22, 52, 53);
    
}
/* This allows the shadow effects on the text */
.bus-effect{
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
/* Using this for highlighting  */
h3:hover{
    background-color: rgb(153, 104, 39);
}
.bus-card{
    padding: 20px;
    display: flex;
    justify-content: space-around;
    /* The codes below gives a box shadow to the border */
    box-shadow: 10px 10px 5px rgb(187, 178, 175);
    margin: 0px auto;
    width: 400px;
    text-align: center;
    background-color: rgb(206, 175, 96);
    color: black;
    border-bottom: 6px solid rgb(65, 48, 4);
    border-radius: 20px;
    /* the property below gives animation to the div */
    animation-name: change;
    animation-duration: 5s;
}
/* The code allows the animated box to change from one background colour to another */
@keyframes change {
  from {background-color: rgb(206, 175, 96);}
  to {background-color: darkolivegreen;}
}