@charset "utf-8";

/* CSS Document */

body{
    margin:0;
    padding:20px;
    font-family:Arial, Helvetica, sans-serif;
}

.banner{
    height:100px;
    text-align:center;
    line-height:100px;
    font-size:30px;
    font-weight:bold;
    text-shadow:3px 3px 2px gray;
    animation:change_background 15s infinite;
}

.frame{
    margin:30px auto;
    width:90%;
    height:300px;
}

.frame div{
    float:left;
    width:200px;
    height:200px;
    margin:40px;
    background:aqua;
    font-size:3em;
    text-align:center;
    line-height:200px;
    color:yellow;
}

/* Khung 1 */

.slider{
    border:5px solid red;
    overflow:hidden;
    animation:scroll 10s infinite;
}

.slider img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Khung 2 */

.round1{
    border:5px dashed blue;
    border-radius:0 30px;
}

/* Khung 3 */

.round2{
    border:5px dotted magenta;
    border-radius:30px 0;
}

/* Khung 4 */

.rotate{
    background:teal;
    border:2px double yellow;
    font-size:1.5em;
    animation:rotate 10s infinite linear;
}

/* Banner */

@keyframes change_background{

    0%{
        background:red;
        font-size:1em;
    }

    20%{
        background:orange;
        font-size:1.2em;
    }

    40%{
        background:yellow;
        font-size:1.4em;
    }

    60%{
        background:green;
        font-size:1.6em;
    }

    80%{
        background:deepskyblue;
        font-size:1.4em;
    }

    100%{
        background:deeppink;
        font-size:1em;
    }

}

/* Slider */

@keyframes scroll{

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

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

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

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

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

}

/* Rotate */

@keyframes rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}