@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

* {
   box-sizing: border-box;
   overflow: hidden;
}

body {
   background-color: #0f3460;
   font-family: 'Orbitron', sans-serif;
}

span {
   margin-top: 24px;
}

span, a {
   color: #fecd1a;
   font-size: 18px;
   font-family: 'Orbitron', sans-serif;
}

#main {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.clock-container {
   box-shadow: 1px 1px 5px #065c6f;
   background-color: #1a1a2e;
   color: #fecd1a;
   width: 660px;
   height: auto;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 1rem;
}

.time {
   font-size: 3.5rem;
   letter-spacing: 10px;
   text-shadow: 0.1px 0.1px 6px #fecd1a;
   margin-top: 0;
}

@media(max-width: 768px) {
   .clock-container {
      width: 400px;
   }

   .time {
      font-size: 1.5rem;
   }

   .date {
      font-size: .7rem;
   }
}