html {
    background-image: url(../Documents/servi.jpg); 
    background-size: 130%;
    background-repeat: repeat-x;
}
h1 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background: 5px lime;
    color:blue;
    text-shadow: 10px black;
    text-align: center;
    font-size: 200%;
    
}

h4{
    font-size: 100%;
    color: white;
    text-shadow: 10px black;
    transition: 2s;

}

/* Bounce Animation*/
@keyframes fadeBounce {
    0% {
        opacity: 0;
        transform: translateY(-200%);
    }

}

/*End Bounce Animation */

.box-a {
    animation-name: fadeBounce;
    animation-duration: 1s;
    background-color:black;
    padding: 30px;
    border: 25px solid rgb(255, 0, 179);
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    
}


.box-c {
    animation-name: fadeBounce;
    animation-duration: 3s;
    background-color:black;
    padding: 30px;
    border: 25px solid blueviolet;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin-top: 15px;
}


.box-d {
    animation-name: fadeBounce;
    animation-duration: 4s;
    background-color:black;
    padding: 30px;
    border: 25px solid lime;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin-top: 15px;
}


.box-b {
    animation-name: fadeBounce;
    animation-duration: 2s;
    background-color:black;
    padding: 30px;
    border: 25px solid cadetblue;
    width: 100px;
    height: 100px;
    border-radius: 10px;
   
}


h2 { color:rgb(255, 0, 179);
    text-align: center;
    font-size: 200%;
    background-color: blue;
    margin-top: -20px;


}

p{

    color: teal;
    text-align: center;
}
h3 {
    margin-top: 50px;
   
}

h6 {
    text-align: center;
    background: limegreen;
    color:black;
    text-shadow: white;
    margin-top: 450px;
    padding: 10px;
}




li {  
    color:rgb(255, 0, 179);
    font-size: x-large;


}

.content-area {
    border-top: 2px solid blue;
    border-bottom: 2px solid blue;