design, jquery and new text in description

fullscreen-style.css

@@ -1,23 +1,41 @@
+@font-face{
+    font-family: '7Digital';
+    src: url('digital-7\ \(mono\).ttf');
+    font-weight: normal;
+    font-style: monospace;
+}
 body{
     background-color: #000;
     color: #fff;
     font-family: 'Heebo', sans-serif;
+    height: 100vh;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    margin: 0 8px;
 }
 #prog{
     width: 100%;
 }
-#time{
+#title{
-    font-size: 10em;
-    width: 100%;
-    height: 100%;
     position: fixed;
     top: 0;
-    left: 0;
+    width: calc(100% - 16px);
+}
+#time{
+    font-size: 20em;
+    width: calc(100% - 16px);
+    height: 100%;
+    font-family: '7Digital';
     display: flex;
-    align-items: center;
+    align-items: baseline;
     align-content: center;
     justify-content: center;
     overflow: auto;
+    cursor: pointer;
+}
+#time-left-msec{
+    font-size: 4rem;
 }
 #time-left-readable{
     text-align: center;
@@ -25,9 +43,8 @@ body{
 }
 #bar{
     position: fixed;
-    left: 0;
     bottom: 0;
-    width: 100%;
+    width: calc(100% - 16px);
 }
 #button-to-fullscreen, #button-fullscreen-exit{
     position: absolute;
@@ -40,7 +57,7 @@ body{
 #button-to-fullscreen:hover, #button-fullscreen-exit:hover{
     color: #fff;
 }
-#button-to-fullscreen, #decsription, footer{
+#button-to-fullscreen, #description, footer{
     display: none;
 }
 #title{

index.html

@@ -27,19 +27,20 @@
 	</div>
 	<div id="counter">
 		<h1 id="title">До смерти 32-битных систем осталось</h1>
-		<div id="time"></div>
+		<div id="time"><span id="time-left" onclick="msecDisplaySwitcher()"></span><span id="time-left-msec"></span></div>
 		<div id="bar">
 			<p id="time-left-readable" onclick="ReadableTimerSwitcher()"></p>
 			<progress id="prog" max="2147483647"></progress>
 		</div>
 	</div>
-	<div id="decsription">
+	<div id="description">
 		<h3>О чём этот сайт?</h3>
 		<p>Проблема 2038 года в вычислительной технике — ожидаемые сбои в программном обеспечении накануне 19 января
 			2038 года. Данная проблема затронет программы и системы, в которых используется представление времени по
 			стандарту POSIX (UNIX-время), которое представляет собой количество секунд, прошедшее с полуночи 1 января
 			1970 года. Такое представление времени — это стандарт для Unix-подобных операционных систем (из-за
-			повсеместного использования языка Си).</p>
+			повсеместного использования языка Си). Самая поздняя дата, которая может быть представлена таким форматом
+			в стандарте POSIX — это 03:14:07, вторник, 19 января 2038 года по Всемирному времени (UTC).</p>
 		<p>Сейчас значение Unix timestamp равно <span id="timestamp"></span>.</p>
 		<p>Для проблемы 2038 года не существует простого решения для существующих комбинаций операционных систем и
 			прикладного программного обеспечения. Изменение определения типа time_t на 64 бита нарушит бинарную
@@ -63,7 +64,7 @@
 		<hr>
 		<p>Автор сайта: <a href="https://t.me/dan63047">dan63047</a></p>
 	</footer>
-	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
 	<script type="text/javascript" src="script.js"></script>
 </body>
 

script.js

@@ -1,29 +1,41 @@
 const maxtimestamp = 2147483647;
 var readable_timer_mode = 0;
+var msec_display = true;
 
 function ReadableTimerSwitcher(){
     readable_timer_mode++
     if(readable_timer_mode > 2){readable_timer_mode = 0}
 }
 addEventListener("fullscreenchange", (event) => {
-    console.log("lol")
     if(document.fullscreen){
         $("#style").attr("href", "fullscreen-style.css")
     }else{
         $("#style").attr("href", "style.css")
     }
 })
+function msecDisplaySwitcher(){
+    if(msec_display){
+        msec_display = false
+        $("#time-left-msec").css("display", "none");
+    }else{
+        msec_display = true
+        $("#time-left-msec").css("display", "unset");
+    }
+}
 function Cycle() {
     var timestamp = Date.now() / 1000,
         left = maxtimestamp - timestamp,
+        lmsec = Math.floor(left * 1000) % 1000,
         t = Math.floor(left);
-    $("#time").html(t.toLocaleString('ru'));
+    $("#time-left").html(t.toLocaleString('ru'));
+    $("#time-left-msec").html("." + ("00" + lmsec).slice(-3))
     $("#prog").val(timestamp);
     $("#timestamp").html(Math.trunc(timestamp).toLocaleString('ru'));
     if (left < 60 && readable_timer_mode != 2) { $("#time-left-readable").css("display", "none") }
     if (left <= 0) {
         clearInterval(c);
-        $("#time").html("0");
+        $("#time-left").html("0");
+        $("#time-left-msec").html("000")
         $("#title").html("С͓̪̩̳͕͍̄ͮͤ̚̚м̦͎͉̝̋̄е̥͕̫̫̱̱͓̞̾р̞̤̰͖̤̟̫͓̏̍͒ͣ͐͂̚ͅт̗̥̲̩̣̯̹̅ͅь̙͍̟̟̮̩̦̹ͩͤ");
     }
     switch (readable_timer_mode){

style.css

@@ -1,3 +1,9 @@
+@font-face{
+    font-family: '7Digital';
+    src: url('digital-7\ \(mono\).ttf');
+    font-weight: normal;
+    font-style: monospace;
+}
 body{
     background-color: #000;
     color: #fff;
@@ -9,6 +15,11 @@ body{
 #time{
     text-align: center;
     font-size: 10em;
+    font-family: '7Digital';
+    cursor: pointer;
+}
+#time-left-msec{
+    font-size: 2rem;
 }
 #time-left-readable{
     text-align: center;