@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

html,body {
    height: 100%;
}
body {
    background: #0f3854;
    background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
    background-size: 100%;
}

p {
    margin: 0;
    padding: 0;
}


.admin_url {
    display: flex;
    justify-content: center;
    align-items: center;

}


.text {
    list-style: none;
    margin: 0;
    padding: 0;
	font-size: 20px;
}


.clock {
	position: absolute;
	width: 300px;
	height: 300px;
	left: calc(50% - 150px);
	top: calc(50% - 150px);
	background-color: white;
	border-radius: 50%;
	border: 8px solid black;
	box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.2);
}

.hour-hand {
	position: absolute;
	height: 100px;
	width: 7px;
	background-color: black;
	left: calc(50% - 3.5px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 30;
}

.hour-hand::after {
	content: "";
	width: 7px;
	height: 10px;
	background-color: black;
	position: absolute;
	bottom: -10px;
	z-index: 30;
}

.minute-hand {
	position: absolute;
	height: 140px;
	width: 4px;
	background-color: black;
	left: calc(50% - 2px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 20;
}

.minute-hand::after {
	content: "";
	width: 4px;
	height: 15px;
	background-color: black;
	position: absolute;
	bottom: -15px;
	z-index: 20;
}

.second-hand {
	position: absolute;
	height: 140px;
	width: 2px;
	background-color: red;
	left: calc(50% - 1px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 10;
}

.second-hand::after {
	content: "";
	width: 2px;
	height: 15px;
	background-color: red;
	position: absolute;
	bottom: -15px;
	z-index: 10;
}

.circle {
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: black;
	left: calc(50% - 6px);
	top: calc(50% - 6px);
	border-radius: 50%;
	z-index: 40;
}

.circle::after {
	content: "";
	width: 6px;
	height: 6px;
	background-color: #B0BEC5;
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 3px);
	top: calc(50% - 3px);
}

.digits {
	list-style: none;
	padding: 0;
	margin: 0;
}

.digit {
	position: absolute;
	width: 24px;
	height: 24px;
	font-size: 24px;
	font-family: Roboto, sans-serif;
	text-align: center;
	line-height: 24px;
}

.digit:nth-child(1) {
	top: 8%;
	right: 24%;
}

.digit:nth-child(2) {
	top: 24%;
	right: 8%;
}

.digit:nth-child(3) {
	right: 5px;
	top: calc(50% - 12px);
}

.digit:nth-child(4) {
	bottom: 24%;
	right: 8%;
}

.digit:nth-child(5) {
	bottom: 8%;
	right: 24%;
}

.digit:nth-child(6) {
	left: calc(50% - 12px);
	bottom: 5px;
}

.digit:nth-child(7) {
	bottom: 8%;
	left: 24%;
}

.digit:nth-child(8) {
	bottom: 24%;
	left: 8%;
}

.digit:nth-child(9) {
	left: 5px;
	top: calc(50% - 12px);
}

.digit:nth-child(10) {
	top: 24%;
	left: 8%;
}

.digit:nth-child(11) {
	top: 8%;
	left: 24%;
}

.digit:nth-child(12) {
	top: 5px;
	left: calc(50% - 12px);
}