body {
    background-color: #0a0a0a;
    padding: 0;
    margin: 0;
}

div.header_image {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(static/mw2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: unset;
    background-size: cover;
    display: flex;
    flex-direction: column;

    opacity: 0;
    /* Safari, Chrome and Opera > 12.1 */
    -webkit-animation: 3s linear 1.5s 1 normal forwards running fadein;
    /* Firefox < 16 */
    -moz-animation: 3s linear 1.5s 1 normal forwards running fadein;
    /* Internet Explorer */
    -ms-animation: 3s linear 1.5s 1 normal forwards running fadein;
    /* Opera < 12.1 */
    -o-animation: 3s linear 1.5s 1 normal forwards running fadein;
    animation: 3s linear 1.5s 1 normal forwards running fadein;
}

div.stars {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(static/stars2.png);
    background-position: center center;
    background-repeat: repeat;
    background-attachment: unset;
    display: flex;
    flex-direction: column;

    opacity: 0;
    /* Safari, Chrome and Opera > 12.1 */
    -webkit-animation: 1s linear 0.1s 1 normal forwards running fadein;
    /* Firefox < 16 */
    -moz-animation: 1s linear 0.1s 1 normal forwards running fadein;
    /* Internet Explorer */
    -ms-animation: 1s linear 0.1s 1 normal forwards running fadein;
    /* Opera < 12.1 */
    -o-animation: 1s linear 0.1s 1 normal forwards running fadein;
    animation: 1s linear 0.1s 1 normal forwards running fadein;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }
}

@font-face {
    font-family: SnellRoundhand;
    src: url('static/SnellRoundhand-Script.woff2') format('woff2'),
        url('static/SnellRoundhand-Script.woff') format('woff'),
        url('static/Snell-Roundhand-Script.ttf') format('ttf');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Bellasia;
    src: url("static/Bellasia.ttf");
}

@font-face {
    font-family: Engry;
    src: url("static/engry.otf") format("opentype");
}

@font-face {
    font-family: LibreBaskerville;
    src: url("static/LibreBaskerville-Regular.ttf");
}

.invitation-header-emily {
    font-family: Bellasia;
    font-size: 80pt;
    margin-top: -10pt;
    margin-left: -50pt;
}

.invitation-header-and {
    font-family: Engry;
    font-size: 12pt;
    margin-top: -35pt;
    margin-left: 30pt;
}

.invitation-header-ben {
    font-family: Bellasia;
    font-size: 80pt;
    margin-top: 4pt;
    margin-left: 50pt;
}

.invitation-header-rsvp {
    font-family: SnellRoundhand;
    font-size: 30pt;
    margin-top: 30pt;
    margin-left: 30pt;
    margin-bottom: 0pt;
}

.centered {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.card {
    width: 400pt;
    height: 500pt;
}

div#invitation {
    top: 50%;
    perspective: 2000pt;
}

div#invitation-content {
    width: 80%;
    height: 80%;
    text-align: center;
}

.invitation-text {
    font-family: Engry;
    font-size: 10pt;
}

.invitation-text-large {
    font-size: 18pt;
}

.invitation-text-padding {
    margin-top: 10pt;
    margin-bottom: 10pt;
}

.invitation-text-first-row {
    margin-top: 35px;
}

img#invitation-wrap {
    width: 120%;
    position: absolute;
    left: -8%;
    top: -14%;
}

div#people {
    top: 150%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    border-radius: 5pt;
}

div#people_scroll {
    width: 200%;
    height: 100%;
    display: flex;
}

div.person_portrait {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div.person_description {
    width: 400pt;
    margin-top: 450pt;
    height: 50pt;
    color: #fff;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    scroll-snap-align: start;
}

div.person_description_text {
    padding: 10pt;
    font-family: LibreBaskerville;
    font-size: 11pt;
}

div.person_description span {
    font-family: SnellRoundhand;
    font-size: 20pt;
    margin-right: 3pt
}

div.person_scroll_helper {
    position: absolute;
    bottom: 0pt;
    right: 0pt;
    color: rgba(255, 255, 255, 0.7);
    padding: 10pt;
    font-family: LibreBaskerville;
    font-size: 12pt;
}

div.person_scroll_helper:hover {
    cursor: pointer;
    color: #fff;
}

div#agenda {
    top: 270%;
    height: auto;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10pt;
    border-radius: 5pt;
}

div#agenda a {
    color: #fff;
    text-decoration: underline;
}

div#agenda a:hover {
    text-decoration: none;
}

.flipcard-wrapper-flipped {
    transform: rotateY(-180deg);
}

.flipcard-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0px 0px 40pt rgba(255, 255, 255, 0.4);
    border-radius: 5pt;
}

.flipcard-front,
.flipcard-back {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgb(215, 215, 215);
    border-radius: 5pt;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    /* Transform required by chrome */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.flipcard-back {
    transform: rotateY(180deg);
}


.activities-table {
    display: table;
    width: auto;
}

.activities-row {
    display: table-row;
    width: auto;
}

.activities-cell {
    float: left;
    /*fix for  buggy browsers*/
    display: table-column;
    padding-left: 5pt;
    width: 280pt;
    border-left: 1px dashed #fff;
}

.activities-cell-header {
    float: left;
    /*fix for  buggy browsers*/
    display: table-column;
    width: 100pt;
}

/* Display portraits side by side on large screens */
@media only screen and (min-height: 581pt) and (min-width: 840pt) {
    #people {
        width: 800pt;
    }

    div#people_scroll {
        width: 100%;
    }

    div.person {
        width: 50%;
    }

    div.person_scroll_helper {
        display: none;
    }
}

@media only screen and (max-height: 580pt),
(max-width: 420pt) {
    .card {
        transform: scale(0.75) translate(-66.667%, -66.667%);
        -ms-transform: scale(0.75) translate(-66.667%, -66.667%);
    }
}

@media only screen and (max-height: 440pt),
(max-width: 305pt) {
    .card {
        transform: scale(0.45) translate(-111.1111%, -111.1111%);
        -ms-transform: scale(0.45) translate(-111.1111%, -111.1111%);
    }
}