.clock {
    border-radius: 50%;
    background: #fff url(zdjecia/zegar.svg)  no-repeat center;
    background-size: 88%;
    width: 200px;
    height: 200px;
    position: relative;
    float: left;
    margin-top: 2%;
    margin-left: 15%;
}

.clock:after {
    background: #000;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5%;
    height: 5%;
    z-index: 10;
}
.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hours-container{
    animation: rotate 43200s infinite linear;
}
.minutes-container{
    animation: rotate 3600s infinite linear;
}
.seconds-container{
    animation: rotate 60s infinite linear;
}
.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}
.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}
.seconds{
    background: #000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
@keyframes rotate { 100% { transform: rotateZ(360deg); } }
main{
    float: left;
    width: 95%;
    min-height: 1500px;
    margin: 2.5%;
    text-align: center;
    background-image:linear-gradient(to bottom, #0B2325, #010112)
}