body {
    min-height: 740px;
    background-color: black;
    background:         radial-gradient(#65ACE3, #1FA7E4);

    -webkit-font-smoothing: antialiased;
}

body, .step {
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
}

h1 {
    font-size: 36pt;
    padding: 20px 0;
}
h2 {
    font-size: 32pt;
    padding: 20px 0;
}
h3 {
    font-size: 25pt;
    padding: 20px 0;
}
.small {
    font-size: 10pt;
}

code {
    font-size: 14pt;
    font-family: 'Roboto Mono', Courier, monospace;
}


.hljs {
    padding: 0;
    margin: 0;
}

/* Logo in bottom right corner with hover effect */
div#hs-logo {
    height: 64px;
    width: 194px;
}

div#hs-logo-left{
    bottom: 10px;
    left: 10px;
    height: 64px;
    width: 75px;
    background:  url('../img/hs_logo_75x64_transp_left.png');

    opacity: 0.5;

    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    position: fixed;
}

div#hs-logo-right{
    bottom: 10px;
    left: 85px;
    height: 64px;
    width: 119px;
    background:  url('../img/hs_logo_119x64_transp_right.png');
    opacity: 1.0;
    position: fixed;
}

div#hs-logo:hover > #hs-logo-left {
    opacity: 1;
}



/* disable from impress.js's default css file for hover effect:
 * https://github.com/impress/impress.js/issues/353
 */
.impress-enabled {
    pointer-events: auto;
}


/* Cube */
.cube h1 {
    font-weight:bold;
    border-bottom:3px solid black;
    font-size:50px;
    margin-bottom:30px;
}
.cube ul li:before {
    content: "⟩ \0020"
}

.cube ul li ul li:before {
    padding-left: 20px;
    content: "* \0020"
}

.rightFace,
.leftFace,
.topFace,
.backRightFace,
.backLeftFace,
.bottomFace {
        width: 700px;
        height: 700px;
        background: white;
}

#title h1 {
    font-size: 46px;
    text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
}

#title {
    padding: 0;
}

#contact {
    font-size: 26px;
    text-shadow: none;
}

a {
    color: darkblue;
    text-decoration: none;
    padding: 0 0.1em;
    background: none;
    text-shadow: none;
    border-radius: none;

    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

.step:not(.active) {
    opacity: 0.05;
}

.slide {
    overflow: auto;

    width: 1000px;
    height: 800px;
    line-height: normal;

    letter-spacing: -1px;
}


li {
    list-style-type: square;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 20px;
}

li li {
    list-style-type: disc;   
}

/* font awesome */
.fa-check {
   color: limegreen; 
}

tr:nth-child(even) {
    background-color: rgba(220,160,140,0.2);
}

#canvas-livedemo {
    border: 1px solid #33A9E4;
    position:absolute;
    left:160px;
    top:100px;
}