*, *:before, *:after {box-sizing: border-box;}

   .box { height: auto;max-width: 30em;
  padding: 15px;
  background-color: rgba(66,33,142,1);
  box-shadow: 10px 10px 5px 12px black;
   margin-left:auto;
  margin-right: auto;margin-bottom: 3em;
color: white; text-align: center;font-size: 1.1em;}




/* Nav */
.overlay {  height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;
  background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9);overflow-x: hidden;
  transition: 0.5s;}

.overlay-content {position: relative;top: 25%;width: 100%;
  text-align: center;margin-top: 30px;}

.overlay a {padding: 8px;text-decoration: none;font-size: 1.2em;color: #818181;
  display: block;transition: 0.3s;}

.overlay a:hover, .overlay a:focus {color: #f1f1f1;}

.overlay .closebtn {position: absolute;top: 20px;right: 45px;font-size: 1.2em;}

@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {font-size: 40px;top: 15px;right: 35px;}}

.marquee {max-width: 100vw; /* iOS braucht das */
white-space: nowrap;overflow: hidden;font-size: 1.4em; padding-bottom: 3em; 
color: white;}

.marquee span {display: inline-block;padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
animation: marquee 10s linear infinite;}

	/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
	.marquee span:hover {animation-play-state: paused}

	/* Make it move */
	@keyframes marquee {0%   { transform: translateX(0);}100% { transform: translateX(-100%); }}