/*
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}
*/
/*
body
{
	display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #091921;
}
*/

/* Класс для круглой рамки */
.clockround 
{
	background: #091921;
    border-radius: 100px; 	  /* Радиус скругления */	
    border: 10px solid green;   /* Параметры рамки */	
	/* border: 16px solid #91921; */
    /*box-shadow: 0 0 7px #666;*/ /* Параметры тени	*/
	box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
                inset 0 -15px 15px rgba(255,255,255,0.05),
                0 15px 15px rgba(0,0,0,0.3),
                inset 0 15px 15px rgba(0,0,0,0.3);
}


.clock
{
	/* Оригинальный размер циферблата */
    /* 
		width: 350px;
		height: 350px;
	*/
	width: 150px;
	height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
	
	
    /* background: url(cifferblatt.png); */
    /* background-size: cover; */
	
    /* border: 16px solid #91921; */
	
    /* border-radius: 50%; */
	/*
    box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
                inset 0 -15px 15px rgba(255,255,255,0.05),
                0 15px 15px rgba(0,0,0,0.3),
                inset 0 15px 15px rgba(0,0,0,0.3);
	*/
}
.clock:before
{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec
{
    position: absolute;
}
.clock .hour, .hr
{
 /* Размер квадрата под часовую стрелку */
 /* оригинальный размер */
 /* width: 160px; */
 width: 100px;
 /* высота должна быть равна ширине */
 /* оригинальный размер */
 /* height: 160px; */
 height: 100px;
}
.clock .min, .mn
{
 /* Размер квадрата под минутную стрелку */
 /* оригинальный размер */
 /* width: 190px; */
 width: 120px;
 /* высота должна быть равна ширине */
 /* оригинальный размер */
 /* height: 190px; */
 height: 120px;
}

.clock .sec, .sc
{
 /* Размер квадрата под секундную стрелку */
 /* оригинальный размер */
 /* width: 230px;  */
 width: 130px; 
 /* оригинальный размер */
 /* height: 230px; */
 height: 130px;
}

.hr, .mn, .sc
{
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    position: absolute;
    border-radius: 50%;
}
.hr:before
{
	content: '';
    position: absolute;
	/* Ширина стрелки */
    width: 8px;
	/* Длина стрелки от центра */
	/* Оригинальный размер */
    /* height: 80px; */
	height: 50px;
	
	/* Цвет стрелки */
    background: #ff105e;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.mn:before
{
	content: '';
    position: absolute;
	/* Ширина стрелки */
    width: 4px;
	/* Длина стрелки от центра */
	/* Оригинальный размер */
    /* height: 90px; */	
    height: 80px;
    background: #fff;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}
.sc:before
{
	content: '';
    position: absolute;
	/* Ширина стрелки */
    width: 2px;
	/* Длина стрелки от центра */
	/* Оригинальный размер */
    /* height: 150px; */	
    height: 90px;
	
	/* Цвет стрелки */
    background: #fa8e47;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

span.mylight
{
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  /* Оригинальная величина-процентная */
  /* width: 9%; */
  /* Для сайта нужно установить пиксельную величину */
  width: 70px;
  height: 4px;
  z-index: 25px;
  background: transparent;  
  transform-origin: left;
  animation: animate 3s linear infinite;
}

span.mylight:after
{
  content:'';
  position: absolute;
  width: 8px;
  /* Оринальная ширина огонька */
  height: 25px; 
  border-radius: 100%;
  /* Оригинальный цвет огонька */
  /* background: purple; */
  background: yellow;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 20px blue;
}

@keyframes animate
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);  
  }
}