body {
		margin: 0;
		overflow: hidden;
		background-color: black;
		font-family: Arial, Helvetica, sans-serif;
}
h1 {
		margin: 0;
		padding-top: .1em;
}
a:link, a:visited {
    color: black;
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: underline;
}
A.main:hover {text-decoration: none;}
A.main:active {text-decoration: none;}
#title {
        width: 100%;
        height: 2em;
		text-align: center;
        color: white;
        position:absolute;
        left:0; right:0;
        margin-left:auto;
        margin-right:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
		
		text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000; 
    }
    
#eled {
        position:absolute;
        width: 100%;
        height: 100%;
        left:0; right:0;
        background-color: white;
    }

@media only screen and (min-width: 1000px) {
.showbox {
		height: 100vh;
		box-sizing: border-box;
		background-size: 100% 100%;
		text-align: center;
}

#left {
		width: 50%;
		float: left;
		background: linear-gradient(to left, rgba(0,0,0,1),rgba(0,0,0,0)), url('random_img_l.php?d=32909');
		background-size: 100% 100%;
}

#right {
		width: 50%;
		float: right;
		background: linear-gradient(to left, rgba(0,0,0,0),rgba(0,0,0,1)), url('random_img_r.php?d=46485');
		background-size: 100% 100%;
}
.slot {
		position: absolute;
		top: 40vh;
		width: 50%;
}
.headline {
		margin: 0 auto;
}
.headline a:link, a:visited {
		font-size: 3vw;
		color: white;
		text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000; 
}
#title {
        height: 3em;
		font-size: 5vw;
        top:5vh;
		animation: slideup 6s;
    }
        @keyframes slideup {
          from {
            top:285vh;
            width: 100%;
        	left: 100em;
          }
        
          to {
            top:5vh;
            width: 100%;
          }
        }
        @-webkit-keyframes slideup {
          from {
            top:285vh;
            width: 100%;
        	left: 100em;
          }
        
          to {
            top:5vh;
            width: 100%;
          }
        }	

#all  {
	animation-duration: 10s;
	animation-name: slideright;
}
        @keyframes slideright {
          from {
            top:45vh;
            width: 300%; 
          }
        
          to {
            top:1em;
            width: 100%;
          }
        }
        @-webkit-keyframes slideright {
          from {
            top:45vh;
            width: 300%; 
          }
        
          to {
            top:1em;
            width: 100%;
          }
        }

.headline1  {
            -webkit-animation-duration: 8s;
            animation-duration: 8s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
			-webkit-animation-name: fadeIn;
			animation-delay: 6.5s;
            animation-name: fadeIn;
}
         @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
         @-webkit-keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

.headline2  {
            -webkit-animation-duration: 4s;
            animation-duration: 4s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
			-webkit-animation-name: fadeIn;
			animation-delay: 7s;
            animation-name: fadeIn2;
}
         @keyframes fadeIn2 {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
         @-webkit-keyframes fadeIn2 {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
}

@media only screen and (max-width: 999px) {
body {
		background-color: white;
}
#all  {
	animation-duration: 10s;
	animation-name: fadeIn;
}
         @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
         @-webkit-keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
#eled {
        display:none;
    }
#title {
    height: 15vh;
    bottom: 41vh;
	font-size: 3vh;
    }
.showbox {
		text-align: center;
		display: table;
		height: 100%;
		width: 100%;
}
.slot {
  display: table-cell;
  vertical-align: middle;
}
.headline {
		margin-left: auto;
		margin-right: auto;
		width: 75%;

}
.headline a:link, a:visited {
		font-size: 6vw;
		color: white;
		text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000; 
}
.main h1  {
		font-size: 10vw;
}
#left {
		height: 50vh;
		margin: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,1)), url('random_img_l.php?d=97150');
		background-size: 100% 100%;
}
#right {
		height: 50vh;
		margin: 0;
		background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('random_img_r.php?d=77714');
		background-size: 100% 100%;
}
}

@media only screen and (max-height: 600px) {
#title {
    left:-85vw;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: 1em;
}
.main h1  {
		font-size: 1.5em;
}
.headline a:link, a:visited {
		font-size: 1.5em;
}
}
         @keyframes mynewmove {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         @-webkit-keyframes mynewmove {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }