body{
    background: linear-gradient(to bottom,#9fd3ff,#e8d5ff,#ffffff);
    text-align: center;
    margin: 0;
    overflow-x: hidden;
    position: relative;
}

/* Heading */
h1{
    color: darkblue;
    font-family:"Times new roman",Arial,sans-serif;
    margin-top: 30px;
    letter-spacing: 2px;
}

/* Common Quote Style */
div{
    width: 60%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    font-size: 22px;
}

/* Quote 1 */
.quote1{
    background-color:#FFF8B5;
    font-family:Arial,sans-serif;
    color:darkred;
    font-style:italic;
}

/* Quote 2 */
.quote2{
    background-color:#D6F5FF;
    font-family:"Trebuchet MS",sans-serif;
    color:darkblue;
    font-weight:bold;
    text-transform:uppercase;
}

/* Quote 3 */
.quote3{
    background-color:#FFE0F0;
    font-family:"Lucida Handwriting",cursive;
    color:purple;
    text-decoration:underline;
}

/* Quote 4 */
.quote4{
    background-color:#E5E5FF;
    font-family:"Comic Sans MS",cursive;
    color:green;
    letter-spacing:2px;
}

/* Quote 5 */
.quote5{
    background-color:#FFF3CD;
    font-family:"Palatino Linotype",serif;
    color:#8B4513;
    font-size:24px;
    font-style:italic;
    border-left:8px solid orange;
}

/* Quote 6 */
.quote6{
    background-color:#D4F8E8;
    font-family:Candara,sans-serif;
    color:darkgreen;
    font-weight:bold;
    letter-spacing:2px;
    border-radius:20px;
}

/* Quote 7 */
.quote7{
    background-color:#E6E6FA;
    font-family:Garamond,serif;
    color:#4B0082;
    text-shadow:2px 2px 5px gray;
    font-size:26px;
}


.star{
    position: fixed;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 24px;
    animation: twinkle 1.5s infinite alternate;
    z-index: 1;
}

.s1{top:20px; left:10%;}
.s2{top:70px; left:30%;}
.s3{top:40px; right:20%;}
.s4{top:150px; left:75%;}
.s5{top:250px; right:15%;}
.s6{top:320px; left:50%;}

@keyframes twinkle{
    from{
        opacity:0.2;
        transform:scale(0.8);
    }
    to{
        opacity:1;
        transform:scale(1.5);
    }
}


.butterfly{
    position: fixed;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 32px;
    animation: fly 14s linear infinite;
    z-index: 2;
}

.b1{
    top:80%;
    left:-50px;
}

.b2{
    top:60%;
    left:-250px;
    animation-delay:3s;
}

.b3{
    top:40%;
    left:-450px;
    animation-delay:6s;
}

.b4{
    top:20%;
    left:-650px;
    animation-delay:9s;
}

@keyframes fly{

0%{
    transform:translateX(0) translateY(0);
}

25%{
    transform:translateX(400px) translateY(-40px);
}

50%{
    transform:translateX(800px) translateY(30px);
}

75%{
    transform:translateX(1200px) translateY(-30px);
}

100%{
    transform:translateX(1700px) translateY(0);
}
}