body.watchface {
    width: 90%;
    max-width: 1200px;
}

body.watchface .layout {
    display: flex;
    flex-direction: row;
    column-gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    min-height: calc(100vh - 87px);
}

body.watchface .watch-wrapper {
    text-align: center;
    margin-top: 80px;
    min-width: 20%;
}

.watch {
    display: inline-block;
    background: url('bobby-silver.png');
    background-size: cover;
    width: 244px;
    height: 350px;
}

.watch.-round {
    background: url('time-round-red-14.png');
    background-size: cover;
    width: 294px;
    height: 390px;
}

.watch.-half {
    width: 122px;
    height: 175px;
}

.watch.-two-third {
    width: 162.66666667px;
    height: 233.33333333px;
}

.watch.-half.-round {
    width: 147px;
    height: 195px;
}

.watch.-two-third.-round {
    width: 196px;
    height: 260px;
}

.watch .watchface {
    margin: 37.2% 20.5%;
    width: 59%;
    height: 48%;
    border-radius: 7%;
}
.watch.-round .watchface {
    margin: 36.2% 19.38%;
    width: 61.22449%;
    height: 46.153846%;
    border-radius: 0;
}

.watchface-control-panel .control-panel-value {
    font-family: monospace;
    width: 20px;
    display: inline-block;
    text-align: right;
}

.watchface-control-panel input[type=range] {
    vertical-align: bottom;
}

body.watchface article {
    max-width: 60ch;
}

/* Index */

.watchfaces a {
    /*padding: 3%;*/
    display: inline-block;
}
.watchfaces .watch {
    margin: 10px;
}

.watchfaces a:hover {
    outline: solid 1px;
}