#container{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: left;
  
}

 	.diamond {
  display: inline-block;
  background: linear-gradient(to bottom, rgba(171, 220, 255,1) 0%, rgba(3, 150, 255,1) 100%);
  
  height: 150px;
  width: 150px;
  font-size: 2px;
  padding: 2px;
  color: white;
  margin-right: 1px;
  margin-left: 1px;
  animation: roll 7s infinite;
  transform: rotate(30deg);
  opacity: .7;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


body, html {
  height: 100%;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-2 {
  display: inline-block;
  background: linear-gradient(to bottom, rgba(253, 235, 113,1) 0%, rgba(248, 216, 0,1) 100%);
  height: 150px;
  width: 150px;
  font-size: 5px;
  padding: 5px;
  color: white;
  margin-right: 1px;
  margin-left: 1px;
  animation: roll 7s infinite;
  transform: rotate(30deg);
  opacity: .7;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


body, html {
  height: 100%;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
}