body h1 {
	color: white;
	background-color: none;
	background-attachment: fixed;
    background-position: top;
    padding: 10px;
    margin: 0px;
}

body {
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
	font-family: sans-serif;
	margin: 0px;
}

body div {
	text-align: center;
}

body ul li {
	color: white;
	font-size: 32px;
	list-style-type: none;
	text-align: center;
	margin: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 26%;
}

nav ul {
	background: none;
	border: none;
	color: white;
	text-align: center;
	display: inline-block;
	position: relative;
  	left: 50%;
  	transform: translateX(-50%);
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0px;
}

button {
	background-color: transparent;
	color: white;
  	border: 2px solid white;
  	padding: 12px 24px;
  	text-align: center;
  	font-family: sans-serif;
  	font-size: 16px;
  	margin: 4px 2px;
  	opacity: 1;
  	transition: 0.3s;
}

button:hover {
	background-color: white;
  	color: black;
}

nav ul a {
	color: white;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}

p {
	background-color: rgba(128, 128, 128, 0.1);
	color: white;
	padding: 10px;
	margin: 10px;
}

footer {	
	position: fixed;
	bottom: 0;
}

.fogwrapper {
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  z-index: 0;
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: fixed;
  width: 200%;
  z-index: 0;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 40s linear infinite, foglayer_moveme 60s linear infinite;
  -moz-animation: foglayer_01_opacity 40s linear infinite, foglayer_moveme 60s linear infinite;
  animation: foglayer_01_opacity 40s linear infinite, foglayer_moveme 60s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 84s linear infinite, foglayer_moveme 52s linear infinite;
  -moz-animation: foglayer_02_opacity 84s linear infinite, foglayer_moveme 52s linear infinite;
  animation: foglayer_02_opacity 84s linear infinite, foglayer_moveme 52s linear infinite;
}


#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  10% { opacity: .125; }
  20% { opacity: .25; }
  30% { opacity: .1325; }
  40% { opacity: .14; }
  50% { opacity: .2; }
  60% { opacity: .104; }
  80% { opacity: .08; }
  90% { opacity: .09; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  10% { opacity: .125; }
  20% { opacity: .25; }
  30% { opacity: .1325; }
  40% { opacity: .14; }
  50% { opacity: .2; }
  60% { opacity: .104; }
  80% { opacity: .08; }
  90% { opacity: .09; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  10% { opacity: .125; }
  20% { opacity: .25; }
  30% { opacity: .1325; }
  40% { opacity: .14; }
  50% { opacity: .2; }
  60% { opacity: .104; }
  80% { opacity: .08; }
  90% { opacity: .09; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  10% { opacity: .125; }
  20% { opacity: .25; }
  30% { opacity: .1325; }
  40% { opacity: .14; }
  50% { opacity: .2; }
  60% { opacity: .104; }
  80% { opacity: .08; }
  90% { opacity: .09; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .25; }
  10% { opacity: .5; }
  20% { opacity: .1; }
  30% { opacity: .085; }
  40% { opacity: .06; }
  50% { opacity: .05; }
  60% { opacity: .08; }
  70% { opacity: .12; }
  80% { opacity: .15; }
  90% { opacity: .2; }
  100% { opacity: .25; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .25; }
  10% { opacity: .5; }
  20% { opacity: .1; }
  30% { opacity: .085; }
  40% { opacity: .06; }
  50% { opacity: .05; }
  60% { opacity: .08; }
  70% { opacity: .12; }
  80% { opacity: .15; }
  90% { opacity: .2; }
  100% { opacity: .25; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .25; }
  10% { opacity: .5; }
  20% { opacity: .1; }
  30% { opacity: .085; }
  40% { opacity: .06; }
  50% { opacity: .05; }
  60% { opacity: .08; }
  70% { opacity: .12; }
  80% { opacity: .15; }
  90% { opacity: .2; }
  100% { opacity: .25; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .25; }
  10% { opacity: .5; }
  20% { opacity: .1; }
  30% { opacity: .085; }
  40% { opacity: .06; }
  50% { opacity: .05; }
  60% { opacity: .08; }
  70% { opacity: .12; }
  80% { opacity: .15; }
  90% { opacity: .2; }
  100% { opacity: .25; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .4 }
  10% { opacity: .2 }
  20% { opacity: .1; }
  52% { opacity: .3; }
  68% { opacity: .15; }
  100% { opacity: .4; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .4 }
  27% { opacity: .1; }
  52% { opacity: .3; }
  68% { opacity: .15; }
  100% { opacity: .4; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .4 }
  27% { opacity: .1; }
  52% { opacity: .3; }
  68% { opacity: .15; }
  100% { opacity: .4; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .4 }
  27% { opacity: .1; }
  52% { opacity: .3; }
  68% { opacity: .15; }
  100% { opacity: .4; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }