:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #42565d;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  animation: body-bg-change 5s linear infinite;
}
.slider {
  width: 800px;
  height: 400px;
  background: url(img-1.png);
  animation: change-bg 10s linear 5;
}
@keyframes change-bg {
  0% {background: url(img-1.png);}
  20% {background: url(img-1.png);}
  25% {background: url(img-2.png);}
  45% {background: url(img-2.png);}
  50% {background: url(img-3.png);}
  70% {background: url(img-3.png);}
  75% {background: url(img-4.png);}
  95%{background: url(img-4.png);}
  100% {background: url(img-1.png);}
  
}
@keyframes body-bg-change {
  0% {background-color: var(--lightBlue);}
  
  50% {background-color: var(--pageGreen);}
  
  100% {background-color: var(--lightBlue);}

  
}