* {box-sizing:border-box;}


body {background-color:#7aacff; margin:0; height:100vh;}
body {display:grid; place-items:center;}


/* div#container {} */
div#container main.slideshow {border:1.25rem solid white; border-radius:.5rem; width:85vmin; overflow:hidden; position:relative;}
div#container main.slideshow {box-shadow: .625rem 1.5rem 2.875rem rgba(30,30,200,.3); transition:.5s;}
div#container.devmode main.slideshow {width:50vw; overflow:visible;}
div#container main.slideshow div.inner {display:flex; flex-direction:row; transition:.5s;}
div#container main.slideshow div.inner {animation: slide4 15s ease-in-out 0s infinite forwards;}
div#container main.slideshow div.inner img {width:100%; flex-shrink:0;}
div#container button.toggle {position:absolute; bottom:0; left:50%; transform:translateX(-50%); padding:.5rem 1rem; margin:1rem;}


@keyframes slide4 {
	0% {transform:translateX(0%);}

	/* Pic A */

	20% {transform:translateX(0%);}
	25% {transform:translateX(-100%);}

	/* Pic B */

	45% {transform:translateX(-100%);}
	50% {transform:translateX(-200%);}

	/* Pic C */

	70% {transform:translateX(-200%);}
	75% {transform:translateX(-300%);}

	/* Pic D */

	95% {transform:translateX(-300%);}
	100% {transform:translateX(-400%);}
}