body{
    font-family: Arial;
}

.container{
    width:900px;
    margin:auto;
    border:2px solid royalblue;
}

.banner{
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;

    animation:banner 5s infinite;
}

.banner h2{
    animation:text 2s infinite alternate;
}

.content{
    display:flex;
    justify-content:space-around;
    margin:40px 0;
}

.box{
    width:140px;
    height:140px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:45px;
    color:yellow;
}

.image{
    border:3px solid red;

    background-size:cover;
    background-position:center;

    animation:slide 6s infinite;
}


.b2{
    background:#19dfe6;
    border:3px dashed blue;
    border-radius:0 30px 0 30px;
}


.b3{
    background:#19dfe6;
    border:3px dotted magenta;
    border-radius:30px 0 30px 0;
}


.b4{
    background:teal;
    border:2px solid green;

    font-size:28px;

    animation:rotate 3s linear infinite;
}


@keyframes banner{

0%{background:#ff0066;}
25%{background:orange;}
50%{background:deeppink;}
75%{background:purple;}
100%{background:#ff0066;}

}


@keyframes text{

from{
font-size:20px;
}

to{
font-size:36px;
}

}


@keyframes slide{

0%{
background-image:url("../images/1.jpg");
}

33%{
background-image:url("../images/2.jpg");
}

66%{
background-image:url("../images/3.jpg");
}

100%{
background-image:url("../images/4.jpg");
}

}

@keyframes rotate{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}