/* Layout */
:root{
    --horloge:#000;
    --background: url(https://www.musictruth.com/wp-content/uploads/2016/12/morning-coffee-video-background.jpg);
    --écriture: #fff;

}


body{
    background-image: var(--background);
    background-position: center;
    background-size: cover;
}

.main {
    display: flex;
    padding: 2em;
    height: 90vh;
    justify-content: center;
    align-items: middle;
}

.switchTheme{
    cursor: pointer;
    background-color:var(--horloge);
    color: var(--écriture);
    width: 145px;
    text-align: center;
    padding: 16px;
    font-size: 19px;
    font-weight: bold;
    border-radius: 11px;
    box-shadow: 0 9px #999;
}
.switchTheme:active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }


.clockbox,
#clock {
    width: 100%;
}

/* Clock styles */
.circle {
    fill: none;
    stroke: var(--horloge);
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.mid-circle {
    fill: var(--horloge);
}
.hour-marks {
    fill: none;
    stroke: var(--horloge);
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.hour-arm {
    fill: none;
    stroke: var(--horloge);
    stroke-width: 17;
    stroke-miterlimit: 10;
}

.minute-arm {
    fill: none;
    stroke: var(--horloge);
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.second-arm {
    fill: none;
    stroke: var(--horloge);
    stroke-width: 4;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second {
    transform-origin: 300px 300px;
    /* transition: transform .5s ease-in-out; */
}