@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

* {
	font-family: 'Ubuntu', sans-serif;
}

div.title {
	width: vw100;
	margin: 60px 0;
}

div.title > h1 {
	text-align: center;
}

div.main {
	width: vw100;
	justify-content: space-evenly;
}

div.col {
	width: 30%;
}

div.main,
div.col,
div.col > div.result,
div.col div.left,
div.col div.right,
div.col div.player,
div.col div.action {
	display: flex;
}

div.col,
div.col > div.result,
div.col div.left,
div.col div.right {
	flex-direction: column;
	align-items: center
}

div.player {
	width: 70%;
}

div.col div.left {
	width: 30%;
}

div.col div.right {
	width: 70%;
}

div.col div.left > *,
div.col div.right > * {
	margin-bottom: 5px
}

div.col img {
	width: 70%;
	margin: 20px 0;
	border-radius: 10px;
	border: solid 1px #ddd;
	padding: 4px;
}

div.col div.result,
div.col div.action {
	width: 70%;
}

div.col div.result {
	margin-bottom: 30px;
}

div.col div.action {
	justify-content: space-evenly;
}

div.col div.action button {
	font-size: 20px;
}

div .confetti {
    width: 15px;
    height: 15px;
    background-color: #f2d74e;
    position: absolute;
    left: 50%;
    animation: confetti 5s ease-in-out -2s infinite;
    transform-origin: left top;
}
div.confetti:nth-child(1) {
    background-color: #f2d74e; left: 10%; animation-delay: 0;
}
div.confetti:nth-child(2) {
    background-color: #95c3de; left: 20%; animation-delay: -5s;
}
div.confetti:nth-child(3) {
    background-color: #ff9a91; left: 30%; animation-delay: -3s;
}
div.confetti:nth-child(4) {
    background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
}
div.confetti:nth-child(5) {
    background-color: #95c3de; left: 50%; animation-delay: -4s;
}
div.confetti:nth-child(6) {
    background-color: #ff9a91; left: 60%; animation-delay: -6s;
}
div.confetti:nth-child(7) {
    background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
}
div.confetti:nth-child(8) {
    background-color: #95c3de; left: 80%; animation-delay: -2s;
}
div.confetti:nth-child(9) {
    background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
}
div.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); }
}