/* default styles */
:root {
    --min-header-height: 60px;
    --content-width: 60%;
    --card-width: 200px;
    --card-margin: 1em;
    --nav-logo-height: 45px;
    --landing-logo-width: 320px;
    --padding: 2em;
    --margin: 1em;
    --splash-height: 25vh;
    --hero-height: 50vh;
}
/* styles when width shrinks */
@media only screen and (max-width: 720px) and (min-width: 420px) {
    :root {
        --min-header-height: 60px;
        --content-width: 80%;
        --card-width: 150px;
        --card-margin: 0.5em;
        --nav-logo-height: 40px;
        --landing-logo-width: 120px;
        --padding: 0.5em;
        --margin: 0.25em;
        --splash-height: 30vh;
        --hero-height: 75vh;
    }
}
@media only screen and (max-width: 420px) and (min-width: 0px) {
    :root {
        --min-header-height: 60px;
        --content-width: 100%;
        --card-width: 120px;
        --card-margin: 0.1em;
        --nav-logo-height: 30px;
        --landing-logo-width: 80px;
        --padding: 0.25em;
        --margin: 0.1em;
        --splash-height: 50vh;
        --hero-height: 90vh;
    }
}
* {
    /* So padding gets counted within the width of the element */
    box-sizing: border-box;
    /* outline: 2px solid coral; */
}
html,body {
    height: 100%;
    min-height: 100%;
    width: 100%;
    /* This is to enable the spacer div which pushes the footer to the bottom
    of the page */
    display: flex;
    flex-direction: column;
}
.spacer {
    /* Occupies whatever space is remaining since it is the only element in
    body with a flex property */
    flex: 1;
    padding: 0;
    margin: 0 auto;
    width: var(--content-width);
}
.header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: var(--min-header-height);
}
.home-nav img {
    height: var(--nav-logo-height);
    padding: 0;
    margin-left: var(--margin);
}
.menu, .home-nav {
    margin: auto var(--margin);
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu *{
    margin-top: var(--margin);
    
}
/* 100% width div */
.splash{
    flex: 0 auto;
    width: 100%;
    padding: var(--padding);
    /* min-height: var(--splash-height); */
}
.hero {
    flex: 3 auto;
    padding: var(--padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero .vid-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left:0;
    overflow: hidden;
    z-index: -1;
}
.hero video {
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 177.77777778vh;
    min-width: 100%;
    min-height: 56.25vw; 
}
.landing {
    text-align: center;
    padding: var(--padding);
}
.hero .logo-main {
    width: var(--landing-logo-width);
}
.actions {
    padding: var(--padding);
    margin: var(--margin) 0;
    display: flex;
}
.cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.card {
    flex: 1 var(--card-width);
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    max-width: var(--card-width);
    min-height: var(--card-width);
    margin: var(--card-margin);
    text-align: center;
    padding: var(--padding);
}
.card:hover {
    background-size: 150%;
}
.content {
    flex: 2 auto;
    clear: both; /* start below floating divs in header */
    margin: 0 auto auto;
    display: block;
    width: var(--content-width);
    padding: var(--padding);
}
.content embed {
    height: 100%;
    margin: 0 auto;
}
.footer ul {
    list-style-type: none;
    padding: 0;
}
/* To force rendered icons to be at the same level as text */
.material-icons {
    vertical-align: text-bottom;
}