I am creating a website in html. What I want to do decrease the size of the hour, minute and second counter, but keep the size of the day, month and year counters. Splitting the 2 into separate id's doesn't seem to work and only shows the day, month and year. Here's my code:
<html>
<head><title>My website</title>
<style type=text/css>
.clock {background-color: 000000; text-align: center; margin: 2px 0px 0px 1190px; font-size: 30px; position: fixed; border-radius: 10px; color: #fff; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; border: 5px solid white;}
div {margin: 2px;}
body {background-color: 0d0d0d; font-family: "Vibur", sans-serif;}
</style>
</head>
<body>
<p id="date" class="clock"></p>
<script>
setInterval(function(){
date = new Date();
sekundy = date.getSeconds();
if (sekundy<10) sekundy = "0"+sekundy;
minuty = date.getMinutes();
if (minuty<10) minuty = "0"+minuty;
godziny = date.getHours()
if (godziny<10) godziny = "0"+godziny;
dzien = date.getDay();
data = date.getDate();
miesiac = date.getMonth();
rok = date.getFullYear();
document.getElementById('date').innerHTML = data+"."+((miesiac+1)%12)+"."+rok+"<br>"+godziny+" : "+minuty+" : "+sekundy;
},1000);
</script>
</body>
</html>