body { 
   /* background: #777;
    /* url('http://paper-backgrounds.com/textureimages/2012/05/white-concrete-wall-texture-background-hd.jpg') ; */
}

section {
	width: 80vmin;    height: 80vmin;
	margin: auto;
	background:  url('Pingouin.webp') center center; /* #fff;*/
	border: 3vmin solid #000;
	border-radius: 50%;
	margin-top: 3vmin;

	box-shadow: /* les ombres */
	inset 40px 40px 90px rgba(0,0,255,.2),
	inset 10px 10px 30px rgba(0,128,128,.5), 
	15px 15px 15px rgba(0,255,0,.4),
	10px 10px 10px rgba(255,0,0,.4);  /* 40px 40px 60px rgba(0,0,0,.4); */

    position: relative;
    z-index: 1;
}

section:before { /*cercle interieur */
    content: '';
    width: 95%;    height: 95%;
    border-radius: 50%;
    display: block;
    background: transparent;
    border: 2vmin solid white;
}

/* highlight at top left of black outline */
section:after {
    content: '';
    width: 105%;
    height: 105%;
    border-radius: 50%;
    display: block;
    background: transparent;
    position: absolute;
    top: -2.5%;    left: -2.5%; /* top: -2.5%;    left: -2.5%; */
	box-shadow: -3px -3px 9px rgba(255,255,255,.8); 
}

.label {
    position: absolute;
    top: 15vmin; 
    left: 40%;			/* centrage texte */
    font-size: 6vmin; color: blue solid;  /* font-size: 3vmin; font-family: arial; */
	border: 0;
}

.date {    position: absolute;
    top: 35vmin;
    left: 75%;			/* centrage texte */
    font-size: 4vmin; color: black solid;  /* font-family: arial; */
	padding: 3px; border-radius: 5px;
	border:1px solid #777; 
	background: #77a; color: #fff;
}

.iframe { border: 0px; }

.hourhand,
.secondhand,
.minutehand {
    width: 25vmin;    height: 2vmin; /* heure 		width: 25vmin;    height: 2vmin; */
    background: #000;
    position: absolute;
    top: 40vmin;
    left: calc(50% - 3.5vmin);
    z-index: 2;
    transform-origin: 16%;
}

.hourhand:after,
.secondhand:after,
.minutehand:after {
	content: '';
	background: #000;
	width: 5vmin;     height: 5vmin;
	border-radius: 50%;
	z-index: 3;
	position: absolute;
	top: -1.5vmin;    left: 1.5vmin;
}

.hourhand {
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
    /* box-shadow: -10px 0px 10px rgba(0,0,0,.4);  */
}

.minutehand {
	width: 35vmin;    height: 1vmin; /* minute		width: 40vmin;    height: 1vmin; top: 40.5vmin;*/
	top: 40.75vmin;
	transform-origin: 10%;
	border-top-right-radius: 30%;
 	border-bottom-right-radius: 30%;
    /* box-shadow: -10px 10px 10px rgba(0,0,0,.4); */
}

.minutehand:before {
	content: '';
	width: 4.5vmin;         height: 4.5vmin;
        border-radius: 50%;
        z-index: 99;							/*  z-index: 99; */
        position: absolute;
        top: -1.7vmin;
        left: 1.7vmin;
        box-shadow: -2px -2px 7px rgba(255,255,255,.6);
    }

.minutehand:after {
    top: -2vmin;
}

.secondhand {
    width: 38vmin;  height: .5vmin; /* seconde		width: 35vmin;  height: .5vmin; top: 40vmin; */
    top: 40vmin; 
    transform: rotate(-2deg);
    transform-origin: 11.5%;
    /* box-shadow: -10px -10px 10px rgba(0,0,0,.4);
    color: red; */
}
.secondhand:after {
    top: -2.25vmin; 
}

.hour12,
.hour1,
.hour2,
.hour3,
.hour4,
.hour5 {
    height: 1vmin;    width: 64vmin;	/* width: 55vmin;*/
    background: transparent;
    border-left: 3vmin solid #777; 	/*border-left: 7vmin solid #777; */
    border-right: 3vmin solid #777;
    transform: translate(-50%, -50%);
/*     transform-origin: right bottom; */
    top: 50%;    left: 50%;
    position: absolute;
}

.hour3 { transform: rotate(90deg) translate(0, 34vmin); }

.hour1 { transform: rotate(120deg) translate(17vmin, 30vmin); }

.hour2 { transform: rotate(150deg) translate(29vmin, 18vmin); }

.hour4 { transform: rotate(210deg) translate(30vmin, -17vmin); }

.hour5 { transform: rotate(240deg) translate(17vmin, -30vmin); }