@import url('https://fonts.googleapis.com/css?family=Cuprum');
@import url('https://fonts.googleapis.com/css?family=Copse');

/*
 * IMPORTANT NOTE!
 *
 * To keep the scale of the slides, you should define ALL sizes in either
 * `rem` or `em`.
 */

/***********************
 * Default Theme (red)
 ***********************/

body {
    background: crimson;
    background: linear-gradient(to bottom, crimson, #fee);
}

h1,
a,
blockquote::after {
    color: firebrick;
}

a:hover {
    color: crimson;
}

h1,
a:hover {
    text-shadow: 0.05em 0.05em 0.05em #fff, 0.1em 0.1em 0.05em slategray;
}


/******************
 * Theme brown
 ******************/

body.theme-brown {
    background: burlywood;
    background: linear-gradient(to bottom, burlywood, #fee);
}

body.theme-brown h1,
body.theme-brown a,
body.theme-brown blockquote::after {
    color: saddlebrown;
}

body.theme-brown a:hover {
    color: brown;
}

body.theme-brown h1,
body.theme-brown a:hover {
    text-shadow: 0.05em 0.05em 0.05em #fff, 0.1em 0.1em 0.05em slategray;
}


/******************
 * Theme green
 ******************/

body.theme-green {
    background: lightsalmon;
    background: linear-gradient(to bottom, lightsalmon, #fee);
}

body.theme-green h1,
body.theme-green a,
body.theme-green blockquote::after {
    color: seagreen;
}

body.theme-green a:hover {
    color: lightseagreen;
}

body.theme-green h1,
body.theme-green a:hover {
    text-shadow: 0.05em 0.05em 0.05em #fff, 0.1em 0.1em 0.05em slategray;
}


/******************
 * Theme blue
 ******************/

body.theme-blue {
    background: skyblue;
    background: linear-gradient(to bottom, skyblue, #fee);
}

body.theme-blue h1,
body.theme-blue a,
body.theme-blue blockquote::after {
    color: cornflowerblue;
}

body.theme-blue a:hover {
    color: slateblue;
}

body.theme-blue h1,
body.theme-blue a:hover {
    text-shadow: 0.05em 0.05em 0.05em #fff, 0.1em 0.1em 0.05em slategray;
}


/******************
 * Theme orange
 ******************/

body.theme-orange {
    background: skyblue;
    background: linear-gradient(to bottom, skyblue, #fee);
}

body.theme-orange h1,
body.theme-orange a,
body.theme-orange blockquote::after {
    color: coral;
}

body.theme-orange a:hover {
    color: darkorange;
}

body.theme-orange h1,
body.theme-orange a:hover {
    text-shadow: 0.05em 0.05em 0.05em #fff, 0.1em 0.1em 0.05em slategray;
}


/* End Themes */

body > section {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0 1em;
    font-family: Cuprum, sans-serif;
    padding: 1em;

    /* make the slide a little smaller, so the page background is visible */
    height: 18rem;
    width: 32rem; /* calc(18rem / 9 * 16) */
    top: calc(50vh - 9rem);
    left: calc(50vw - 16rem);
}

body > section > * {
    margin: 0 0 1em;
}

a {
    text-decoration: none;
}

h1 {
    font-family: Copse, serif;
    font-size: 1.5em;
    transform: rotate(-3deg);
    transform-origin: 50% 0;
}

section > img {
    display: block;
}

section > img,
section > figure {
    align-self: center;
    max-width: 90%;
}

section > figure {
    display: flex;
    flex-direction: column;
}

figure > img {
    flex: 1;
}

canvas, embed, iframe, img, input, object, svg, table, video {
    max-width: 100%;
}

textarea {
    box-sizing: border-box;
    flex: 1;
    display: block;
    width: 100%;
    font-size: 1em;
    border: 0.2em dashed gray;
    padding: 0.4em;
}

th {
    text-align: left;
    padding-right: 1em;
}

dd + dt {
    margin-top: 0.5em;
}

li + li {
    margin-top: 0.5em;
}

pre {
    max-width: 100%;
    font-size: 0.9rem;
}

pre > code {
    display: block;
}

blockquote::after {
    content: attr(cite);
    display: block;
    font-size: 0.8em;
}