* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

:root {
 font-family: "Anta", sans-serif;
 font-size: 20px;
 --mainBackground: #6bc5a7;
 --clockFaceColor: #202124;
 --numberColor: rgba(203, 224, 48, 0.667);
 --borderColor: #0865f0;
 --gradientBackground: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
}

body {
 /* background: var(--mainBackground);
 background: var(--gradientBackground); */
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 min-height: 100vh;
 overflow: hidden;
 background-image: url('clock-3222267_640.jpg');
 background-size: cover;
}

.digitalClock {
 margin-top: 20px;
 min-width: 60%;
 padding: 0 10px;
 background-color: var(--clockFaceColor);
 border: 2px solid var(--borderColor);
 border-radius: 5px;
 color: var(--numberColor);
 text-align: center;
}

.clock {
 position: relative;
 width: 60vmin;
 height: 60vmin;
 background-color: var(--clockFaceColor);
 border-radius: 10%;
 border: 4px solid var(--borderColor);
 -webkit-box-shadow: 0 0 10px 10px rgba(0, 0, 0, .7);
         box-shadow: 0 0 10px 10px rgba(0, 0, 0, .7);

}


.clock__name {
 position: absolute;
 left: 50%;
 top: 30%;
 -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
         transform: translateX(-50%);
}

.clock__number {
 --rotation: 0;
 position: absolute;
 width: 100%;
 height: 100%;
 font-size: 2rem;
 font-weight: 600;
 text-align: center;
 -webkit-transform: rotate(var(--rotation));
     -ms-transform: rotate(var(--rotation));
         transform: rotate(var(--rotation))
}

.clock__span {
 display: block;
 color: var(--numberColor);
 text-shadow: 0 0 3px var(--numberColor);
}

.clock__number--one {
 --rotation: 30deg;

}

.clock__span--1 {
 -webkit-transform: rotate(-30deg);
     -ms-transform: rotate(-30deg);
         transform: rotate(-30deg);
}

.clock__number--two {
 --rotation: 60deg;
}

.clock__span--2 {
 -webkit-transform: rotate(-60deg);
     -ms-transform: rotate(-60deg);
         transform: rotate(-60deg);
}

.clock__number--three {
 --rotation: 90deg;
}

.clock__span--3 {
 -webkit-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
         transform: rotate(-90deg);
}

.clock__number--four {
 --rotation: 120deg;
}

.clock__span--4 {
 -webkit-transform: rotate(-120deg);
     -ms-transform: rotate(-120deg);
         transform: rotate(-120deg);
}

.clock__number--five {
 --rotation: 150deg;
}

.clock__span--5 {
 -webkit-transform: rotate(-150deg);
     -ms-transform: rotate(-150deg);
         transform: rotate(-150deg);
}

.clock__number--six {
 --rotation: 180deg;
}

.clock__span--6 {
 -webkit-transform: rotate(-180deg);
     -ms-transform: rotate(-180deg);
         transform: rotate(-180deg);
}

.clock__number--seven {
 --rotation: 210deg;
}

.clock__span--7 {
 -webkit-transform: rotate(-210deg);
     -ms-transform: rotate(-210deg);
         transform: rotate(-210deg);
}

.clock__number--eight {
 --rotation: 240deg;
}

.clock__span--8 {
 -webkit-transform: rotate(-240deg);
     -ms-transform: rotate(-240deg);
         transform: rotate(-240deg);
}

.clock__number--nine {
 --rotation: 270deg;
}

.clock__span--9 {
 -webkit-transform: rotate(-270deg);
     -ms-transform: rotate(-270deg);
         transform: rotate(-270deg);
}

.clock__number--ten {
 --rotation: 300deg;
}

.clock__span--10 {
 -webkit-transform: rotate(-300deg);
     -ms-transform: rotate(-300deg);
         transform: rotate(-300deg);
}

.clock__number--eleven {
 --rotation: 330deg;
}

.clock__span--11 {
 -webkit-transform: rotate(-330deg);
     -ms-transform: rotate(-330deg);
         transform: rotate(-330deg);
}

.clock__number--twelve {
 --rotation: 0deg;
}

.clock__span--12 {
 -webkit-transform: rotate(-0deg);
     -ms-transform: rotate(-0deg);
         transform: rotate(-0deg);
}

.clock__hand {
 --rotation: 0;
 position: absolute;
 bottom: 50%;
 left: 50%;
 -webkit-transform: translateX(-50%) rotate(calc(var(--rotation)*1deg));
     -ms-transform: translateX(-50%) rotate(calc(var(--rotation)*1deg));
         transform: translateX(-50%) rotate(calc(var(--rotation)*1deg));
 /* NOTE: dla javaScript ustawia rotation co sekundę i wskakuje tutaj*/
 -webkit-transform-origin: bottom;
     -ms-transform-origin: bottom;
         transform-origin: bottom;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 z-index: 10;
 background-color: black;
}

.clock::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 background-color: black;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 z-index: 11;
}

.clock__hand--second {
 width: 4px;
 height: 45%;
 background-color: red;
}

.clock__hand--hour {
 width: 10px;
 height: 40%;
 background-color: black;

}

.clock__hand--minute {
 width: 5px;
 height: 45%;
 background-color: black;
}

.digitalClock {
 max-width: 30%;
 text-shadow: 0px 0px 2px rgb(225, 225, 214);
}

.digitalClock {
 width: 50%;
}

@media(min-width:1024px) {
 body {
  background-image: url('clock-3222267_1920.jpg');
 }

 .digitalClock {
  min-width: 40%;
 }

}