@import url('https://fonts.googleapis.com/css?family=Crimson+Text');


@font-face {
  font-family: Skorzhen;
  src: url(./assets/fonts/FTY-SKORZHEN-NCV.ttf);
  font-weight: bold;
}

body, button {
    font-family: 'Crimson Text', serif;
    color: #38322F;
}

/* Header Elements*/

#header {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steamworks {
  width: 17vmax;
  max-width: 300px;
  min-width: 150px;
  float: left;
}

#title {
  font-family: Skorzhen;
  margin: 2vw;
  font-size: 1.75em;
}

#controls {
  margin-left: 15px;
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* Buttons */
.button {
  position: relative;
  border: none;
  display: inline;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background-color: #A77C3C;
}
.button:hover {
  background-color: #BA8A43;
}
.button:active {
  background-color: #C19656;
}
.button div {
  font-weight: bold;
  font-size: 20px;
  padding: 10px 15px 12px 15px;
  color: #fff;
}

/* Footer */
#footer {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#footer .button {
  font-weight: bold;
  font-size: 20px;
  padding: 10px 15px 12px 15px;
  margin: 5px;
}
#footer a {
  font-weight: normal;
  color: #fff;
  text-decoration: none;
}

#bingo {
  font-family: Skorzhen;
  width: 8vw;
  min-width: 130px;
  padding: .5vw;
}
#bingo div {
  padding: 10px 0px !important;
  font-size: 35px !important;
}

i.shine {
/* positioning */
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;

/* gradients */
  background: -moz-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%);/* FF3.6+ */
  background: -webkit-gradient(linear,left top, right top,color-stop(0%,rgba(255,255,255,0)),color-stop(1%,rgba(255,255,255,0.045)),color-stop(15%,rgba(255,255,255,0.25)),color-stop(30%,rgba(255,255,255,0.6)),color-stop(50%,rgba(255,255,255,0.85)),color-stop(70%,rgba(255,255,255,0.85)),color-stop(71%,rgba(255,255,255,0.8)),color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* IE10+ */
  background: linear-gradient(to right,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

/* forming the shine element play around with the width, skew and gradient to get different effects */
  height: 100%;
  transform: skew(-10deg,0deg);
  -webkit-transform: skew(-15deg,0deg);
  -moz-transform: skew(-10deg,0deg);
  -ms-transform: skew(-10deg,0deg);
  -o-transform: skew(-10deg,0deg);

/* animating it  */
  animation: move 2s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  -webkit-animation: move 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 1s;
  -moz-animation: move 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 1s;
  -ms-animation: move 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-delay: 1s;
  -o-animation: move 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-delay: 1s;
}
#shine1 {
  width: 15%;
}
#shine2 {
  margin-left: -12px;
  width: 20%;
}
@keyframes move {
  0% {left: 0; opacity: 0;}
  5% {opacity: 0.0}
  48% {opacity: 0.2}
  85% {opacity: 0.0}
  100% {left: 82%}
}
@-webkit-keyframes move {
  0% {left: 0; opacity: 0;}
  5% {opacity: 0.0}
  48% {opacity: 0.2}
  85% {opacity: 0.0}
  100% {left: 82%}
}
@-moz-keyframes move {
  0% {left: 0; opacity: 0;}
  5% {opacity: 0.0}
  48% {opacity: 0.2}
  85% {opacity: 0.0}
  100% {left: 82%}
}
@-ms-keyframes move {
  0% {left: 0; opacity: 0;}
  5% {opacity: 0.0}
  48% {opacity: 0.2}
  85% {opacity: 0.0}
  100% {left: 82%}
}
@-o-keyframes move {
  0% {left: 0; opacity: 0;}
  5% {opacity: 0.0}
  48% {opacity: 0.2}
  85% {opacity: 0.0}
  100% {left: 82%}
}

/* Board */
#board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 1.5em;
  text-align: center;
}

.row {
  display: flex;
  flex-direction: row;
}
#boardHeader > .tile {
  font-family: Skorzhen;
  font-size: 3em;
  border: none !important;
  margin-bottom: -10px;
  color: #62392D;
  padding: .5vw;
  width: 8vw;
  height: auto !important;
  min-width: 130px;
  min-height: 0px !important;
}
#boardHeader > .tile:hover {
  background-color: #fff;
}

/* Tiles */
input[type=checkbox] {
  display: none;
}

.tile {
  border: 2px solid #62392D;
  margin: .2vw;
}

label {
  display: block;
  width: 8vw;
  height: 8vw;
  min-width: 130px;
  min-height: 130px;
  padding: .5vw;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}

input[type=checkbox]:checked + div {
  background-color: #62392D;
  color: #fff;
}

div.tile:hover {
  background-color: #BA8A43;
}

.unselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}


#social-share {
  display: none;
  margin-top: 7px;
  margin-bottom: -12px;
}

.swal2-content #social-share {
  display: block;
}


/* Confetti. I can't believe this is for real. Based on COMPILED version of http://codepen.io/mikehobizal/pen/unvxa */
@-webkit-keyframes bang {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes bang {
  from {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes bang {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
#confetti {
  position: relative;
}

#confetti i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 3px;
  height: 5px;
  background: red;
  opacity: 0;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
}

/* looks better in SCSS */
#confetti i:nth-of-type(1) {
  -webkit-transform: translate3d(-58px, -53px, 0) rotate(136deg);
  -moz-transform: translate3d(-58px, -53px, 0) rotate(136deg);
  -ms-transform: translate3d(-58px, -53px, 0) rotate(136deg);
  -o-transform: translate3d(-58px, -53px, 0) rotate(136deg);
  transform: translate3d(-58px, -53px, 0) rotate(136deg);
  background: #ff0095;
}
#confetti i:nth-of-type(2) {
  -webkit-transform: translate3d(20px, -96px, 0) rotate(311deg);
  -moz-transform: translate3d(20px, -96px, 0) rotate(311deg);
  -ms-transform: translate3d(20px, -96px, 0) rotate(311deg);
  -o-transform: translate3d(20px, -96px, 0) rotate(311deg);
  transform: translate3d(20px, -96px, 0) rotate(311deg);
  background: #008cff;
}
#confetti i:nth-of-type(3) {
  -webkit-transform: translate3d(-89px, -99px, 0) rotate(121deg);
  -moz-transform: translate3d(-89px, -99px, 0) rotate(121deg);
  -ms-transform: translate3d(-89px, -99px, 0) rotate(121deg);
  -o-transform: translate3d(-89px, -99px, 0) rotate(121deg);
  transform: translate3d(-89px, -99px, 0) rotate(121deg);
  background: #ff0d00;
}
#confetti i:nth-of-type(4) {
  -webkit-transform: translate3d(-15px, -67px, 0) rotate(120deg);
  -moz-transform: translate3d(-15px, -67px, 0) rotate(120deg);
  -ms-transform: translate3d(-15px, -67px, 0) rotate(120deg);
  -o-transform: translate3d(-15px, -67px, 0) rotate(120deg);
  transform: translate3d(-15px, -67px, 0) rotate(120deg);
  background: #ff9900;
}
#confetti i:nth-of-type(5) {
  -webkit-transform: translate3d(39px, -93px, 0) rotate(330deg);
  -moz-transform: translate3d(39px, -93px, 0) rotate(330deg);
  -ms-transform: translate3d(39px, -93px, 0) rotate(330deg);
  -o-transform: translate3d(39px, -93px, 0) rotate(330deg);
  transform: translate3d(39px, -93px, 0) rotate(330deg);
  background: #04ff00;
}
#confetti i:nth-of-type(6) {
  -webkit-transform: translate3d(-29px, -92px, 0) rotate(326deg);
  -moz-transform: translate3d(-29px, -92px, 0) rotate(326deg);
  -ms-transform: translate3d(-29px, -92px, 0) rotate(326deg);
  -o-transform: translate3d(-29px, -92px, 0) rotate(326deg);
  transform: translate3d(-29px, -92px, 0) rotate(326deg);
  background: #ff3700;
}
#confetti i:nth-of-type(7) {
  -webkit-transform: translate3d(-5px, -65px, 0) rotate(222deg);
  -moz-transform: translate3d(-5px, -65px, 0) rotate(222deg);
  -ms-transform: translate3d(-5px, -65px, 0) rotate(222deg);
  -o-transform: translate3d(-5px, -65px, 0) rotate(222deg);
  transform: translate3d(-5px, -65px, 0) rotate(222deg);
  background: #a200ff;
}
#confetti i:nth-of-type(8) {
  -webkit-transform: translate3d(-52px, -54px, 0) rotate(119deg);
  -moz-transform: translate3d(-52px, -54px, 0) rotate(119deg);
  -ms-transform: translate3d(-52px, -54px, 0) rotate(119deg);
  -o-transform: translate3d(-52px, -54px, 0) rotate(119deg);
  transform: translate3d(-52px, -54px, 0) rotate(119deg);
  background: #ffc800;
}
#confetti i:nth-of-type(9) {
  -webkit-transform: translate3d(-35px, -93px, 0) rotate(69deg);
  -moz-transform: translate3d(-35px, -93px, 0) rotate(69deg);
  -ms-transform: translate3d(-35px, -93px, 0) rotate(69deg);
  -o-transform: translate3d(-35px, -93px, 0) rotate(69deg);
  transform: translate3d(-35px, -93px, 0) rotate(69deg);
  background: #e6ff00;
}
#confetti i:nth-of-type(10) {
  -webkit-transform: translate3d(14px, -70px, 0) rotate(281deg);
  -moz-transform: translate3d(14px, -70px, 0) rotate(281deg);
  -ms-transform: translate3d(14px, -70px, 0) rotate(281deg);
  -o-transform: translate3d(14px, -70px, 0) rotate(281deg);
  transform: translate3d(14px, -70px, 0) rotate(281deg);
  background: #ff8000;
}
#confetti i:nth-of-type(11) {
  -webkit-transform: translate3d(86px, -79px, 0) rotate(328deg);
  -moz-transform: translate3d(86px, -79px, 0) rotate(328deg);
  -ms-transform: translate3d(86px, -79px, 0) rotate(328deg);
  -o-transform: translate3d(86px, -79px, 0) rotate(328deg);
  transform: translate3d(86px, -79px, 0) rotate(328deg);
  background: #6a00ff;
}
#confetti i:nth-of-type(12) {
  -webkit-transform: translate3d(-46px, -58px, 0) rotate(177deg);
  -moz-transform: translate3d(-46px, -58px, 0) rotate(177deg);
  -ms-transform: translate3d(-46px, -58px, 0) rotate(177deg);
  -o-transform: translate3d(-46px, -58px, 0) rotate(177deg);
  transform: translate3d(-46px, -58px, 0) rotate(177deg);
  background: #00ff55;
}
#confetti i:nth-of-type(13) {
  -webkit-transform: translate3d(-1px, -86px, 0) rotate(85deg);
  -moz-transform: translate3d(-1px, -86px, 0) rotate(85deg);
  -ms-transform: translate3d(-1px, -86px, 0) rotate(85deg);
  -o-transform: translate3d(-1px, -86px, 0) rotate(85deg);
  transform: translate3d(-1px, -86px, 0) rotate(85deg);
  background: #ff00e1;
}
#confetti i:nth-of-type(14) {
  -webkit-transform: translate3d(87px, -68px, 0) rotate(283deg);
  -moz-transform: translate3d(87px, -68px, 0) rotate(283deg);
  -ms-transform: translate3d(87px, -68px, 0) rotate(283deg);
  -o-transform: translate3d(87px, -68px, 0) rotate(283deg);
  transform: translate3d(87px, -68px, 0) rotate(283deg);
  background: #ff00f7;
}
#confetti i:nth-of-type(15) {
  -webkit-transform: translate3d(-91px, -74px, 0) rotate(132deg);
  -moz-transform: translate3d(-91px, -74px, 0) rotate(132deg);
  -ms-transform: translate3d(-91px, -74px, 0) rotate(132deg);
  -o-transform: translate3d(-91px, -74px, 0) rotate(132deg);
  transform: translate3d(-91px, -74px, 0) rotate(132deg);
  background: #3700ff;
}
#confetti i:nth-of-type(16) {
  -webkit-transform: translate3d(-85px, -57px, 0) rotate(63deg);
  -moz-transform: translate3d(-85px, -57px, 0) rotate(63deg);
  -ms-transform: translate3d(-85px, -57px, 0) rotate(63deg);
  -o-transform: translate3d(-85px, -57px, 0) rotate(63deg);
  transform: translate3d(-85px, -57px, 0) rotate(63deg);
  background: #8800ff;
}
#confetti i:nth-of-type(17) {
  -webkit-transform: translate3d(65px, -74px, 0) rotate(289deg);
  -moz-transform: translate3d(65px, -74px, 0) rotate(289deg);
  -ms-transform: translate3d(65px, -74px, 0) rotate(289deg);
  -o-transform: translate3d(65px, -74px, 0) rotate(289deg);
  transform: translate3d(65px, -74px, 0) rotate(289deg);
  background: #3300ff;
}
#confetti i:nth-of-type(18) {
  -webkit-transform: translate3d(-24px, -89px, 0) rotate(324deg);
  -moz-transform: translate3d(-24px, -89px, 0) rotate(324deg);
  -ms-transform: translate3d(-24px, -89px, 0) rotate(324deg);
  -o-transform: translate3d(-24px, -89px, 0) rotate(324deg);
  transform: translate3d(-24px, -89px, 0) rotate(324deg);
  background: #00ffc8;
}
#confetti i:nth-of-type(19) {
  -webkit-transform: translate3d(47px, -93px, 0) rotate(103deg);
  -moz-transform: translate3d(47px, -93px, 0) rotate(103deg);
  -ms-transform: translate3d(47px, -93px, 0) rotate(103deg);
  -o-transform: translate3d(47px, -93px, 0) rotate(103deg);
  transform: translate3d(47px, -93px, 0) rotate(103deg);
  background: #0095ff;
}
#confetti i:nth-of-type(20) {
  -webkit-transform: translate3d(-36px, -72px, 0) rotate(360deg);
  -moz-transform: translate3d(-36px, -72px, 0) rotate(360deg);
  -ms-transform: translate3d(-36px, -72px, 0) rotate(360deg);
  -o-transform: translate3d(-36px, -72px, 0) rotate(360deg);
  transform: translate3d(-36px, -72px, 0) rotate(360deg);
  background: #51ff00;
}
#confetti i:nth-of-type(21) {
  -webkit-transform: translate3d(-79px, -88px, 0) rotate(215deg);
  -moz-transform: translate3d(-79px, -88px, 0) rotate(215deg);
  -ms-transform: translate3d(-79px, -88px, 0) rotate(215deg);
  -o-transform: translate3d(-79px, -88px, 0) rotate(215deg);
  transform: translate3d(-79px, -88px, 0) rotate(215deg);
  background: #ffc800;
}
#confetti i:nth-of-type(22) {
  -webkit-transform: translate3d(76px, -65px, 0) rotate(38deg);
  -moz-transform: translate3d(76px, -65px, 0) rotate(38deg);
  -ms-transform: translate3d(76px, -65px, 0) rotate(38deg);
  -o-transform: translate3d(76px, -65px, 0) rotate(38deg);
  transform: translate3d(76px, -65px, 0) rotate(38deg);
  background: #ff0022;
}
#confetti i:nth-of-type(23) {
  -webkit-transform: translate3d(24px, -99px, 0) rotate(26deg);
  -moz-transform: translate3d(24px, -99px, 0) rotate(26deg);
  -ms-transform: translate3d(24px, -99px, 0) rotate(26deg);
  -o-transform: translate3d(24px, -99px, 0) rotate(26deg);
  transform: translate3d(24px, -99px, 0) rotate(26deg);
  background: #33ff00;
}
#confetti i:nth-of-type(24) {
  -webkit-transform: translate3d(50px, -54px, 0) rotate(119deg);
  -moz-transform: translate3d(50px, -54px, 0) rotate(119deg);
  -ms-transform: translate3d(50px, -54px, 0) rotate(119deg);
  -o-transform: translate3d(50px, -54px, 0) rotate(119deg);
  transform: translate3d(50px, -54px, 0) rotate(119deg);
  background: #00ff91;
}
#confetti i:nth-of-type(25) {
  -webkit-transform: translate3d(-15px, -77px, 0) rotate(25deg);
  -moz-transform: translate3d(-15px, -77px, 0) rotate(25deg);
  -ms-transform: translate3d(-15px, -77px, 0) rotate(25deg);
  -o-transform: translate3d(-15px, -77px, 0) rotate(25deg);
  transform: translate3d(-15px, -77px, 0) rotate(25deg);
  background: #ff006f;
}
#confetti i:nth-of-type(26) {
  -webkit-transform: translate3d(58px, -82px, 0) rotate(353deg);
  -moz-transform: translate3d(58px, -82px, 0) rotate(353deg);
  -ms-transform: translate3d(58px, -82px, 0) rotate(353deg);
  -o-transform: translate3d(58px, -82px, 0) rotate(353deg);
  transform: translate3d(58px, -82px, 0) rotate(353deg);
  background: #00ffb3;
}
#confetti i:nth-of-type(27) {
  -webkit-transform: translate3d(-69px, -76px, 0) rotate(274deg);
  -moz-transform: translate3d(-69px, -76px, 0) rotate(274deg);
  -ms-transform: translate3d(-69px, -76px, 0) rotate(274deg);
  -o-transform: translate3d(-69px, -76px, 0) rotate(274deg);
  transform: translate3d(-69px, -76px, 0) rotate(274deg);
  background: #1e00ff;
}
#confetti i:nth-of-type(28) {
  -webkit-transform: translate3d(-47px, -67px, 0) rotate(82deg);
  -moz-transform: translate3d(-47px, -67px, 0) rotate(82deg);
  -ms-transform: translate3d(-47px, -67px, 0) rotate(82deg);
  -o-transform: translate3d(-47px, -67px, 0) rotate(82deg);
  transform: translate3d(-47px, -67px, 0) rotate(82deg);
  background: #00ffaa;
}
#confetti i:nth-of-type(29) {
  -webkit-transform: translate3d(-24px, -89px, 0) rotate(48deg);
  -moz-transform: translate3d(-24px, -89px, 0) rotate(48deg);
  -ms-transform: translate3d(-24px, -89px, 0) rotate(48deg);
  -o-transform: translate3d(-24px, -89px, 0) rotate(48deg);
  transform: translate3d(-24px, -89px, 0) rotate(48deg);
  background: #00ff4d;
}
#confetti i:nth-of-type(30) {
  -webkit-transform: translate3d(5px, -51px, 0) rotate(143deg);
  -moz-transform: translate3d(5px, -51px, 0) rotate(143deg);
  -ms-transform: translate3d(5px, -51px, 0) rotate(143deg);
  -o-transform: translate3d(5px, -51px, 0) rotate(143deg);
  transform: translate3d(5px, -51px, 0) rotate(143deg);
  background: #ff0044;
}
#confetti i:nth-of-type(31) {
  -webkit-transform: translate3d(-26px, -61px, 0) rotate(109deg);
  -moz-transform: translate3d(-26px, -61px, 0) rotate(109deg);
  -ms-transform: translate3d(-26px, -61px, 0) rotate(109deg);
  -o-transform: translate3d(-26px, -61px, 0) rotate(109deg);
  transform: translate3d(-26px, -61px, 0) rotate(109deg);
  background: #ffe100;
}
#confetti i:nth-of-type(32) {
  -webkit-transform: translate3d(79px, -51px, 0) rotate(358deg);
  -moz-transform: translate3d(79px, -51px, 0) rotate(358deg);
  -ms-transform: translate3d(79px, -51px, 0) rotate(358deg);
  -o-transform: translate3d(79px, -51px, 0) rotate(358deg);
  transform: translate3d(79px, -51px, 0) rotate(358deg);
  background: #ff00f2;
}
#confetti i:nth-of-type(33) {
  -webkit-transform: translate3d(-35px, -73px, 0) rotate(117deg);
  -moz-transform: translate3d(-35px, -73px, 0) rotate(117deg);
  -ms-transform: translate3d(-35px, -73px, 0) rotate(117deg);
  -o-transform: translate3d(-35px, -73px, 0) rotate(117deg);
  transform: translate3d(-35px, -73px, 0) rotate(117deg);
  background: #aaff00;
}
#confetti i:nth-of-type(34) {
  -webkit-transform: translate3d(-28px, -87px, 0) rotate(354deg);
  -moz-transform: translate3d(-28px, -87px, 0) rotate(354deg);
  -ms-transform: translate3d(-28px, -87px, 0) rotate(354deg);
  -o-transform: translate3d(-28px, -87px, 0) rotate(354deg);
  transform: translate3d(-28px, -87px, 0) rotate(354deg);
  background: yellow;
}
#confetti i:nth-of-type(35) {
  -webkit-transform: translate3d(-86px, -92px, 0) rotate(329deg);
  -moz-transform: translate3d(-86px, -92px, 0) rotate(329deg);
  -ms-transform: translate3d(-86px, -92px, 0) rotate(329deg);
  -o-transform: translate3d(-86px, -92px, 0) rotate(329deg);
  transform: translate3d(-86px, -92px, 0) rotate(329deg);
  background: #f2ff00;
}
#confetti i:nth-of-type(36) {
  -webkit-transform: translate3d(26px, -66px, 0) rotate(240deg);
  -moz-transform: translate3d(26px, -66px, 0) rotate(240deg);
  -ms-transform: translate3d(26px, -66px, 0) rotate(240deg);
  -o-transform: translate3d(26px, -66px, 0) rotate(240deg);
  transform: translate3d(26px, -66px, 0) rotate(240deg);
  background: #007bff;
}
#confetti i:nth-of-type(37) {
  -webkit-transform: translate3d(54px, -90px, 0) rotate(326deg);
  -moz-transform: translate3d(54px, -90px, 0) rotate(326deg);
  -ms-transform: translate3d(54px, -90px, 0) rotate(326deg);
  -o-transform: translate3d(54px, -90px, 0) rotate(326deg);
  transform: translate3d(54px, -90px, 0) rotate(326deg);
  background: #00ffd9;
}
#confetti i:nth-of-type(38) {
  -webkit-transform: translate3d(19px, -84px, 0) rotate(222deg);
  -moz-transform: translate3d(19px, -84px, 0) rotate(222deg);
  -ms-transform: translate3d(19px, -84px, 0) rotate(222deg);
  -o-transform: translate3d(19px, -84px, 0) rotate(222deg);
  transform: translate3d(19px, -84px, 0) rotate(222deg);
  background: red;
}
#confetti i:nth-of-type(39) {
  -webkit-transform: translate3d(20px, -57px, 0) rotate(186deg);
  -moz-transform: translate3d(20px, -57px, 0) rotate(186deg);
  -ms-transform: translate3d(20px, -57px, 0) rotate(186deg);
  -o-transform: translate3d(20px, -57px, 0) rotate(186deg);
  transform: translate3d(20px, -57px, 0) rotate(186deg);
  background: #ffdd00;
}
#confetti i:nth-of-type(40) {
  -webkit-transform: translate3d(73px, -66px, 0) rotate(73deg);
  -moz-transform: translate3d(73px, -66px, 0) rotate(73deg);
  -ms-transform: translate3d(73px, -66px, 0) rotate(73deg);
  -o-transform: translate3d(73px, -66px, 0) rotate(73deg);
  transform: translate3d(73px, -66px, 0) rotate(73deg);
  background: #2200ff;
}
#confetti i:nth-of-type(41) {
  -webkit-transform: translate3d(-66px, -66px, 0) rotate(199deg);
  -moz-transform: translate3d(-66px, -66px, 0) rotate(199deg);
  -ms-transform: translate3d(-66px, -66px, 0) rotate(199deg);
  -o-transform: translate3d(-66px, -66px, 0) rotate(199deg);
  transform: translate3d(-66px, -66px, 0) rotate(199deg);
  background: #ff00ae;
}
#confetti i:nth-of-type(42) {
  -webkit-transform: translate3d(10px, -87px, 0) rotate(238deg);
  -moz-transform: translate3d(10px, -87px, 0) rotate(238deg);
  -ms-transform: translate3d(10px, -87px, 0) rotate(238deg);
  -o-transform: translate3d(10px, -87px, 0) rotate(238deg);
  transform: translate3d(10px, -87px, 0) rotate(238deg);
  background: #ff1500;
}
#confetti i:nth-of-type(43) {
  -webkit-transform: translate3d(-3px, -50px, 0) rotate(131deg);
  -moz-transform: translate3d(-3px, -50px, 0) rotate(131deg);
  -ms-transform: translate3d(-3px, -50px, 0) rotate(131deg);
  -o-transform: translate3d(-3px, -50px, 0) rotate(131deg);
  transform: translate3d(-3px, -50px, 0) rotate(131deg);
  background: #ff4400;
}
#confetti i:nth-of-type(44) {
  -webkit-transform: translate3d(-18px, -58px, 0) rotate(305deg);
  -moz-transform: translate3d(-18px, -58px, 0) rotate(305deg);
  -ms-transform: translate3d(-18px, -58px, 0) rotate(305deg);
  -o-transform: translate3d(-18px, -58px, 0) rotate(305deg);
  transform: translate3d(-18px, -58px, 0) rotate(305deg);
  background: #0077ff;
}
#confetti i:nth-of-type(45) {
  -webkit-transform: translate3d(14px, -67px, 0) rotate(280deg);
  -moz-transform: translate3d(14px, -67px, 0) rotate(280deg);
  -ms-transform: translate3d(14px, -67px, 0) rotate(280deg);
  -o-transform: translate3d(14px, -67px, 0) rotate(280deg);
  transform: translate3d(14px, -67px, 0) rotate(280deg);
  background: #00d5ff;
}
#confetti i:nth-of-type(46) {
  -webkit-transform: translate3d(64px, -86px, 0) rotate(252deg);
  -moz-transform: translate3d(64px, -86px, 0) rotate(252deg);
  -ms-transform: translate3d(64px, -86px, 0) rotate(252deg);
  -o-transform: translate3d(64px, -86px, 0) rotate(252deg);
  transform: translate3d(64px, -86px, 0) rotate(252deg);
  background: #00ff99;
}
#confetti i:nth-of-type(47) {
  -webkit-transform: translate3d(-56px, -67px, 0) rotate(95deg);
  -moz-transform: translate3d(-56px, -67px, 0) rotate(95deg);
  -ms-transform: translate3d(-56px, -67px, 0) rotate(95deg);
  -o-transform: translate3d(-56px, -67px, 0) rotate(95deg);
  transform: translate3d(-56px, -67px, 0) rotate(95deg);
  background: #ee00ff;
}
#confetti i:nth-of-type(48) {
  -webkit-transform: translate3d(-75px, -71px, 0) rotate(306deg);
  -moz-transform: translate3d(-75px, -71px, 0) rotate(306deg);
  -ms-transform: translate3d(-75px, -71px, 0) rotate(306deg);
  -o-transform: translate3d(-75px, -71px, 0) rotate(306deg);
  transform: translate3d(-75px, -71px, 0) rotate(306deg);
  background: #e100ff;
}
#confetti i:nth-of-type(49) {
  -webkit-transform: translate3d(16px, -94px, 0) rotate(154deg);
  -moz-transform: translate3d(16px, -94px, 0) rotate(154deg);
  -ms-transform: translate3d(16px, -94px, 0) rotate(154deg);
  -o-transform: translate3d(16px, -94px, 0) rotate(154deg);
  transform: translate3d(16px, -94px, 0) rotate(154deg);
  background: #5500ff;
}
#confetti i:nth-of-type(50) {
  -webkit-transform: translate3d(-84px, -89px, 0) rotate(211deg);
  -moz-transform: translate3d(-84px, -89px, 0) rotate(211deg);
  -ms-transform: translate3d(-84px, -89px, 0) rotate(211deg);
  -o-transform: translate3d(-84px, -89px, 0) rotate(211deg);
  transform: translate3d(-84px, -89px, 0) rotate(211deg);
  background: #f200ff;
}