/** {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}*/


.button {
  margin: 20px auto;
  width: 120px;
  text-align: center;
  padding: 10px 20px;
  border-radius: 4px;
  background: #4caf50;
  cursor: pointer;
}

.confetti {
height: 100%;
overflow: hidden;
pointer-events: none;
position: absolute;
width: 100%;
}

.confetti__item {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    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);
    }
}