#pi {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media (max-width: 599.99999px)
{
    #pi {
        flex-direction: column
    }
}
#pi #pizza {
    border: 1px solid #000;
}
#pi button {
    background-color: inherit;
    border: none;
    cursor: pointer;
    font-size: 28px;
    padding: 0;
    width: 32px
}
#pi fieldset {
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#pi .controls {
    text-align: center
}
#pi .range {
    margin: 0 auto 3rem;
    position: relative;
    width: 200px
}
#pi .range input {
    width: 100%
}
#pi .range output {
    background-color: #666;
    border-radius: 4px;
    color: #fff;
    font-size: smaller;
    left: 50%;
    padding: 2px 6px;
    position: absolute;
    transform: translateX(-50%)
}
#pi .range output::after {
    background-color: #666;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: -1px;
    width: 2px
}