style.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: 'Inconsolata', monospace;
	display: flex; 
	align-items: center; 
	justify-content: center; 
	height: 100%;
	background: #020100;
}
.container {
    /* margin:auto; */
    margin-top: 10%;
	border: 10px solid rgb(0, 240, 0);
	width: 27em;
	height: 27em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color:rgb(130, 211, 238);
	border-radius: 50%;
	background: rgb(0, 0, 0);
	box-shadow: 
		0 0 5px rgb(0, 240, 0),
		0 0 10px rgb(0, 240, 0),
		0 0 15px rgb(0, 240, 0);
}
.date-container{
    font-size: 200%;
}
.time {
	font-size: 75px;
	color:rgb(0, 240, 0);
}
.blink-colon {
	animation: blink 1s infinite linear;
}
@keyframes blink {
	0%, 100% {
		opacity: 1;
	}
	30% {
		opacity: 0.2;
	}
}
.date-container {
	margin-top: 6px;
	color: rgba(255,255,255,0.8);
}
@media only screen and (max-width: 300px) {
    .container{
        margin-top: 30%;
    }
  }