/* ================================================================================ 1. Overview ================================================================================ Pure Digital CSS, Swiss made, clock. No JavaScript, no HTML(*). Not even for the text. Looks something like this, but something happens every second! | --\ /-\ /-\ /-\ /-\ | | | | | | | | | | | /-/ | | | | | | | | | | | | | | | | | | | \-- \-/ \-/ \-/ \-/ See it in action at: https://quaxio.com/pure_css_digital_clock.html ================================================================================ 2. Unfrequently Asked Questions ================================================================================ Q: Why? A: Because. Q: Why build a digital clock? A: An analog pure css clock is banal at best. Q: Swiss made, how so? A: I was born in Switzerland. By induction, this clock is Swiss made. QED. Q: Why the asterisk after HTML. A: (*) Browser's implicit HTML elements are used. I also have to explicitly set the tag because most browsers don't support Link headers and stylesheets. See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link https://bugs.chromium.org/p/chromium/issues/detail?id=692359 Q: Clock always starts at 12:00:00. Is this project a secret tribute to microwaves? A: Perhaps. Q: Thank you. This is cool, I learned something new about css! A: You are welcome. It's great if this little hack enlightens people. Q: Did anyone help debug or provide feedback along the way? A: Yes. Credits to Erling (http://alf.nu/) for his help! Q: Ok, how does this work? A: This kind of LCD display is called a 7-segment display. Each digit is split in seven segments. Depending on which segments are dark or light, the result looks like a digit between 0 and 9. In this hack, I used CSS animations to animate borders in a very specific way, resulting in the appearance of a digital clock. I need two HTML elements per digit. Q: How do you avoid using any HTML? A: Browsers automatically create implicit HTML nodes when a document is bare. In my case, I set the tag and get implicit , , and tags. This might not seem enough but I can use ::before and ::after selectors, resulting in exactly the 12 nodes I need. Q: Why do you set content: ""? A: Without setting content, ::before and ::after nodes are invisible. Q: Why do you set display: block? A: Without setting the display attribute, html, head, and link are invisible. Q: Why do you set border: 1px solid #fff? A: Safari doesn't animate attributes which haven't previously been set. Q: What's the clip-path? A: CSS borders provide a natural bevel which lines up with how 7-segment displays are supposed to look. I used the clip-path to get a similar bevel effect on the outer corners. Q: Why do you set box-sizing: border-box? A: It solves a pixel rounding issue with Safari. I use vw, vh, and vmin to make the clock look good and centered irrespective of the screen size. This can cause rounding issues since a box might land on the boundary of two pixels. CSS doesn't offer a ton of control when it comes to pixel rounding, but box-sizing seems to work ¯\_(ツ)_/¯. Q: Tell me more about seven segment displays? A: I drew the following diagram and associated mapping. I then converted the mapping to CSS transformations. AA F B F B GG E C E C DD 0 1 2 3 4 5 6 7 8 9 A: 1 0 1 1 0 1 1 1 1 1 B: 1 1 1 1 1 0 0 1 1 1 C: 1 1 0 1 1 1 1 1 1 1 D: 1 0 1 1 0 1 1 0 1 1 E: 1 0 1 0 0 0 1 0 1 0 F: 1 0 0 0 1 1 1 0 1 1 G: 0 0 1 1 1 1 1 0 1 1 Q: Did you craft this CSS file by hand? A: Yes. I wanted to avoid https://xkcd.com/1319/. A nice side-effect is having some nice spacing and comments in here. Q: Can I also get paid for crafting these kinds of hacks? A: Absolutely, my employer is hiring! https://careers.squareup.com/ Just don't tell anyone what kind of useless stuff I make 🤫. Q: Anything else? A: Check out my blog at https://quaxio.com/ for lots of other content, including random hacks. */ html, html::before, html::after, head, head::before, head::after, link, link::before, link::after, body, body::before, body::after { position:absolute; display: block; content: ""; border: 1px solid #fff; /* solves animation issue with Safari */ background-color: #fff; width: 9.5vmin; height: 9.5vmin; margin: 0; box-sizing: border-box; /* solves rounding issue with Safari */ } /* Hours */ html { left: calc((100vw - 83vmin)/2); top: calc((100vh - 19vmin)/3); clip-path: polygon( 0 1vmin, 1vmin 0, 9vmin 0, 10vmin 1vmin, /* h */ 13vmin 1vmin, 14vmin 0, 22vmin 0, 23vmin 1vmin, /* h */ 30vmin 1vmin, 31vmin 0, 39vmin 0, 40vmin 1vmin, /* m */ 43vmin 1vmin, 44vmin 0, 52vmin 0, 53vmin 1vmin, /* m */ 60vmin 1vmin, 61vmin 0, 69vmin 0, 70vmin 1vmin, /* s */ 73vmin 1vmin, 74vmin 0, 82vmin 0, 83vmin 1vmin, /* s */ 83vmin 18vmin, 82vmin 19vmin, 74vmin 19vmin, 73vmin 18vmin, /* s */ 70vmin 18vmin, 69vmin 19vmin, 61vmin 19vmin, 60vmin 18vmin, /* s */ 53vmin 18vmin, 52vmin 19vmin, 44vmin 19vmin, 43vmin 18vmin, /* m */ 40vmin 18vmin, 39vmin 19vmin, 31vmin 19vmin, 30vmin 18vmin, /* m */ 23vmin 18vmin, 22vmin 19vmin, 14vmin 19vmin, 13vmin 18vmin, /* h */ 10vmin 18vmin, 9vmin 19vmin, 1vmin 19vmin, 0 18vmin, /* h */ 0 19.1vmin, 100vw 19.1vmin, 100vw 100vh, 0 100vh); /* text */ animation-duration: 43200s; animation-name: most_significant_hour_top; animation-iteration-count: infinite; } html::before { white-space: pre; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; content: "\a\a\a\a\a Pure Digital CSS, \1f1e8\1f1ed Swiss made, clock. No JavaScript, no HTML(*). Not even for this text.\a\a This page is best viewed at noon or midnight.\a Peek at css source file for commentary (https://quaxio.com/pure_css_digital_clock.css)."; left: -1vmin; top: 8.5vmin; animation-duration: 43200s; animation-name: most_significant_hour_bottom; animation-iteration-count: infinite; line-height: 3vmin; font-size: 2vmin; } html::after { left: 12vmin; top: -1vmin; animation-duration: 43200s; animation-name: least_significant_hour_top; animation-iteration-count: infinite; } head { left: 12vmin; top: 8.5vmin; animation-duration: 43200s; animation-name: least_significant_hour_bottom; animation-iteration-count: infinite; } /* Minutes */ head::before { left: 16vmin; top: -10vmin; animation-duration: 3600s; animation-name: most_significant_min_sec_top; animation-iteration-count: infinite; } head::after { left: 16vmin; top: -0.5vmin; animation-duration: 3600s; animation-name: most_significant_min_sec_bottom; animation-iteration-count: infinite; } link { left: 29vmin; top: -10vmin; animation-duration: 600s; animation-name: least_significant_min_sec_top; animation-iteration-count: infinite; } link::before { left: -1vmin; top: 8.5vmin; animation-duration: 600s; animation-name: least_significant_min_sec_bottom; animation-iteration-count: infinite; } /* Seconds */ link::after { left: 16vmin; top: -1vmin; animation-duration: 60s; animation-name: most_significant_min_sec_top; animation-iteration-count: infinite; } body { left: 59vmin; top: 8.5vmin; animation-duration: 60s; animation-name: most_significant_min_sec_bottom; animation-iteration-count: infinite; } body::before { left: 12vmin; top: -10vmin; animation-duration: 10s; animation-name: least_significant_min_sec_top; animation-iteration-count: infinite; } body::after { left: 12vmin; top: -0.5vmin; animation-duration: 10s; animation-name: least_significant_min_sec_bottom; animation-iteration-count: infinite; } /* Keyframes */ /* from 12 -> 01 -> 02 -> 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12 we derive: 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1 */ @keyframes most_significant_hour_top { 0% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 8.332% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 8.333% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 83.332% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 83.333% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 100% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } } @keyframes most_significant_hour_bottom { 0% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 8.332% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 8.333% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 83.332% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 83.333% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 100% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } } /* from 12 -> 01 -> 02 -> 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12 we derive: 2, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2 */ @keyframes least_significant_hour_top { 0% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 8.332% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 8.333% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 16.666% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 16.667% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 24.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 25% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 33.332% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 33.333% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 41.666% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 41.667% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 49.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 50% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 58.332% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 58.333% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 66.666% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 66.667% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 74.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 75% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 83.332% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 83.333% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 91.666% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 91.667% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 99.999% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 100% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } } @keyframes least_significant_hour_bottom { 0% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 8.332% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 8.333% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 16.666% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 16.667% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 24.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 25% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 33.332% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 33.333% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 41.666% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 41.667% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 49.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 50% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 58.332% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 58.333% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 66.666% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 66.667% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 74.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 75% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 83.332% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 83.333% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 91.666% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 91.667% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 99.999% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 100% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } } /* 0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 0 */ @keyframes most_significant_min_sec_top { 0% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 16.666% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 16.667% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 33.332% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 33.333% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 49.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 50% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 66.666% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 66.667% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 83.332% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 83.333% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 99.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 100% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } } @keyframes most_significant_min_sec_bottom { 0% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 16.666% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 16.667% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 33.332% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 33.333% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 49.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 50% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 66.666% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 66.667% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 83.332% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 83.333% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 99.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 100% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } } /* 0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 0 */ @keyframes least_significant_min_sec_top { 0% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 9.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } 10% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 19.999% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 20% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 29.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 30% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 39.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #f1f1f1; } 40% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 49.999% { border-top: 1vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 50% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 59.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 60% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 69.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 70% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 79.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 80% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 89.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 90% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 99.999% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #000; border-left: 1vmin solid #000; } 100% { border-top: 1vmin solid #000; border-right: 1vmin solid #000; border-bottom: 0.5vmin solid #f1f1f1; border-left: 1vmin solid #000; } } @keyframes least_significant_min_sec_bottom { 0% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 9.999% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 10% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 19.999% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 20% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 29.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #f1f1f1; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 30% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 39.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 40% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 49.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 50% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 59.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 60% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 69.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 70% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 79.999% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #f1f1f1; border-left: 1vmin solid #f1f1f1; } 80% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 89.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } 90% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 99.999% { border-top: 0.5vmin solid #000; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #f1f1f1; } 100% { border-top: 0.5vmin solid #f1f1f1; border-right: 1vmin solid #000; border-bottom: 1vmin solid #000; border-left: 1vmin solid #000; } }