*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #364b63;  
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    height: 100vh;   
    width: 100%;
    margin: auto;
    position: relative;;
}

.slider {
    background: url(./images/bg1.jpg);
    background-size:cover ;
    margin: auto;
    height: 540px;
    width: 800px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, .3);
    animation:  animate 20s infinite;
}

@keyframes animate {
    20%{
        background: url(./images/bg2.jpg);
        background-size: cover;
    }
    40%{
        background: url('./images/bg3.jpg');
        background-size: cover;
    }
    60%{
        background-size: cover;
        background: url("./images/bg4.jpg");
    }
    80%{
        background-size: cover;
        background:url('./images/bg5.jpg');

    }
    100%{
        background-size: cover;
        background: url('./images/bg5.jpg');
    }
}