/* logo */
#big-project-logo { margin-bottom: 0 !important; padding: .8rem 1rem ; background: #fff; border: solid 3px #6c2e5f; }
#big-project-logo img { display: block; margin: auto; height: 48px; }

/* nav */
#project-nav { margin-top: 0; }
#project-nav a { text-decoration: none; }
#project-nav a:hover { text-decoration: underline; }
#project-nav > li:not(:last-child) { margin-bottom: .2rem; }
#project-nav > li > a { font-size: 1.2rem; font-weight: bold; color: #6297d0; }
#project-nav ul { padding-left: .5rem; border-left: solid 2px #d4653c; margin: .4rem 0; }
#project-nav ul li::before { content: '- '; display: inline-block; margin-right: .4rem; }
#project-nav ul li { font-size: 1.08rem; line-height: 1.55rem; }

/* no need for first H2 */
header + h2 { display: none; }

/* Lucid playground boxouts */
.info.playground { padding: .9rem 1.2rem; }
.info.playground::before { content: ''; display: inline-block; width: 32px; height: 32px; background: url('../imgs/icons/lucid-playground.png') left/100%; margin-right: .5rem; vertical-align: middle; }

/* Lucid intro - features */
#lucid-features { padding: 0; list-style: none; }
#lucid-features::after { clear: both; display: block; content: ''; }
#lucid-features li { float: left; width: 46%; margin: .5rem 2%; background: #ddd; border-radius: 6px; padding: .8rem 1.1rem; font-size: 1.1rem; line-height: 1.5rem; color: #555; }
#lucid-features b { display: block; margin-bottom: .4rem; color: #7751ad; font-size: 1.2rem; }
#lucid-features li b::before { content: ''; display: inline-block; width: 24px; height: 24px; margin-right: .5rem; vertical-align: middle; background-size: 100%; }
#lucid-features li:nth-child(1) b::before { background-image: url('../imgs/projects/lucid-features/reactive.png'); }
#lucid-features li:nth-child(2) b::before { background-image: url('../imgs/projects/lucid-features/component.png'); }
#lucid-features li:nth-child(3) b::before { background-image: url('../imgs/projects/lucid-features/html.png'); }
#lucid-features li:nth-child(4) b::before { background-image: url('../imgs/projects/lucid-features/router.png'); }
#lucid-features li:nth-child(5) b::before { background-image: url('../imgs/projects/lucid-features/state.png'); }
#lucid-features li:nth-child(6) b::before { background-image: url('../imgs/projects/lucid-features/more.png'); }