Simple definition list styling for glossy-rails project

dabblet.css

/**
 * Simple definition list styling for glossy-rails project
 * see: https://github.com/hongymagic/glossy-rails
 */
body { color: #222; font: normal normal 400 100%/140% Arial, sans-serif; background-image: linear-gradient(45deg, #444, #222); }

dl { margin: 1em auto; padding: 1em; width: 500px; position: relative; top: -1000px; }
dt, dd { margin: 0; padding: 0.2em 25px; background: #222; color: #d5d5d5; }
dd a, dd a:visited { color: #a0a0a0; text-decoration: none; }

dt { margin-top: 1em; border: 1px solid #222; border-bottom: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; padding-top: 1em; }
dt:nth-child(3n+2) { color: orange; }
dt:nth-child(3n+1) { color: yellow; }
dt:nth-child(3n) { color: #f06; }
dt:first-child { margin-top: 0; }
dt dfn { font-style: normal; font-weight: 700; }
dd { border: 1px solid #222; border-top: 0; padding-bottom: 1em; font-size: 75%; }

/* Animations */
@keyframes show {
	0% {
		top: -1000px;		
	}
	80% {
		top: 50px;
	}
	100% {
		top: 0;
	}
}

dl {
	animation-name: show;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(.17,.67,1,.14);
	animation-delay: 0ms, 0ms;
	
	top: 0;
}

dabblet.html

<dl id="definitions">
	<dt><dfn>Internet</dfn></dt>
	<dd>A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols</dd>
	<dt><dfn>Web</dfn></dt>
	<dd>A network of fine threads constructed by a spider from fluid secreted by its spinnerets, used to catch its prey</dd>
	<dt><dfn>HTML</dfn></dt>
	<dd>Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages</dd>
	<dt><dfn>CSS</dfn></dt>
	<dd>Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language</dd>
	<dt><dfn>JavaScript</dfn></dt>
	<dd>JavaScript is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment</dd>
</dl>

settings.json

{"view":"split","prefixfree":"1","page":"css"}