html { width: 100%; min-height: 100%; }
body {
    font-family: sans-serif;
    max-width: 1400px;
    padding: 8px;
    margin: auto;
}
.dark body {
    max-width: 1240px;
}
.dark {
    background: #111;
    color: #888;
}
.dark a {
    color: #8af;
}

h1 {
    font-weight: normal;
}

p {
    max-width: 900px;
}
input[type=file] {
    display: block;
}
input[type=range] {
    width: 300px;
}
img, canvas { padding: 8px; box-sizing: border-box; max-width: 100%; margin: auto; }

.output {
    width: 75%;
    float: left;
}
.sidebar {
    width: 25%;
    float: left;
    height: 600px;
    overflow: auto;
}

#slide, #prev-slide {
    max-width: 100%;
    width: 1280px;
    height: 720px;
    overflow: hidden;
}
#slide {
    background: #ccc;
}
#prev-slide {
    position: absolute;
    z-index: 1;
}

#prev-slide img {
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
    opacity: 0.9;
    max-width: none;
    padding: 0;
    margin: 0;
}

#slide img {
    transition: all 5s linear;
    -webkit-transition: all 5s linear;
    /*transition-delay: 1s;*/
    /*-webkit-transition-delay: 1s; [> Safari <]*/
    opacity: 1;
    max-width: none;
    padding: 0;
    margin: 0;
}
