body {
	margin: 0;
	background-color: #161616;
}
#container {
	width: 1300px;
	height: 975px;
	background-color: #000;
	animation: backgroundChange 150s linear infinite;
	animation-direction: alternate;
	overflow: hidden;
    margin: 1% auto;
   
    border: 2px solid #fff;
}
#cloud1 {
    
    left:-1300px;
	width: 100%;
	height: auto;
	animation: cloudsMove1 50s linear infinite;
}
#cloud2 {
   
    
    left:-1300px;
	margin-top: -284px;
	width: 100%;
	height: auto;
	animation: cloudsMove2 150s 20s linear infinite;
	animation: transform: scale(2, 2);
}
#cloud3 {
	margin-top: -284px;
	width: 100%;
	height: auto;
	animation:cloudsSize 60s ease-in infinite both;
	animation-direction: alternate;
}
#moon {
	width: 5%;
	height: auto;
	opacity: 0;
	animation: moonChange 150s linear infinite both;
	animation-direction: alternate;
}
#factory {
	width: 100%;
	height: auto;
	margin-top: -278px;
	-webkit-filter: brightness(1);
	filter: brightness(1);
	-webkit-filter: contrast(1);
	filter: contrast(1);
	animation: factoryChange 150s linear infinite;
	animation-direction: alternate;
}
#header {
	position: relative;
	top: 20px;
	width: 100%;
	height: 50px;
	text-align: center;
    z-index: 200;
	
}
#logo
{
	width:100%;
	max-width:600px;
}
#footer {
	width: 100%;
	height: auto;
	text-align: center;	
	padding-top: 0px;
	
}
.footerlink {
	color: silver;
	text-shadow: none;
}
.footerlink:hover {
	color: #FFFF00 !important;
}
@keyframes cloudsMove1 {
    0% {
        transform: translateX(-1300px)
    }
    100% {
        transform: translateX(1300px)
    }
}
@keyframes cloudsMove2 {
    0% {
        transform: translateX(-1300px)
    }
    100% {
        transform: translateX(1300px)
    }
}
@keyframes cloudsMove3 {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(2000px);
    }
}
@keyframes cloudsSize {
    0% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(6, 6);
    }
}
@keyframes backgroundChange {
    0% {
        background-color: #8ac0ff;
    }
    100% {
        background-color: #040219;
    }
}
@keyframes moonChange {
    0% {
        opacity: 0;
        position: absolute;
        top: 325px;
        left: 300px;
    }
    100% {
        opacity: 0.5;
        position: absolute;
        top: 150px;
        left: 700px;
    }
}
@keyframes factoryChange {
    0% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }
    100% {
        filter: brightness(0.3);
        -webkit-filter: brightness(0.3);
    }
}
@media only screen and (max-width: 1600px) {
#container {
	width: 100% !important;
	height: 800px;
	}
}
@media only screen and (max-width: 1350px) {
#container {
	width: 100% !important;
	height: 100vh !important;
	background-image: url(Sm_Background.jpg);
	height: 100%; /* Center and scale the image nicely */;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	animation-name: none;
}
#cloud1, #cloud2, #cloud3, #moon, #factory {
	display: none;
}
#logo {
	width: 100%;
	max-width: 600px;
}
}