body{margin:0px;padding:0px;font-family:"Verdana", Sans-serif;} .head1{background-color:#458af1;display:flex;align-items:center;justify-content:center;height:50px;font-size:20px;color:white;font-weight:600;letter-spacing:0.4px;width:100%;} .head2{display:flex;flex-direction:row;padding:15px;} .foot{position:fixed;bottom:0px;width:100%;} .foot1{background-color:#458af1;display:flex;align-items:center;justify-content:center;font-size:16px;height:50px;color:white;letter-spacing:0.4px;} .container{border:6px solid #0400ff;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);}}