@media (min-width: 768px) {
  .button {
    /*margin:20px auto;*/
    width:350px;
    text-align:center;
    border-radius:4px;
    background:#000000;
    cursor:pointer;
    color:white;
    font-size:19px;
  }
}

@media (min-width: 576px) {
  .button {
    margin:20px auto;
    width:350px;
    text-align:center;
    border-radius:4px;
    background:#000000;
    cursor:pointer;
    color:white;
    font-size:19px;
  }
}

@media (min-width: 300px) {
  .button {
    margin:20px auto;
    width:250px;
    text-align:center;
    border-radius:4px;
    background:#000000;
    cursor:pointer;
    color:white;
    font-size:19px;
  }
}

.button:hover {
  transform:scale(1.4);
}

.confetti {
  height:100%;
  left:0;
  overflow:hidden;
  pointer-events:none;
  position:fixed;
  top:0;
  width:100vw;
  z-index:100;
}

.confetti__item {
  animation-duration:3s;
  animation-iteration-count:1;
  animation-timing-function:linear;
  height:5px;
  left:50vw;
  position:absolute;
  top:-4vh;
  width:10px;
}

.confetti__item--animation1 {
  animation-name:confetti1;
}

.confetti__item--animation2 {
  animation-name:confetti2;
}

.confetti__item--animation3 {
  animation-name:confetti3;
}

.confetti__item--animation4 {
  animation-name:confetti4;
}

.confetti__item--animation5 {
  animation-name:confetti5;
}

.confetti__item--animation6 {
  animation-name:confetti6;
}

.confetti__item--animation7 {
  animation-name:confetti7;
}

.confetti__item--animation8 {
  animation-name:confetti8;
}

.confetti__item--animation9 {
  animation-name:confetti9;
}

.confetti__item--colour1 {
  background:#fcc85b;
}

.confetti__item--colour2 {
  background:#eee5ed;
}

.confetti__item--colour3 {
  background:#fef673;
}

.confetti__item--colour4 {
  background:#b8a480;
}

.confetti__item--colour5 {
  background:#c50a20;
}

@keyframes confetti1 {
  0% {
    top:-4vh;
    transform:rotateX(0deg);
  }
  100% {
    top:110vh;
    transform:rotateX(3600deg);
  }
}

@keyframes confetti2 {
  0% {
    top:-4vh;
    transform:translateX(0) rotateX(0deg);
  }
  100% {
    top:110vh;
    transform:translateX(200px) rotateX(3600deg);
  }
}

@keyframes confetti3 {
  0% {
    top:-4vh;
    transform:translateX(0) rotateX(0deg);
  }
  100% {
    top:110vh;
    transform:translateX(-200px) rotateX(3600deg);
  }
}

@keyframes confetti4 {
  0% {
    top:-4vh;
    transform:rotateY(0deg);
  }
  100% {
    top:110vh;
    transform:rotateY(3600deg);
  }
}

@keyframes confetti5 {
  0% {
    top:-4vh;
    transform:translateX(0) rotateY(0deg);
  }
  100% {
    top:110vh;
    transform:translateX(200px) rotateY(3600deg);
  }
}

@keyframes confetti6 {
  0% {
    top:-4vh;
    transform:translateX(0) rotateY(0deg);
  }
  100% {
    top:110vh;
    transform:translateX(200px) rotateY(3600deg);
  }
}

@keyframes confetti7 {
  0% {
    top:-4vh;
    transform:rotateZ(0deg);
  }
  100% {
    top:110vh;
    transform:rotateZ(3600deg);
  }
}

@keyframes confetti8 {
  0% {
    top:-4vh;
    transform:translateX(0) rotateZ(0deg);
  }
  100% {
    top:110vh;
    transform:translateX(200px) rotateZ(3600deg);
  }
}

@keyframes confetti9 {
  0% {
    top:-4vh;
    transform:translateX(0) rotateZ(0deg);
  }
  100% {
    top:110vh;
    transform:translateX(-200px) rotateZ(3600deg);
  }
}

* {
  box-sizing:border-box;
}