$width: 200px;
$height: 80px;

*, *::before, *::after {
    box-sizing: border-box;
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    padding: 0.25rem;
    border-radius: 30px;
    color: white;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    text-align: center;
    font-weight: 400;
    text-shadow: 0 2px 2px rgba(0,0,0,0.25);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}


.statText {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

/* Sleep Type Badge Styling */
.dozing {
    background-color: #fcdc5e;
}

.snoozing {
    background-color: #4ce8ed;
}

.slumbering {
    background-color: #4588fb;
}

/* Speciality Badge Styling */
.berries {
    background-color: #24d86b;
}

.ingredients {
    background-color: #fdbe4d;
}

.skills {
    background-color: #47a0fc;
}

.all {
    background-color: #fc7992;
}
