h3 {
    font-family: "Avenir Next", sans-serif;
    color: white;
    font-size: 24pt;
    padding: 20pt;
    text-align: center;
}

a:link, a:visited {
    font-family: "Avenir Next", sans-serif;
    color: white;
    background-color: blue;
    padding: 10pt;
    font-size: 20pt;
    display: inline-block;
    text-decoration: none;
}

a:hover, a:active {
    font-family: "Avenir Next", sans-serif;
    background-color: darkturquoise;
    color: white;
    text-decoration: none;
}

body {
    display: flex;
    flex-flow: row wrap;
    background-color: white;
}

div.left {
    display: flex;
    flex:5;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    border-radius: 10pt;
}

div.right {
    display: flex;
    flex: 5;
    /*background-color: black;*/
    align-items: stretch;
    justify-content: stretch;
    align-self: stretch;
    border-radius: 10pt;
}

video {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*!*right: 0;*!*/
    /*!*bottom: 0;*!*/
    /*min-width: 100%;*/
    /*min-height: 100%;*/
    /*width: auto;*/
    /*height: auto;*/
    /*z-index: -100;*/
    /*background-size: 100% 100%;*/
    /*overflow: hidden;*/
    /*object-fit: fill;*/
    /*looks like video won't behave like images and you can't force it to change
    its aspect ratio though regular css (have to resort to css transforms
    just making it full screen for now*/
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}