*{
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.mydiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    font-weight: bold;
    background: linear-gradient(150deg, #6be8e6, #FFE4B5, #008B8B, #FFE4B5, #6be8e6);
    background-size: 400% 300%;
    animation: BgGradient 5s ease infinite;
}

@keyframes BgGradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

.slider {
	width: 100%;
	margin: auto;
	animation: carousel 20s infinite alternate;
	/*overflow: hidden;*/
}

.slider ul {
	display: flex;
	padding: 0;
	width: 300%;
}

.slider li {
	widht: 100%;
	list-style: none;
}

.slider img {
	widht: 100%;
}

@keyframes carousel {
	0% {margin-left: 0%; }
	30% {margin-left: 0%; }
	35% {margin-left: -100%; }
	65% {margin-left: -100%; }
	70% {margin-left: -200%; }
	100% {margin-left: -200%; }
}

.header {
    position: absolute;
    top: 0;
    left: 0;
}

.footer {
    text-align:center;
    position: absolute;
    bottom: 1px;
}