/**

CSSS basic slideshow theme

@author Lea Verou
@version 1.0

*/

/**

* Variables
*/

.slide h2, section > header.slide > h1 {

font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 100;

}

/**

* Styles
*/

}

html {

background-image: -webkit-linear-gradient(top left, black 0%, silver 100%);
background-image: -moz-linear-gradient(top left, black 0%, silver 100%);
background-image: -o-linear-gradient(top left, black 0%, silver 100%);
background-size: cover;

}

body {

font-family: sans-serif;

}

button {

padding:.2em .5em;

}

a:hover {

text-shadow: 0 0 .5em white, 0 0 1em white;

}

select {

color: black;

}

code, pre, style, textarea, input {

font-family: Consolas, 'Andale Mono', 'Courier New', monospace; 
background:rgba(0,0,0,.4);

}

code {

padding:.2em .2em .1em;
white-space: nowrap;
border-radius:.2em;
border: 1px solid rgba(0,0,0,0.5);
background: rgba(0,0,0,0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 12px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

}

pre, style, textarea {

padding:.3em .5em;
margin-left: -.1em;
border:2px solid rgba(255, 255, 255, .1);
box-shadow:.1em .1em .5em black inset;

}

pre > code {
        padding: 0;
        white-space: pre;
        border: 0;
        background: 0;
        box-shadow: none;
}

textarea {

width: 100%;
box-sizing: border-box;

}

strong, b {

font-weight:bold;

}

pre strong {
        text-shadow: 0 0 .6em white;
}

.slide {

padding:0 2.5% 2%;
background: rgba(0,0,0,.5);
background-clip: padding-box;
text-shadow:.05em .05em .1em rgba(0,0,0,.4);
color: white;
border:30px solid transparent;

}

indicator {

background: rgba(255, 255, 255, .6);
color: black;
text-shadow: .03em .03em .1em white;

}

.slide h2 {
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        font-weight: 100;
        font-size: 0.8in;

/* font-size: 200%; */

}

.slide p,
.slide li {
        font-weight: bold;
        letter-spacing: -.03em;
}

.slide > ul {
        list-style:none;        
}

.slide ol {
        margin-left:2em;        
}

        .slide > ul ul {
                margin-left:2em;        
                list-style: none;
        }

                .slide li li {
                        font-size:80%;
                }

        .slide li {
                margin:.2em 0;
        }

        .slide > ul > li:before {
                content:'\2714';
                color: #a0c12c;
                padding-right: .2em;
        }

                .slide li li:before {
                        content: '\279C';
                        color: #28bcbc;
                        padding-right: .2em;
                }

section > header.slide {

background-color: rgba(0,0,0,.8);

}

section > header.slide > h1 {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -.6em;
        font-size: 400%;
        line-height: 1;
        text-align: center;
}

.slide .emphasis {

padding: .4em .5em .3em;
margin: .3em 0;
background: #f80;
background: linear-gradient(#fa0, #f80);
color: white;
font-weight: bold;
letter-spacing: -.05em;
line-height: .85;
text-shadow: .05em .05em .1em rgba(0,0,0,.4);
border-radius: .3em;
box-shadow:.1em .1em .5em black;

}

.light.slide .emphasis {

box-shadow:.1em .1em .5em rgba(0,0,0,.4);

}

.slide .emphasis::before {

content: '\279C';
color: rgba(255,255,255,.5);
float: left;    
width: .75em;
height: 0;
padding: .45em 0 .3em;
margin: -.2em .2em 0 -.25em;
border: .12em solid;
text-align: center;
line-height: 0;
font-size: 120%;
font-family: inherit;
text-shadow: none;
border-radius:999px;
transform: rotate(45deg);

}

.attribution {

background: rgba(0,0,0,.8);
color: white;
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 1em;
padding: .5em 1em;
font-size: 30%;
text-shadow: .05em .05em .1em black;

}

.attribution a {
        text-decoration: none;
}

.attribution a::after {
        content:  ' (' attr(href) ')';
}

/* Syntax highlighting */

.comment {

color: #999;

}

.string {

color: yellow;

}

.keyword {

font-weight: bold;
color: deeppink;

}

.number, .boolean {

color: #0cf;

}

.regex {

color: orange;

}