body {
	height: 1000px;
  width: 1350px;
  background-color: #55aa55;
  font-family: "Josefin Slab", serif;
}

.container {
  position: relative;
  height: 300px;
  overflow: visible;
}

#title {
  width: 1350;
  background: linear-gradient(20deg, rgba(85, 152, 170, 1) 22%, rgba(255, 255, 255, 1) 100%);
  display: inline-block;
  border: 1px solid #5598aa;
  border-radius: 3em;
  padding: 0.5em;
  margin: 0.75em;
  text-shadow: 3px 2px 2px gray;
  box-shadow: 3px 10px 10px black;
  text-align: center;
}

#origin {
  width: 1000px;
  text-align: center;
}

#illustratebelow {
  width: 1000px;
  text-align: center;
}

#sample {
  width: 1000px;
  text-align: center;
}

#shuffled1 {
  position: relative;
  height: 300px;
  margin: 50px;
}

#callout {
  width: 1000px;
  text-align: center;
}

#shuffled2 {
  position: relative;
  height: 300px;
  margin: 50px;
}

#halfthetime {
  width: 1000px;
  text-align: center;
}

#shuffled3 {
  position: relative;
  height: 300px;
  margin: 50px;
}

#weird {
  width: 1000px;
  text-align: center;
}

#Birthday {
  width: 1000px;
  text-align: center;
}

#Gilbreath {
  width: 1000px;
  text-align: center;
}

#Poisson {
  width: 1000px;
  text-align: center;
}

#TrulyLargeNumbers {
  width: 1000px;
  text-align: center;
}

#friends {
  width: 1000px;
  text-align: center;
}

#sources {
  width: 1000px;
  text-align: center;
}

ol {
	display: inline-block;
}

/* DECK ONE */

#JackOfDiamonds {
  position: absolute;
  animation: JackOfDiamonds 10s infinite;
  margin-left: 10px;
}
@keyframes JackOfDiamonds {
  0% {
    left: 1000px;
  }
  25% {
   	left: 750px;
  }
  33% {
    left: 666px;
  }
  50% {
    left: 500px;
  }
  66% {
    left: 333px;
  }
  75% {
    left: 250px;
  }  
  85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 10px;
  }
}
#TenOfHearts {
  position: absolute;
  animation: TenOfHearts 10s infinite;
  margin-left: 60px;
}
@keyframes TenOfHearts {
  0% {
    left: 1050px;
  }
  25% {
   	left: 800px;
  }
  33% {
    left: 716px;
  }
  50% {
    left: 550px;
  }
  66% {
    left: 383px;
  }
  75% {
    left: 300px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 60px;
  }
}

#TwoOfDiamonds {
  position: absolute;
  animation: TwoOfDiamonds 10s infinite;
  margin-left: 110px;
}
@keyframes TwoOfDiamonds {
  0% {
    left: 1100px;
  }
  25% {
   	left: 850px;
  }
  33% {
    left: 766px;
  }
  50% {
    left: 600px;
  }
  66% {
    left: 433px;
  }
  75% {
    left: 350px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 110px;
  }
}

#TwoOfSpades {
  position: absolute;
  animation: TwoOfSpades 10s infinite;
  margin-left: 160px;
}
@keyframes TwoOfSpades {
  0% {
    left: 1150px;
  }
  25% {
   	left: 900px;
  }
  33% {
    left: 816px;
  }
  50% {
    left: 650px;
  }
  66% {
    left: 483px;
  }
  75% {
    left: 400px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 160px;
  }
}

#ThreeOfClubs {
  position: absolute;
  animation: ThreeOfClubs 10s infinite;
  margin-left: 210px;
}
@keyframes ThreeOfClubs {
  0% {
    left: 1200px;
  }
  25% {
   	left: 950px;
  }
  33% {
    left: 866px;
  }
  50% {
    left: 700px;
  }
  66% {
    left: 533px;
  }
  75% {
    left: 450px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 210px;
  }
}

#AceOfDiamonds {
  position: absolute;
  animation: AceOfDiamonds 10s infinite;
  margin-left: 260px;
}
@keyframes AceOfDiamonds {
  0% {
    left: 1250px;
  }
  25% {
   	left: 1000px;
  }
  33% {
    left: 916px;
  }
  50% {
    left: 750px;
  }
  66% {
    left: 583px;
  }
  75% {
    left: 500px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 260px;
  }
}

#SevenOfClubs {
  position: absolute;
  animation: SevenOfClubs 10s infinite;
  margin-left: 310px;
}
@keyframes SevenOfClubs {
  0% {
    left: 1300px;
  }
  25% {
   	left: 1050px;
  }
  33% {
    left: 966px;
  }
  50% {
    left: 800px;
  }
  66% {
    left: 633px;
  }
  75% {
    left: 550px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 310px;
  }
}

/* DECK TWO */

#QueenOfSpades {
  position: absolute;
  animation: QueenOfSpades 10s infinite;
  margin-left: 10px;
}
@keyframes QueenOfSpades {
  0% {
    left: 1000px;
  }
  25% {
   	left: 750px;
  }
  33% {
    left: 666px;
  }
  50% {
    left: 500px;
  }
  66% {
    left: 333px;
  }
  75% {
    left: 250px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 10px;
  }
}
#FiveOfClubs {
  position: absolute;
  animation: FiveOfClubs 10s infinite;
  margin-left: 60px;
}
@keyframes FiveOfClubs {
  0% {
    left: 1050px;
  }
  25% {
   	left: 800px;
  }
  33% {
    left: 716px;
  }
  50% {
    left: 550px;
  }
  66% {
    left: 383px;
  }
  75% {
    left: 300px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 60px;
  }
}

#FourOfSpades {
  position: absolute;
  animation: FourOfSpades 10s infinite;
  margin-left: 110px;
}
@keyframes FourOfSpades {
  0% {
    left: 1100px;
  }
  25% {
   	left: 850px;
  }
  33% {
    left: 766px;
  }
  50% {
    left: 600px;
  }
  66% {
    left: 433px;
  }
  75% {
    left: 350px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 110px;
  }
}

#SixOfHearts {
  position: absolute;
  animation: SixOfHearts 10s infinite;
  margin-left: 160px;
  img {
    filter: sepia(100%) saturate(300%);
  }
}
@keyframes SixOfHearts {
  0% {
    left: 1150px;
  }
  25% {
   	left: 900px;
  }
  33% {
    left: 816px;
  }
  50% {
    left: 650px;
  }
  66% {
    left: 483px;
  }
  75% {
    left: 400px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 160px;
  }
}

#SevenOfClubs2 {
  position: absolute;
  animation: SevenOfClubs2 10s infinite;
  margin-left: 210px;
  img {
    filter: sepia(100%) saturate(300%);
  }
}
@keyframes SevenOfClubs2 {
  0% {
    left: 1200px;
  }
  25% {
   	left: 950px;
  }
  33% {
    left: 866px;
  }
  50% {
    left: 700px;
  }
  66% {
    left: 533px;
  }
  75% {
    left: 450px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 210px;
  }
}

#JackOfClubs {
  position: absolute;
  animation: JackOfClubs 10s infinite;
  margin-left: 260px;
}
@keyframes JackOfClubs {
  0% {
    left: 1250px;
  }
  25% {
   	left: 1000px;
  }
  33% {
    left: 916px;
  }
  50% {
    left: 750px;
  }
  66% {
    left: 583px;
  }
  75% {
    left: 500px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 260px;
  }
}

#ThreeOfClubs2 {
  position: absolute;
  animation: ThreeOfClubs2 10s infinite;
  margin-left: 310px;
}
@keyframes ThreeOfClubs2 {
  0% {
    left: 1300px;
  }
  25% {
   	left: 1050px;
  }
  33% {
    left: 966px;
  }
  50% {
    left: 800px;
  }
  66% {
    left: 633px;
  }
  75% {
    left: 550px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 310px;
  }
}

/* DECK THREE */

#TwoOfHearts {
  position: absolute;
  animation: TwoOfHearts 10s infinite;
  margin-left: 10px;
}
@keyframes TwoOfHearts {
  0% {
    left: 1000px;
  }
  25% {
   	left: 750px;
  }
  33% {
    left: 666px;
  }
  50% {
    left: 500px;
  }
  66% {
    left: 333px;
  }
  75% {
    left: 250px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 10px;
  }
}
#AceOfClubs {
  position: absolute;
  animation: AceOfClubs 10s infinite;
  margin-left: 60px;
}
@keyframes AceOfClubs {
  0% {
    left: 1050px;
  }
  25% {
   	left: 800px;
  }
  33% {
    left: 716px;
  }
  50% {
    left: 550px;
  }
  66% {
    left: 383px;
  }
  75% {
    left: 300px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 60px;
  }
}

#SixOfHearts2 {
  position: absolute;
  animation: SixOfHearts2 10s infinite;
  margin-left: 110px;
  img {
    filter: sepia(100%) saturate(300%);
  }
}
@keyframes SixOfHearts2 {
  0% {
    left: 1100px;
  }
  25% {
   	left: 850px;
  }
  33% {
    left: 766px;
  }
  50% {
    left: 600px;
  }
  66% {
    left: 433px;
  }
  75% {
    left: 350px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 110px;
  }
}

#EightOfSpades {
  position: absolute;
  animation: EightOfSpades 10s infinite;
  margin-left: 160px;
}
@keyframes EightOfSpades {
  0% {
    left: 1150px;
  }
  25% {
   	left: 900px;
  }
  33% {
    left: 816px;
  }
  50% {
    left: 650px;
  }
  66% {
    left: 483px;
  }
  75% {
    left: 400px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 160px;
  }
}

#SevenOfClubs3 {
  position: absolute;
  animation: SevenOfClubs3 10s infinite;
  margin-left: 210px;
  img {
    filter: sepia(100%) saturate(300%);
  }
}
@keyframes SevenOfClubs3 {
  0% {
    left: 1200px;
  }
  25% {
   	left: 950px;
  }
  33% {
    left: 866px;
  }
  50% {
    left: 700px;
  }
  66% {
    left: 533px;
  }
  75% {
    left: 450px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 210px;
  }
}

#KingOfDiamonds {
  position: absolute;
  animation: KingOfDiamonds 10s infinite;
  margin-left: 260px;
}
@keyframes KingOfDiamonds {
  0% {
    left: 1250px;
  }
  25% {
   	left: 1000px;
  }
  33% {
    left: 916px;
  }
  50% {
    left: 750px;
  }
  66% {
    left: 583px;
  }
  75% {
    left: 500px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 260px;
  }
}

#FourOfHearts {
  position: absolute;
  animation: FourOfHearts 10s infinite;
  margin-left: 310px;
}
@keyframes FourOfHearts {
  0% {
    left: 1300px;
  }
  25% {
   	left: 1050px;
  }
  33% {
    left: 966px;
  }
  50% {
    left: 800px;
  }
  66% {
    left: 633px;
  }
  75% {
    left: 550px;
  }  
    85% {
    left: 100px;
  }
  95% {
    left: 50px;
  }
  100% {
    left: 310px;
  }
}

#Birthday {
  border: 2px solid #e31414;
  background: #e31414;
background: linear-gradient(20deg, rgba(227, 20, 20, 1) 22%, rgba(255, 245, 245, 1) 100%);
}

#Gilbreath {
  border: 2px solid #e38914;
  background: #e38914;
background: linear-gradient(20deg,rgba(227, 137, 20, 1) 22%, rgba(255, 245, 245, 1) 100%);
}

#Poisson {
  border: 2px solid #e3d914;
  background: #e3d914;
background: linear-gradient(20deg, rgba(227, 217, 20, 1) 22%, rgba(255, 245, 245, 1) 100%);
}

#TrulyLargeNumbers {
  border: 2px solid #77c977;
  background: #55AA55;
background: linear-gradient(20deg, rgba(85, 170, 85, 1) 22%, rgba(255, 255, 255, 1) 100%);
}

#balloons {
  position: absolute;
  animation: balloons 20s;
  margin-left: 15px;
}
@keyframes balloons {
  0% {
    left: 10px;
    top: 1000px;
  }
  10% {
    left: 10px;
    top: 900px;
  }
  20% {
    left: 10px;
    top: 800px;
  }
  30% {
    left: 10px;
    top: 700px;
  }
  40% {
    left: 10px;
    top: 600px;
  }
  50% {
    left: 10px;
    top: 500px;
  }
  60% {
    left: 10px;
    top: 400px;
  }
  70% {
    left: 10px;
    top: 300px;
  }
  80% {
    left: 10px;
    top: 200px;
  }
  90% {
    left: 10px;
    top: 100px;
  }
  100% {
    left: 10px;
    top: 0px;
  }
}

#balloons2 {
  position: absolute;
  animation: balloons2 20s;
  margin-right: 15px;
}
@keyframes balloons2 {
  0% {
    right: 10px;
    top: 1000px;
  }
  10% {
    right: 10px;
    top: 900px;
  }
  20% {
    right: 10px;
    top: 800px;
  }
  30% {
    right: 10px;
    top: 700px;
  }
  40% {
    right: 10px;
    top: 600px;
  }
  50% {
    right: 10px;
    top: 500px;
  }
  60% {
    right: 10px;
    top: 400px;
  }
  70% {
    right: 10px;
    top: 300px;
  }
  80% {
    right: 10px;
    top: 200px;
  }
  90% {
    right: 10px;
    top: 100px;
  }
  100% {
    right: 10px;
    top: 0px;
  }
}