body{margin:0;padding:0;font-family:verdana,Sans-serif}.head1{background-color:#458af1;display:flex;align-items:center;justify-content:center;height:50px;font-size:20px;color:#fff;font-weight:600;letter-spacing:.4px;width:100%}.head2{display:flex;flex-direction:row;padding:15px}.foot{position:fixed;bottom:0;width:100%}.foot1{background-color:#458af1;display:flex;align-items:center;justify-content:center;font-size:16px;height:50px;color:#fff;letter-spacing:.4px}.container{border:1px solid #fff;position:relative;width:310px;height:300px;margin:0 auto;margin-top:20px}.canvas{position:absolute;top:0}.confetti{visibility:hidden;width:15px;height:15px;background-color:#f2d74e;position:absolute;left:50%;animation:confetti 5s ease-in-out -1s infinite;transform-origin:left top}.confetti:nth-child(1){background-color:#34a853;left:20%;animation-delay:-5s}.confetti:nth-child(3){background-color:#ff9a91;left:30%;animation-delay:-3s}.confetti:nth-child(4){background-color:#f2d74e;left:40%;animation-delay:-2.5s}.confetti:nth-child(5){background-color:#458af1;left:50%;animation-delay:-4s}.confetti:nth-child(6){background-color:#ff9a91;left:60%;animation-delay:-6s}.confetti:nth-child(7){background-color:#34a853;left:70%;animation-delay:-1.5s}.confetti:nth-child(8){background-color:#458af1;left:80%;animation-delay:-2s}.confetti:nth-child(9){background-color:#ff9a91;left:90%;animation-delay:-3.5s}.confetti:nth-child(10){background-color:#f2d74e;left:100%;animation-delay:-2.5s}@keyframes confetti{0%{transform:rotateZ(15deg) rotateY(0deg) translate(0,0)}25%{transform:rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh)}50%{transform:rotateZ(15deg) rotateY(720deg) translate(5vw,60vh)}75%{transform:rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh)}100%{transform:rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh)}}