D3 analog clock from Eric Bullington

google-type.css

body { margin: 0; padding: 0; zoom: 1; }
h1, h2, p { margin: 0; padding: 0; }

.strike { text-decoration: line-through; }

.avatar img { width: 30px; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.caption { margin: 0 0 60px 20px; }
.caption a { font: 14px/16px 'Unica One', Helvetica, Arial, sans-serif; letter-spacing: .1em; color: #999; text-transform: uppercase; text-decoration: none; }
.caption a:hover { background-color: #ddd; }

.code {
  background: red;
  padding: 3px;
  color: black;
}

form {
  text-align: center;
}

input {
  display:block;
}

.container { width: 960px; margin: 0 auto; }

.opentype {
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

.section-intro h1 { font: 75px/68px 'Abril Fatface', Georgia, serif; text-transform: uppercase; color: #693; margin: 200px 0 90px 0; text-align: center; }
.section-intro .small { font: 30px/32px 'Playfair Display', Georgia, serif; letter-spacing: .06em; margin-left: 30px; display: block; }
.section-intro h1 em { display: block; font-style: normal; }
.section-intro h1 i { text-transform: lowercase; letter-spacing: 0; color: #7a6; }
.section-intro .divider { width: 30px; padding: 30px 0 0 0; border-top: 1px solid #999; margin: 30px auto 0 auto; }
.section-intro .wrapper { width: 100%; text-align: center; margin: 0 auto 120px auto; }
.section-intro .colophon { width: 300px; display: inline-block; vertical-align: top; text-align: left; margin: 0 7px 30px 10px; }
.section-intro p { color: #999; font: 14px/20px 'Alegreya', Georgia, serif; margin: 0 auto 10px auto; max-width: 460px; }
.section-intro .caption { margin-top: 180px; }
.section-intro a { color: #000; text-decoration: none; }
.section-intro a:hover { background-color: #ddd; }

.section-gnat-bull { background: url(../images/man-on-the-moon.jpg) no-repeat; background-size: cover; padding: 90px 0 100px;}
.section-gnat-bull h2 { font: 70px/68px 'Playfair Display', Georgia, serif; color: #fff; text-transform: uppercase; margin: 0 0 60px 20px; }
.section-gnat-bull p { font: 16px/30px 'Fauna One', Georgia, serif; max-width: 540px; color: #fff; margin: 0 0 12px 20px; }
.section-gnat-bull .avatar img { margin: 0 0 10px 20px; }
.section-gnat-bull .caption { margin: 0 0 40px 20px; color: #eee; }
.section-gnat-bull .caption a { color: #eee; }
.section-gnat-bull .caption a:hover { background-color: #0cf; }

.section-two-bags { background: #ddd9d1 url(../images/architecture.png) no-repeat center; background-size: cover; height: 600px; }
.section-two-bags h2 { font: 80px/66px 'Fugaz One', serif; text-transform: uppercase; color: #817a74; margin: 0 0 30px 20px; opacity: .6; }
.section-two-bags h2 i { font-family:'Oleo Script', serif; font-style: normal;}
.section-two-bags p { font: 17px/28px 'Monda', Arial, sans-serif; color: #817a74; width: 380px; margin-left: 250px; }
.section-two-bags .caption { color: #999; float: left; width: 200px; margin: 4px 0 20px 20px; }

.section-oak { padding: 30px 20px 200px 20px; }
.section-oak .container { text-align: center; }
.section-oak .caption { margin-bottom: 0; text-align: left; }
.section-oak h2 { font: 30px/30px 'Unica One', sans-serif; text-transform: uppercase; text-align: center; color: #c31; margin: 20px 20px 30px; }
.section-oak p { font: 24px/36px 'Vollkorn', serif; color: #333; width: 460px; text-align: justify; margin: 0 auto;}
.section-oak .oak-leaf { margin-top: 60px; }

.section-rivers {background: url(../images/indigo-sea.jpg) no-repeat center; background-size: cover; padding: 40px 20px 80px 20px; }
.section-rivers .container { width: 100%; min-height: 400px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.section-rivers h2 {font: 32px/42px 'Open Sans', sans-serif; font-weight: 800; text-transform: uppercase; color: #29232D;text-align: left; letter-spacing: 1px;padding: 20px 20px 0 20px;}
.section-rivers p {font: 18px/27px 'Gentium Basic', serif;color: #fff; text-align: left;padding: 20px 20px 0 20px; max-width: 500px;}
.section-rivers .caption { margin-bottom:5px; text-align: left; color: #fff; }
.section-rivers .caption a {color: #fff;}
.section-rivers .avatar { margin-left: 20px; }

/* Number of columns: 8 */
/* Percentage width of a single column: 12.5% */
/* Base unit of measurement: 20px */
.section-crow-pitcher {    background-color: rgba(241, 90, 36, 1); padding: calc(2 * 20px); }
.section-crow-pitcher h2 { color: white; font-family: 'Questrial', sans-serif; font-size: 14px; letter-spacing: 6px; line-height: 1.8em; margin-bottom: calc(4 * 20px); margin-top: calc(2 * 20px); text-align: center; text-transform: uppercase; }
.section-crow-pitcher h2 span {    display: inline-block; outline: 1px solid white; padding: 1em; }
.section-crow-pitcher .container {    width: 100%; }
.section-crow-pitcher .container p { font-family: 'Old Standard TT', serif; font-size: 24px; margin-bottom: calc(4 * 20px); }
.section-crow-pitcher .container p.drop-p { }
.section-crow-pitcher em { color: white; display: block; font-family: 'Old Standard TT', serif; font-size: 24px; text-align: center; margin-bottom: calc(4 * 20px); }
.section-crow-pitcher ul { font-family: 'Old Standard TT', serif; font-size: 14px; list-style-type: none; margin-bottom: calc(2 * 20px); padding: 0; text-align: center; }
.section-crow-pitcher li { line-height: 2.2em; }
.section-crow-pitcher li.label { font-family: 'Questrial', sans-serif; letter-spacing: 6px; text-transform: uppercase; }
.section-crow-pitcher hr { width: 5%; border: 1px solid black; margin-bottom: calc(2 * 20px); }
.section-crow-pitcher a { color: black;    text-decoration: none; }
.section-crow-pitcher a:hover {    border-bottom: 1px solid black; }

/* Styles for Astronomer */

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg);  }
  to { -webkit-transform: rotate(360deg);  }
}
.section-astronomer { background: #38202e url(../images/space.jpg) no-repeat; background-size: cover; padding: 90px 0 100px; overflow: hidden; }
.section-astronomer .container { position: relative; }
.section-astronomer .stars { position: absolute; left: -50%; background: url(../images/stars.png); display: block; width: 1500px; height: 800px; top:0;
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         40s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
    z-index: 100;
}
.section-astronomer h2 { font: 50px/50px 'Megrim', Georgia, serif; color: #fff; text-transform: uppercase; margin: 0 auto 40px auto; text-align: center; border-bottom: solid 1px rgba(255, 255, 255, .5); padding-bottom: 40px; width: 80%;}
.section-astronomer p { font: 12px/30px 'Roboto Slab', Georgia, serif; width: 80%; color: #fff; margin: 0 auto 12px auto; border-bottom: solid 1px rgba(255, 255, 255, .5); padding-bottom: 30px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    letter-spacing: 0.03em;
    }
.section-astronomer .avatar img { margin: 0 0 10px 20px; position: relative; z-index: 101;}
.section-astronomer .caption { margin: 0 0 40px 20px; color: #eee; position: relative; z-index: 102;}
.section-astronomer .caption a { color: #eee; }
.section-astronomer .caption a:hover { background-color: #e45546; }

.answer {
  display: none;
}

/* --------------------------------- */
/* Styles for The Fox and the Grapes */
/* --------------------------------- */

.section-the-fox-and-the-grapes { background: #2E334A; cursor: url(../images/the-fox-and-the-grapes/fox.png), auto; /*ie*/ cursor: -webkit-image-set( url('../images/the-fox-and-the-grapes/fox.png') 1x, url('../images/the-fox-and-the-grapes/fox@2x.png') 2x), auto; padding: 40px 0 310px 0; position: relative; }
.section-the-fox-and-the-grapes {
    background: #2E334A;
    cursor: url('../images/the-fox-and-the-grapes/fox.png'), auto; /*ie*/
    cursor: -webkit-image-set(
      url('../images/the-fox-and-the-grapes/fox.png') 1x,
      url('../images/the-fox-and-the-grapes/fox@2x.png') 2x
    ), auto;
    padding: 40px 0 310px 0;
    position: relative;
}

td, th {
  padding: 15px;
}
.section-the-fox-and-the-grapes .avatar img { margin: 0 0 10px 20px; }
.section-the-fox-and-the-grapes .caption { color: #CBCCD1; margin: 0 0 190px 20px;  }
.section-the-fox-and-the-grapes .caption a { color: #CBCCD1; }
.section-the-fox-and-the-grapes .caption a:hover, .section-the-fox-and-the-grapes .caption a:active { color: #2E334A; background: #CBCCD1; }
.section-the-fox-and-the-grapes h2, .section-the-fox-and-the-grapes p { margin: 0 auto; width: 420px; }
.section-the-fox-and-the-grapes h2 { color: #8EC9D2; font: 36px 'Ovo', serif; text-align: center; margin-bottom: 16px; }
.section-the-fox-and-the-grapes p, table { color: #B7B8BF; font: 15px/21px 'Muli', sans-serif; font-weight: 300; text-align: justify;     }
@-webkit-keyframes shake {
    0% { -webkit-transform: translate(0, 0) rotate(0); }
    1% { -webkit-transform: translate(-1px, -2px) rotate(-10deg); }
    2% { -webkit-transform: translate(-3px, 0) rotate(30deg); }
    3% { -webkit-transform: translate(0px, 2px) rotate(0); }
    4% { -webkit-transform: translate(1px, -1px) rotate(30deg); }
    5% { -webkit-transform: translate(-1px, 2px) rotate(-10deg); }
    6% { -webkit-transform: translate(-3px, 1px) rotate(0); }
    7% { -webkit-transform: translate(2px, 1px) rotate(-10deg); }
    8% { -webkit-transform: translate(-1px, -1px) rotate(10deg); }
    9% { -webkit-transform: translate(2px, 2px) rotate(0); }
    10% { -webkit-transform: translate(0, 0) rotate(0); }
    100% { -webkit-transform: translate(0, 0) rotate(0); }
}
.shake {
    -webkit-animation-name: shake;
    -webkit-animation-duration: 8s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.section-the-fox-and-the-grapes .grapes { background: url(../images/the-fox-and-the-grapes/grapes.png) no-repeat center; bottom: 216px; height: 100px; left: 50%; margin-left: -50px; position: absolute; transition: all 0.2s cubic-bezier(0, 0.65, 0.03, 1.2); width: 100px; -moz-transition: all 0.2s cubic-bezier(0, 0.65, 0.03, 1.2); -o-transition: all 0.2s cubic-bezier(0, 0.65, 0.03, 1.2); }

.section-moon-mother { background-color: #212221; padding: 60px 0 120px 0; color: #9d9e9d; }
.section-moon-mother .caption a:hover { color: #000; text-align: left; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.section-moon-mother h2 { font: 34px/30px 'Vast Shadow', 'Arial Black'; color: #865; width: 620px; margin: 0 auto; text-transform: uppercase; padding: 14px 0 13px 0; border-top: 4px double #676767; border-bottom: 4px double #676767; }
.section-moon-mother h2 span { font: 300 16px 'Oswald', Helvetica, Arial; margin: 0 5px 0 3px; color: #555; letter-spacing: .05em; }
.section-moon-mother p { width: 620px; color: #9d9e9d; margin: 0 auto; }
.section-moon-mother .black-ital { font: italic 900 130px/90px 'Playfair Display', Georgia, serif; margin-bottom: 12px; display: block; }
.section-moon-mother .ital { font: italic 400 60px/60px 'Playfair Display', Georgia, serif; margin: 0 0 8px 6px; display: block; }
.section-moon-mother .small-cap { font: 400 18px/36px 'Playfair Display SC', Georgia, serif; letter-spacing: .17em; margin: 0 0 0 12px; text-transform: uppercase; display: block; }
.section-moon-mother .reg { font: 400 46px/40px 'Playfair Display', Georgia, serif; display: block; margin: 0 0 0 -10px; }
.section-moon-mother .bold-ital { font: italic 700 43px/56px 'Playfair Display', Georgia, serif; display: block; }
.section-moon-mother .bold { font: 400 23px/36px 'Playfair Display', Georgia, serif; display: block; margin-left: 8px; }
.section-moon-mother strong { text-transform: uppercase; font-weight: 900; letter-spacing: .15em; font-size: 18px; margin: 0 3px; }
.section-moon-mother .black { font: 900 39px/32px 'Playfair Display', Georgia, serif; margin-left: 4px; display: block; }


.section-prophet { font-family: 'Neuton', serif;line-height: 1.5; background-color: #101010; color: #999; color: rgba(255,255,255,0.75); background-image: url(../images/prophet.jpg); background-size: cover; background-attachment: fixed; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; }
.section-prophet .container { width: 100%; overflow: hidden; padding: 40px 180px 140px; background-color: rgba(0,0,0,0.45); box-sizing: border-box; }
.section-prophet .caption { margin-bottom: 40px; margin-left: 0; }
.section-prophet h2 { font-size: 40px; font-weight: 300; margin-bottom: 10px; color: #FFF; }
.section-prophet p { font-size: 20px; font-weight: 300; }
.section-prophet .col { max-width: 420px; float: right; }


/* Styles for The wolves, the sheep, and the ram */

/*.section-wolves-sheep-ram .top {margin-top: -50px}*/
/* stock photo source: https://s3.amazonaws.com/ooomf-com-files/HWijjF7RwOPGEJ1nb4Zb_IMG_3773.jpg */
.section-wolves-sheep-ram { background: #212221 url(../images/bg-wolf-sheep-ram.png) no-repeat; background-size: cover; padding: 150px 0 60px; overflow: hidden; color: #fff;}
.section-wolves-sheep-ram .container {width:100%; }
.section-wolves-sheep-ram .containerWidth {max-width:1280px; margin: 0 auto;}
.section-wolves-sheep-ram .titleContainer { margin: 0 auto; font: 14pt; text-align: left; text-transform: uppercase; letter-spacing: 15px;font-family: 'Quattrocento', Georgia, serif;}
.section-wolves-sheep-ram .wolves {text-align: center; width: 150px; word-wrap: break-word; margin: 0 auto;}
.section-wolves-sheep-ram .wolves h1 {font-size: 90px; line-height: 100px; font-weight: normal; color: #fff; text-align: center; text-transform: uppercase;letter-spacing: 15px;}
.section-wolves-sheep-ram .wolves p {text-align: center;margin-bottom:20px;}
.section-wolves-sheep-ram .sheep,
.section-wolves-sheep-ram .ram {margin: -160px auto 0;}
.section-wolves-sheep-ram .sheep {float: left; padding-left: 80px;}
.section-wolves-sheep-ram .ram {float: right; padding-right: 80px}

.section-wolves-sheep-ram .titleFullContainer {display: none; font-family: 'Quattrocento', Georgia, serif;}
.section-wolves-sheep-ram .WSR { max-width: 360px; margin: 100px 0 0 80px; }
.section-wolves-sheep-ram .WSR p { font-size: 14px; line-height: 32px; text-align: left; text-transform: uppercase; letter-spacing: 8px;}

.section-wolves-sheep-ram .bodyContainer {width: 100%; margin: 0 auto; font-family: 'Fanwood Text', Georgia, serif;}
.section-wolves-sheep-ram .body { max-width: 540px; margin: 80px auto;}
.section-wolves-sheep-ram .body p { font-size: 20px; line-height: 36px; }

.section-wolves-sheep-ram .avatar img { margin: 0 0 10px 80px; position: relative; z-index: 998; }
.section-wolves-sheep-ram .caption { margin: 0 0 0px 80px; color: #222; position: relative; z-index: 999;}
.section-wolves-sheep-ram .caption a { color: #222; }
.section-wolves-sheep-ram .caption a:hover { background-color: #fff; }

/* -------------------------- */
/* Styles for The Boy Bathing */
/* -------------------------- */

.section-the-boy-bathing { background: #002041 url(../images/the-boy-bathing/bg-sm.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #eee6d2; padding: 30px;}

.section-the-boy-bathing .avatar img { margin: 0 0 6px 0px; }
.section-the-boy-bathing .caption { color: #8fa0a0; margin: 0 0 200px 0px;  }
.section-the-boy-bathing .caption a { color: #8fa0a0; }
.section-the-boy-bathing .caption a:hover, .section-the-fox-and-the-grapes .caption a:active { color: #002041; background: #8fa0a0; }

.section-the-boy-bathing .container { position: relative; max-width: 600px; margin: 0 auto 30px auto; width: 100%; }

.section-the-boy-bathing .container h2 { font: 46px/52px 'Quando', sans-serif; font-weight: 300; margin-bottom: 20px; }
.section-the-boy-bathing .container h2 span:nth-child(1) { position: absolute; left: 70px; top: -140px; }
.section-the-boy-bathing .container h2 span:nth-child(2) { position: absolute; left: 0; top: -70px; }
.section-the-boy-bathing .container h2 span:nth-child(3) { padding-left: 60px; }
.section-the-boy-bathing .container p { font: 17px/23px 'Judson', sans-serif; font-weight: 300;     margin-bottom: 24px; }
.section-the-boy-bathing .container .moral span { background: #eee6d2; color: #002041; display: inline-block; font: 13px/13px 'Montserrat', sans-serif; font-weight: 300; padding: 7px 7px 5px 7px; margin-left: -7px; }

.section-fir-tree { width: 100%; height: 100%; background-color: #a95; padding: 60px 0; }
.section-fir-tree .caption a { color: #433; }
.section-fir-tree .container { background: url('../images/fir-tree.svg') 50% 60px no-repeat; width: 660px; height: auto; margin: 0 auto; overflow: hidden; display: block; padding-bottom: 60px; }
.section-fir-tree h2 { max-width: 470px; margin: 240px auto 180px auto; font: 68px/60px Ultra, 'Arial Black', sans-serif; text-align: center; text-transform: uppercase; color: #543; }
.section-fir-tree h2 span { font: 48px/42px 'Stint Ultra Expanded', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: .05em; display: block; }
.section-fir-tree .moral { width: 300px; padding: 0 0 0 20px; font: 400 22px/35px 'Stint Ultra Expanded'; text-align: right; color: #fff; display: inline-block; letter-spacing: .02em; vertical-align: top; }
.section-fir-tree .fable { width: 290px; padding: 10px 20px 120px 20px; font: 15px/23px 'Slabo 13px'; color: #433; display: inline-block; vertical-align: top; }

@media all and (min-width: 768px) {
    .section-the-boy-bathing { background: #002041 url(../images/the-boy-bathing/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    .section-the-boy-bathing .container { margin: 0 auto 100px auto; }

    .section-the-boy-bathing .container h2 span:nth-child(1) { left: 30px; top: -140px; }
    .section-the-boy-bathing .container h2 span:nth-child(2) { left: -40px; top: -70px; }
    .section-the-boy-bathing .container h2 span:nth-child(3) { padding-left: 0; }

    .section-the-boy-bathing .container p { font: 20px/28px 'Judson', sans-serif; font-weight: 300; margin-bottom: 26px; }
    .section-the-boy-bathing .container .moral span { font: 16px/16px 'Montserrat', sans-serif; font-weight: 300; }
}

@media all and (min-width: 992px) {
    .section-the-boy-bathing .caption { margin: 0 0 260px 0px;  }
    .section-the-boy-bathing .container { margin: 0 auto 160px auto;}

    .section-the-boy-bathing .container h2 span:nth-child(1) { left: -110px; top: -140px; }
    .section-the-boy-bathing .container h2 span:nth-child(2) { left: -180px; top: -70px; }
}

/* ------------------------------------ */
/* Styles for The Serpent and The Eagle */
/* ------------------------------------ */

.section-the-serpent-and-the-eagle { background: #171e26; color: #cc992c; padding: 30px; }

.section-the-serpent-and-the-eagle .avatar img { margin: 0 0 6px 0px; }
.section-the-serpent-and-the-eagle .caption { color: #a2a5a8; margin: 0 0 50px 0px;  }
.section-the-serpent-and-the-eagle .caption a { color: #a2a5a8; }
.section-the-serpent-and-the-eagle .caption a:hover, .section-the-fox-and-the-grapes .caption a:active { color: #171e26; background: #a2a5a8; }

.section-the-serpent-and-the-eagle .container { text-align: center; margin: 0 auto; width: 250px; }

.section-the-serpent-and-the-eagle .container h2 { font: 36px/48px 'Vollkorn', serif; text-transform: uppercase; letter-spacing: 12px; font-weight: 700; margin-bottom: 40px; }
.section-the-serpent-and-the-eagle .container h2 span { font: 84px/100px 'Vollkorn', serif; font-weight: 700; font-style: italic; }

.section-the-serpent-and-the-eagle .container p { text-align: justify; font: 13px/24px 'Exo', sans-serif; margin-bottom: 20px; }
.section-the-serpent-and-the-eagle .container .moral { font-style: italic; }

@media all and (min-width: 768px) {
    .section-the-serpent-and-the-eagle { background: #171e26 url(../images/the-serpent-and-the-eagle/bg.jpg) no-repeat right bottom; }
    .section-the-serpent-and-the-eagle .container { width: 340px; }
    .section-the-serpent-and-the-eagle .container .moral { margin-bottom: 80px; }
}

/* Styles for The fox and the lion */

.section-fox-lion { background: url('../images/fox-lion-bg.jpg') no-repeat; background-size: cover; padding: 90px 0 100px;}
.section-fox-lion h2 { font: 50px/45px 'Open Sans Condensed', sans-serif; color: #403E2F; text-transform: uppercase; margin: 0 0 30px 20px; }
.section-fox-lion h2 .ampersand { font: italic 32px 'Lora', Georgia, serif; text-transform: none; }
.section-fox-lion p { font: italic 20px/45px 'Lora', Georgia, serif; max-width: 710px; color: #403E2F; margin: 0 0 12px 20px; }
.section-fox-lion .avatar img { margin: 0 0 10px 20px; }
.section-fox-lion .caption { margin: 0 0 40px 20px; color: #403E2F; }
.section-fox-lion .caption a { color: #403E2F; }
.section-fox-lion .caption a:hover { color: #D74433; background-color: #fff; }


/* ------------------------------------ */
/* Styles for The Horse and the Groom */
/* ------------------------------------ */

/* Image Credit: http://picography.co */

.section-horse-groom{ background:url(../images/horse-groom-bg.jpg) no-repeat;background-size:cover;overflow:hidden;padding:250px 400px 350px; }
.section-horse-groom h2{ font:60px/75px 'Alfa Slab One', cursive, sans-serif;color:#fff;text-transform:uppercase;letter-spacing:1.25px;text-align:left }
.section-horse-groom h2 .ampersand{ font:italic 48px 'Gentium Book Basic', serif;text-transform:none; }
.section-horse-groom p{ font:15px/30px 'Gentium Book Basic', serif;color:#e7e7e7;text-align:justify;width:40%;display:inline-block;float:left;padding:70px 0 0; }
.section-horse-groom blockquote{ color:#e7e7e7;display:inline-block;font:italic 400 30px/40px "Gentium Book Basic",serif;margin-right:0;text-align:right;width:50%;float:right;padding:80px 0 0; }
.section-horse-groom .avatar img { margin-bottom: 10px; }
.section-horse-groom .caption { margin-left: 0; color: #ffffff; }
.section-horse-groom .caption a { color: #ffffff; -o-transition: 0.2s;-ms-transition: 0.2s;-moz-transition: 0.2s;-webkit-transition: 0.2s;transition: 0.2s; }
.section-horse-groom .caption a:hover { color: #ffffff; background-color: #eb534a; }


/* -------------------------------- */
/* Styles for The Owl and the Birds */
/* -------------------------------- */

.section-the-owl-and-the-birds { background-color: #F1B15A; padding: 30px 30px 70px 30px; }

.section-the-owl-and-the-birds .avatar img { margin: 0 0 6px 0; }
.section-the-owl-and-the-birds .caption { color: #573E1E; margin: 0 0 50px 0; }
.section-the-owl-and-the-birds .caption a { color: #573E1E; }
.section-the-owl-and-the-birds .caption a:hover, .section-the-owl-and-the-birds .caption a:active { color: #F1B15A; background: #573E1E; }

.section-the-owl-and-the-birds .container { text-align: center; margin: 0 auto; width: 80%; padding-bottom: 30px; }
.section-the-owl-and-the-birds .container h2 { color: #210; font: 700 48px 'Montserrat', sans-serif; text-align: left; margin: 60px 0; letter-spacing: -.02em;}
.section-the-owl-and-the-birds .container p { color: #F9F7ED; font: 15px/26px 'Domine', Georgia, serif; margin-bottom: 18px; padding-left: 10px; text-align: left; max-width: 480px; }
.section-the-owl-and-the-birds .container p .cap { font-size: 16px; text-transform: uppercase; }

@media all and (min-width: 768px) {
  .section-the-owl-and-the-birds { background: url(../images/sunset.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
  .section-the-owl-and-the-birds .container { width: 560px; }
  .section-the-owl-and-the-birds .caption { color: #D5934B; }
  .section-the-owl-and-the-birds .caption a { color: #D5934B; }
}

/* ------------------------------------------------- */
/* Styles for The Crow and The Raven - @notdivisible */
/* ------------------------------------------------- */

.section-crow-raven { background-color: #4e081b; background-image: url(../images/crow.jpg); background-position: center center; background-repeat: no-repeat; background-size: 370px auto; font-size: 85%; padding: 20% 1.25em; }
.section-crow-raven .meta { font-size: 100%; margin-bottom: 2em; position: relative; }
.section-crow-raven .wrapper { margin: 0 auto; max-width: 37.5em; position: relative; }
.section-crow-raven .caption { color: #aae6d9; display: inline-block; margin: 0 0 0 8px; position: relative; top: -12px; }
.section-crow-raven .caption a { color: #aae6d9; }
.section-crow-raven .caption a:hover { background-color: transparent; text-decoration: underline; }
.section-crow-raven h2 { color: #e5ca9d; font-family: 'Nixie One', 'Times New Roman', Times, serif; font-size: 4.375em; font-weight: 400; line-height: 1.07142857; margin-bottom: 0.5em; }
.section-crow-raven p { color: #c8cbc1; font-family: 'Libre Baskerville', 'Times New Roman', Times, serif; font-size: 1em; line-height: 1.75; margin-bottom: 1.75em; }
.section-crow-raven p:last-child { font-size: 1.75em; line-height: 1.5; margin-bottom: 0; text-indent: -0.4em; }
.section-crow-raven p:last-child:before { content: '\201c'; }
.section-crow-raven p:last-child:after { content: '\201d'; }
.section-crow-raven q:before, .section-crow-raven q q:before { content: open-quote; }
.section-crow-raven q:after, .section-crow-raven q q:after { content: close-quote; }
.section-crow-raven q { quotes: '\201c' '\201d' '\2018' '\2019'; }
@media only screen and ( min-width: 33.75em ) {
	.section-crow-raven { font-size: 100%; }
}
@media only screen and ( min-width: 33.75em ) {
	.section-crow-raven { background-size: 740px auto; }
	.section-crow-raven p { padding-left: 25%; }
	.section-crow-raven p:last-child { padding-left: 0; }
}

/* -------------------------------- */
/* Jupiter And The Tortoise */
/* -------------------------------- */
#HomerGaines{}
.section-jupiter-and-the-tortoise {padding:40px; min-height:450px; background: url(../images/turtle.jpg) no-repeat right center;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.section-jupiter-and-the-tortoise h2{font-family: 'Philosopher', sans-serif; font-weight: 300; color:#fff; font-size:36px; margin: 0 0 7px 0;}
.section-jupiter-and-the-tortoise p{ font-family: 'Muli', sans-serif; color:#fff; line-height: 1.5em;}
.section-jupiter-and-the-tortoise .container{ max-width:960px; width:100%;}
.section-jupiter-and-the-tortoise .caption {color: #fff; margin: 0 0 60px 0;}

/* Mobile */
@media only screen and (max-width: 40em) {
  .section-jupiter-and-the-tortoise p{text-align: justify;}
}



/* ---------------------- */
/* Device-specific styles */
/* ---------------------- */

/* max-width 640px, mobile */
@media only screen and (max-width: 40em) {
  .section-horse-groom{ padding:250px 50px 350px; }
  .section-horse-groom p{ width:100%; }
  .section-horse-groom blockquote{ width:100%;text-align:center;padding:40px 0 0; }
}

@media (max-width: 659px) {

.section-fir-tree .container { width: 100%; background-size: 80%; }
.section-fir-tree h2 { width: 100%; font-size: 52px; line-height: 36px; display: block; margin-top: 120px; margin-bottom: 120px; }
.section-fir-tree h2 span { font-size: 36px;}
.section-fir-tree .moral { width: 80%; padding: 0 20px; font-size: 1.2em; line-height: 1.5; text-align: left; display: block; margin: 0 auto 30px auto; }
.section-fir-tree .fable { width: 80%; padding: 0 20px; display: block; margin: 0 auto; }

.section-fox-lion .container { width: 90%; }

}

/* min-width 641px and max-width 1024px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .section-horse-groom { padding: 250px 100px 350px; }
}

/* Sub-tablet <768px */
@media (max-width: 768px) {

    .section-intro { width: 100%; }
    .section-intro .small { margin: 0 20px; }
    .section-intro p { max-width: 460px; width: auto; padding: 0 20px; }
  .section-intro .wrapper { width: 320px; text-align: center; margin: 0 auto 120px auto; }

    .section-two-bags .container { width: 100%;}
    .section-two-bags h2 { font-size: 64px; line-height: 52px; margin-bottom: 6px; opacity: 1;}
    .section-two-bags p { max-width: 380px; width: auto; margin-left: 0; padding: 0 20px; float: left; font: 14px/24px 'Monda', Arial, sans-serif; }
    .section-two-bags .caption { width: auto; margin-top: 6px; opacity: .7; }

    .section-oak .container { width: 100%; }
    .section-oak p { max-width: 460px; width: auto; padding: 0 20px; }

    .section-gnat-bull .container { width: 100%; }
    .section-gnat-bull h2 { font: 60px/60px 'Playfair Display', Georgia, serif; }
    .section-gnat-bull p { padding-right: 20px; }

    .section-astronomer .container { width: auto; }
    .section-astronomer h2 { font-size: 46px; }
    .section-astronomer p { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }

    .section-the-fox-and-the-grapes .container { width: 100%;  }
    .section-the-fox-and-the-grapes h2,    .section-the-fox-and-the-grapes p { width: auto; max-width: 420px; padding: 0 20px; }

    .section-moon-mother .container { width: 100%; }
    .section-moon-mother .container .caption { width: 280px; margin-left: 40px; }
    .section-moon-mother h2, .section-moon-mother p { width: 320px; }
    .section-moon-mother h2 { font-size: 32px; text-align: center; }
    .section-moon-mother h2 span { display: block; }
    .section-moon-mother .black-ital { font-size: 120px; }
    .section-moon-mother .small-cap { font-size: 13px; line-height: 15px; margin: 0 auto 4px auto; }
    .section-moon-mother .reg { font-size: 42px; }
    .section-moon-mother .bold-ital    { font-size: 60px; }
    .section-moon-mother .bold { line-height: 24px; margin: 4px auto; }
    .section-moon-mother .black { font-size: 42px; line-height: 40px; }

    .section-prophet .col {float: none;}
    .section-prophet .container {background-color: rgba(0,0,0,0.75);padding-left:40px;padding-right:40px;padding-bottom:100px;}

    .section-wolves-sheep-ram .titleContainer {display: none;}
    .section-wolves-sheep-ram .titleFullContainer {display: block;}
    .section-wolves-sheep-ram .body {padding: 0 80px;}

}


/* Small devices (tablets, > 768px) */
@media (min-width: 769px) {

    .section-crow-pitcher { padding: calc(4 * 20px); }
    .section-crow-pitcher h2 { margin-bottom: calc(8 * 20px); margin-top: calc(4 * 20px); }
    .section-crow-pitcher .container p { font-size: 48px; }
    .section-crow-pitcher .container .drop-p { color: white; font-size: 18px; float: left; line-height: 1.4em; margin-bottom: 0; margin-right: calc(3 * 20px); margin-top: calc(1 * 20px); width: 33.3%; }
    .section-crow-pitcher em { font-size: 18px; margin-bottom: calc(8 * 20px); }
    .section-crow-pitcher hr { width: 2.5%;    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .section-crow-pitcher .container p { font-size: 104px; }
    .section-crow-pitcher .container .drop-p { font-size: 24px; line-height: 1.8em; margin-bottom: 0; margin-top: calc(1 * 20px); margin-right: calc(4 * 20px); }
    .section-crow-pitcher em { font-size: 24px; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .section-crow-pitcher {    padding: calc(6 * 20px);    }
    .section-crow-pitcher h2 { margin-bottom: calc(12 * 20px);    margin-top: calc(6 * 20px);    }
    .section-crow-pitcher .container p { font-size: 124px; margin-bottom: calc(12 * 20px);    }
    .section-crow-pitcher .container .drop-p { font-size: 36px; line-height: 1.8em;    }
    .section-crow-pitcher em { font-size: 36px; margin-bottom: calc(12 * 20px); }
}

/* Large devices (extra large desktops, 1440px and up) */
@media (min-width: 1440px) {
    .section-crow-pitcher .container p { font-size: 150px;    }
}


/* min-width 1025px and max-width 1440px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
    .section-horse-groom { padding: 250px 250px 350px }
    .section-horse-groom p { width: 45% }
    .section-horse-groom blockquote { width: 40%; padding: 60px 0 0 0; }
}

/* max-width 1920px, xlarge screen */
@media only screen and (min-width: 120em) {
    .section-horse-groom { padding: 250px 650px 350px; }
    .section-horse-groom blockquote { padding: 50px 0 0 0; }
}

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Preliminary D3 Scaffolding</title>
    <!-- Google web Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Fauna+One|Oleo+Script|Fugaz+One|Monda|Unica+One|Alegreya:400italic,400|Abril+Fatface|Vollkorn' rel='stylesheet' type='text/css'>

    <!-- Typography Project stylesheet -->
    <link href="google-type.css" rel="stylesheet">

	<script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="js/freesound.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<style>

  .chart {
    text-align: center;
  }
	</style>

</head>

<body>

        <div class="container-fluid">
            <div class="container section-intro">
                <h1>
                    <span class="small"><i>an</i></span>
                    <em>Analog Clock</em>
                    <span class="small"><i>written in</i></span>
                    <em>D3</em>
                </h1>

                <div class="chart"></div>

                <div class="wrapper">
                    <div class="colophon">
                      <p>Web design adapted from <a href="http://femmebot.github.io/google-type/">femmebot's Google Type Project</a>.
                      </p>
                    </div>
                    <div class="colophon">
                      <p> D3 analog clock from <a href="https://ericbullington.com/blog/2012/10/27/d3-oclock/" target="_blank">Eric Bullington</a>. </p>
                    </div>
                    <div class="colophon">
                      <p>
                      To stop the Edgar-Allen-Poe-heart-beating madness,
                      press this <input type="button" value="button"></input> here.
                      </p>
                    </div>
                </div>
            </div>
        </div>


<p>
</p>

<script type="text/javascript">

freesound.setToken("f8de33f07bf59c02d43439e2666adeb68817f825");

var fields;

fields = function() {
  var currentTime, hour, minute, second;
  currentTime = new Date();
  second = currentTime.getSeconds();
  minute = currentTime.getMinutes();
  hour = currentTime.getHours() + minute / 60;
  return data = [
    {
      "unit": "seconds",
      "numeric": second
    }, {
      "unit": "minutes",
      "numeric": minute
    }, {
      "unit": "hours",
      "numeric": hour
    }
  ];
};

var width, height, offSetX, offSetY, pi, scaleSecs, scaleHours;
width = 300;
height = 200;
offSetX = 150;
offSetY = 100;

pi = Math.PI;
scaleSecs = d3.scale.linear().domain([0, 59 + 999/1000]).range([0, 2 * pi]);
scaleMins = d3.scale.linear().domain([0, 59 + 59/60]).range([0, 2 * pi]);
scaleHours = d3.scale.linear().domain([0, 11 + 59/60]).range([0, 2 * pi]);

var vis, clockGroup;

vis = d3.selectAll(".chart")
  .append("svg:svg")
  .attr("width", width)
  .attr("height", height);

clockGroup = vis.append("svg:g")
  .attr("transform", "translate(" + offSetX + "," + offSetY + ")");

clockGroup.append("svg:circle")
  .attr("r", 80).attr("fill", "none")
  .attr("class", "clock outercircle")
  .attr("stroke", "black")
  .attr("stroke-width", 2);

clockGroup.append("svg:circle")
  .attr("r", 4)
  .attr("fill", "black")
  .attr("class", "clock innercircle");

var render;

render = function(data) {

  var hourArc, minuteArc, secondArc;

  clockGroup.selectAll(".clockhand").remove();

  secondArc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(70)
    .startAngle(function(d) {
    return scaleSecs(d.numeric);
  })
    .endAngle(function(d) {
    return scaleSecs(d.numeric);
  });

  minuteArc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(70)
    .startAngle(function(d) {
    return scaleMins(d.numeric);
  })
    .endAngle(function(d) {
    return scaleMins(d.numeric);
  });

  hourArc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(50)
    .startAngle(function(d) {
    return scaleHours(d.numeric % 12);
  })
    .endAngle(function(d) {
    return scaleHours(d.numeric % 12);
  });

  clockGroup.selectAll(".clockhand")
    .data(data)
    .enter()
    .append("svg:path")
    .attr("d", function(d) {
      if (d.unit === "seconds") {
        return secondArc(d);
      } else if (d.unit === "minutes") {
        return minuteArc(d);
      } else if (d.unit === "hours") {
        return hourArc(d);
      }
    })
    .attr("class", "clockhand")
    .attr("stroke", "black")
    .attr("stroke-width", function(d) {
      if (d.unit === "seconds") {
        return 2;
      } else if (d.unit === "minutes") {
        return 3;
      } else if (d.unit === "hours") {
        return 3;
      }
    })
    .attr("fill", "none");
};

var snd = new Audio("sounds/237063-kick-drum.wav");

var sndCounter = 0;
var enableSound = true;
var perturb = 10;

setInterval(function() {
	var data;
	data = fields();
	if (enableSound) {
		sndCounter += 1;
	}
	if (sndCounter >= 3) {
		sndCounter = 0;
		snd.play();
		randX = Math.round(Math.random() * perturb) + offSetX;
		randY = Math.round(Math.random() * perturb) + offSetY;
		d3.select("g").transition().duration(50).attr("transform", "translate(" + randX + "," + randY + ")" );
	}
	return render(data);
}, 1000);

function buttonClick(event) {
	enableSound = false;
}

$("input").click(buttonClick);

</script>

</body>

</html>