ClockFace-font/style.css

:root {
    --foreground: #666;
    --accent: #333;
    --light-accent: #eee;
    --mid-accent: #aaa;
    --background: #fff;
    --link: #08c;
    --link-active: #058;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
a:focus {
    outline: thin dotted var(--accent);
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
a:hover,
a:active {
    outline: 0;
}
body {
    margin: 30pt;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    color: var(--foreground);
    background-color: var(--background);
}
a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    color: var(--link-active);
    text-decoration: none;;
}
.row {
    margin-left: -20px;
    *zoom: 1;
}
.row:before,
.row:after {
    display: table;
    content: "";
    line-height: 0;
}
.row:after {
    clear: both;
}
.panel {
    float: left;
    min-height: 1px;
    margin: 20px;
    padding: 10px;
    border: 1pt;
    border-color: var(--light-accent);
    border-style: solid;
    border-radius: 10px;
    width: 5em;
}
.container {
    width: 50em;
    margin-right: auto;
    margin-left: auto;
    *zoom: 1;
}
.container:before,
.container:after {
    display: table;
    content: "";
    line-height: 0;
}
.container:after {
    clear: both;
}
small {
    font-size: 85%;
}
h1 {
    letter-spacing: -5.8pt;
    font-size: 400%;
    margin: 12pt 0 30pt 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    color: var(--foreground));
    text-rendering: optimizelegibility;
    line-height: 40px;
}
.chroma-crawl {
    text-shadow:
        4px 0 #00FFFF35,
        -4px 0 #FF000035;
}
body {
    margin-top: 90px;
}
.subhead {
    margin: 1em 0em;
    font-weight: 100;
    font-size: 200%;
}
.tech-info {
    font-weight: 200;
    margin: 1em 0em;
    font-size: 70%;
    font-family: monospace;
}
.header {
    border-bottom: 1px solid #ddd;
    text-align: right;
}
.footer {
    color: var(--mid-accent);
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}
.footer a {
    color: var(--mid-accent);
    text-decoration: none;
}
.demo-icon {
    display: block;
    font-family: "ClockFace";
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-variant: normal;
    font-size: 230%;
    margin: 10pt;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.i-code, .i-name {
    text-align: center;
    font-size: 80%;
    display: block;
}
.i-code {
    opacity: 0.3;
}
#pagetime {
    font-family: "ClockFace";
    font-size: 100pt;
    margin: 50pt 0;
}