body {
	background-color: blue;
	background-image: url("img/joy.jpg");
	background-position: center center;
	background-size: cover;
	  margin: 0;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
}

body:before {
  animation: counter 10s infinite linear;
  background:
linear-gradient(324deg, #226 4%,   transparent 4%) -70px 43px,
linear-gradient( 36deg, #226 4%,   transparent 4%) 30px 43px,
linear-gradient( 72deg, #eee 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #eee 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #eee 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #eee 7.5%, transparent 7.5%) 30px 23px,

linear-gradient(324deg, #226 4%,   transparent 4%) -20px 93px,
linear-gradient( 36deg, #226 4%,   transparent 4%) 80px 93px,
linear-gradient( 72deg, #eee 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #eee 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #eee 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #eee 7.5%, transparent 7.5%) 80px 73px;
background-color: #226;
background-size: 100px 100px;
  bottom:-100vmin;
  content:"";
  left:-100vmin;
  position:absolute;
  right:-100vmin;
  top:-100vmin;
}

body:after {
  animation: fadeInOut 10s infinite linear;
  background-image: url("img/joy.jpg");
  background-position: center center;
	background-size: cover;
  bottom:-50vmin;
  content:"";
  left:-50vmin;
  position:absolute;
  right:-50vmin;
  top:-50vmin;
}

@keyframes fadeInOut {
  0% {
    opacity:.1;
  }
  50% {
    opacity:.9;
  }
  100% {
    opacity:.1;
    transform:rotate(360deg);
  }
}

@keyframes counter {
  100% {
    transform:rotate(-360deg);
  }
}

.content {
  background-color:#fff;
  font-family:Georgia;
  font-size:2em;
  font-variant:small-caps;
  font-weight:bold;
  letter-spacing:.25em;
  margin:1em;
  padding:1em;
  position:relative;
  text-align:center;
  z-index:1;
}