* {
    box-sizing: border-box;
}

body {
    background-color: black;
    color: white;
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

a {
    color: white;
}

main {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    /* border: 1px solid blue; */
}

.container {
    height: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid yellow; */
}

.divider {
    height: 5%;
}

.buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 100px;
    /* border: 1px solid red; */
}

.buttons button {
    font-size: 1.5rem;
}

.cup-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 100%;
    /* border: 1px solid green; */
}

#cup {
    filter: invert(100%) sepia(0%) saturate(7435%) hue-rotate(184deg) brightness(122%) contrast(114%);
    max-height: 100%;
    max-width: 100%;
    margin: 20px;

}

.hidden {
    display: none !important;
}

.face {
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";

    padding: 2%;
    border-radius: 5%;
    background-color: white;
    width: 30%;
    aspect-ratio: 1 / 1;
}

.dice-divider {
    width: 20%;
}

.pip {
    display: flex;
    width: 60%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: black;
    margin: auto
}

.pip:nth-child(2) {
    grid-area: b;
}

.pip:nth-child(3) {
    grid-area: c;
}

.pip:nth-child(4) {
    grid-area: d;
}

.pip:nth-child(5) {
    grid-area: e;
}

.pip:nth-child(6) {
    grid-area: f;
}

.pip:nth-child(odd):last-child {
    grid-area: g;
}