/*
    Add your own style definitions here. These are just exemplary.
    Colorscheme red:
    #f30813 #963c41 #710106 #f9424b #f97178
*/

@import url('https://fonts.googleapis.com/css?family=Cuprum');
@import url('https://fonts.googleapis.com/css?family=Copse');
body {
    background: #710106;
    background: linear-gradient(to bottom, #710106, #fee);
}

section {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0 1em;
    font-size: 2.25em;
    font-family: Cuprum;
    padding: 5vh 5vw;
}

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

nav {
    font-size: 0.5em;
    position: absolute;
    bottom: 1em;
    right: 2em;
}

a {
    color: #963c41;
    text-decoration: none;
}

a:hover {
    color: #f9424b;
    text-shadow: 1px 1px 1px #fff, 2px 2px 1px #963c41;
}

h1 {
    color: #963c41;
    font-family: Copse;
    font-size: 1.5em;
    text-shadow: 2px 2px 1px #fff, 4px 4px 1px #963c41;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.note {
    font-size: 0.5em;
}

section>img {
    display: block;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    max-width: 90%;
}

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

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

.row-group {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.row-group>img {
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-right: 1em;
}

.slide--title hgroup {
    margin: auto;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.slide--title hgroup h1 {
    -webkit-transform: none;
    transform: none;
    font-size: 2em;
    margin-bottom: 0;
}

.slide--title hgroup p {
    margin: 0;
}

.slide--center h1 {
    font-size: 3em;
    margin: auto;
    -webkit-transform: none;
    transform: none;
}

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