.tutorial {
    position: absolute;
    bottom: 50px;
    width: 50vw;
    display: flex;
    gap: 1em;
    flex-direction: column;
    border-radius: var(--bdr-rad-600);
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.4);
    padding: var(--pad-500);
    background: rgba(var(--clr-primary-container-rgb) / 0.75);
    color: var(--clr-on-primary-container);
    justify-content: space-between;
    font-size: var(--fs-800);
    font-family: var(--ff-accent);
    transition: bottom 0.5s ease-in-out;
    backdrop-filter: blur(6.5px);
    -webkit-backdrop-filter: blur(2.6px);
    text-align:center;
}
.tutorial .clickAnywhere {
    font-family: var(--ff-brand);
    color: var(--clr-accent);
    text-align:center;
}
.letsPlay {
    align-self: center;
    padding: 1em;
}
.tutorial[data-step="0"] {
    bottom: 50vh;
}
.tutorial[data-state="commitment"],
.tutorial[data-state="predict"],
.tutorial[data-state="wager"],
.tutorial[data-state="scoring"],
.tutorial[data-state="attrQuestionOne"],
.tutorial[data-state="attrQuestionTwo"],
.tutorial[data-state="roundQuestionOne"],
.tutorial[data-state="roundQuestionTwo"] {
    bottom: 40vh;
}
.tutorial[data-state="endTask"] {
    bottom: 20vh;
}