html {
	background-color: greenyellow;
}
canvas {
	padding: 5px 40px 10px 40px;
}
h1 {
	font-family: Verdana;
	font-size: 40px;
	margin: 0 0 20px 0;
}
h4 {
	font-size: 30px;
	margin: 0;
}
body {
    font-family: monospace;
    text-align: center;
    font-size: 20px;
    color: rgb(53, 47, 47);
}

#billboard {
    display: flex;
    width: 503px;
    min-height: 80px;
    margin: auto;
    margin-top: 20px;
}

#billboard div {
    margin: 2px;
    border-radius: 6px;
    border: 2px solid #9e9e9e;
    padding: 1em 2px 2px 2px;
}

#win, #loss {
    width: 20%;
    box-shadow:
    hsla(0, 0%, 0%, 0.3) 3px 4px 0px 0px;

}

#announcements {
    width: 60%;
    box-shadow:
    hsla(0, 0%, 0%, 0.3) 3px 4px 0px 0px;
}

.win-sequence {
    animation: celebrate 0.8s ease-out;
}

.loss-sequence {
    animation: mourn 0.8s ease-out;
}

@keyframes celebrate {
    0% {
        background-color: rgba(34, 248, 34, 0.7);
        font-size: 1em;
    }
    20% {
        background-color: rgba(214, 244, 20, 0.2);
    }
    40% {
        background-color: rgba(34, 248, 34, 0.7);
    }
    60% {
        background-color: rgba(214, 244, 20, 0.2);
        font-size: 1.1em;
    }
    80% {
        background-color: rgba(34, 248, 34, 0.7);
    }
    100% {
        background-color: rgba(214, 244, 20, 0.2);
        font-size: 1em;
    }
}

@keyframes mourn {
    0% {
        background-color: rgba(255, 0, 0, 0.8);
        /* font-size: 1em; */
    }
    50% {
        background-color: rgba(244, 199, 20, 0.446);
        font-size: 1.1em;
    }
    100% {
        background-color: rgba(255, 0, 0, 0.8);
        /* font-size: 1em; */
    }
}

footer {
    font-size: 0.7em;
    margin-top: 20px;
}

footer a {
    text-decoration: none;
}