.frame {
    --frame-size: 30vmin;
    --shadow-color: rgba(0, 0, 0, .15);
    --shadow-size: 10px;

    background-color: #bbb;
    border: solid calc(var(--frame-size) / 10) #e3e3e3;
    border-bottom-color: #fff;
    border-radius: 2px;
    border-top-color: #d9d9d9;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25) inset, 0 calc(var(--shadow-size) / 2) var(--shadow-size) calc(var(--shadow-size) / 2) var(--shadow-color);
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    text-align: center;
    /* height: 100%; */
    line-height: 0;
}

.frame:before {
    border-radius: 2px;
    bottom: calc(var(--frame-size) / 15 * -1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25) inset;
    content: "";
    left: calc(var(--frame-size) / 15 * -1);
    position: absolute;
    right: calc(var(--frame-size) / 15 * -1);
    top: calc(var(--frame-size) / 15 * -1);
}

.frame:after {
    border-radius: 2px;
    bottom: calc(var(--frame-size) / 12 * -1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
    content: "";
    left: calc(var(--frame-size) / 12 * -1);
    position: absolute;
    right: calc(var(--frame-size) / 12 * -1);
    top: calc(var(--frame-size) / 12 * -1);
}

.frame.black {
    border-color: #333;
    border-bottom-color: #555;
    border-top-color: #2c2c2c;
}

.frame.brown {
    border-color: #635035;
    border-bottom-color: #8d7b61;
    border-top-color: #493b28;
}

.frame.green {
    border-color: hsl(162, 30%, 30%);
    border-bottom-color: hsl(162, 24%, 40%);
    border-top-color: hsl(163, 31%, 20%);
}

.frame.blue {
    border-color: hsl(190, 50%, 46%);
    border-bottom-color: hsl(190, 50%, 51%);
    border-top-color: hsl(190, 50%, 44%);
    padding: 1px;
    background-color: hsl(190, 50%, 44%);
}


@media (prefers-color-scheme: dark) {

    .frame {
        border-color: #333;
        border-bottom-color: #555;
        border-top-color: #2c2c2c;
        background-color: #333;
        --shadow-color: rgba(0, 0, 0, .15) !important;
    }

}