* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body {
    position: relative;
    overflow: hidden;
    background-color: rgb(32, 140, 146);
    font-size: 1.5em;
}

button {
    cursor: pointer;
}

.choice-box {
    transition: all ease 0.2s;
}

.choice-value {
    animation: fadeInGrow 0.4s ease-out forwards;
}

.fade-in-grow {
    animation: fadeInGrow 0.4s ease-out forwards;
}

.confetti {
    transition: all ease-in 1s
}

@keyframes fadeInGrow {
    from {
        opacity: 0;
        transform: scale(0.0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* -- Utility Classes -- */
/* ---- width/height ---- */
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* ---- position ---- */
.pos-abs { position: absolute; }
.pos-rel { position: relative; }

/* ---- display/flex ---- */
.flex { display: flex; }
.nowrap { flex-wrap: nowrap; }

.dir-col { flex-direction: column; }
.dir-col-rev { flex-direction: column-reverse; }
.dir-row { flex-direction: row; }
.dir-row-rev { flex-direction: row-reverse; }

.just-center { justify-content: center; }
.just-start { justify-content: flex-start; }
.just-end { justify-content: flex-end; }
.just-around { justify-content: space-around; }
.just-even { justify-content: space-evenly; }
.just-between { justify-content: space-between; }
.just-stretch { justify-content: stretch; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }