:root {
    --margin: 10px;
    --padding: 10px;
}

html {
    font-size: 16px;
    min-width: 320px;
}

/* necessary for displaying content of rich text */
/*p {*/
/*    margin-bottom: 0;*/
/*}*/

* {
    scrollbar-width: none;
}

#hero {
    width: 100%;
}

#hero .hero-image {
    background-color: #e3e3e3;
}

#hero .hero-alert {
    height: 100%;
}

#hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#hero .hero-metadata {
    background-color: #e3e3e3;
    width: 100%;
    /*height: 100%;*/
    border-bottom-right-radius: calc(2 * var(--margin));
    padding: 15px;
    padding-top: 10px;
}

#hero .hero-text {
    /*    position: relative;*/
    /*    color: white;*/
    /*    height: 100%;*/
    font-weight: lighter;
    color: black;
    height: initial;
}

#hero .hero-lead {
    /*    position: absolute;*/
    /*    bottom: 26%;*/
    /*    left: calc(2.2 * var(--padding));*/
    font-variant: small-caps;
    font-weight: lighter;
    /*    text-shadow: 4px 2px 3px #333333;*/
}

#hero .hero-name {
    /*    position: absolute;*/
    /*    bottom: 17%;*/
    /*    left: calc(1 * var(--padding));*/
    font-family: "Garamond", "Times New Roman";
    font-size: 1.8rem;
    /*    text-shadow: 4px 2px 3px #333333;*/
}

#hero .hero-time {
    /*    position: absolute;*/
    /*    bottom: 9%;*/
    /*    left: calc(2 * var(--padding));*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: lighter;
    font-size: 1.8rem;
    /*    text-shadow: 4px 2px 3px #333333;*/
}

#hero .hero-last-edit {
    /*padding-left: calc(1 * var(--padding));*/
    /*position: absolute;*/
    color: #7b7b7b;
    /*top: 72%;*/
    /*left: 0;*/
    font-size: 0.7rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
    #hero {
        width: 100%;
        height: 400px;
        /*margin-top: calc(2 * var(--margin));*/
    }

    #hero .hero-text {
        /*height: 50vmax;*/
        /*width: 100%;*/
        /*margin-top: calc(0 * var(--margin));*/
    }

    #hero .hero-image {
        /*width: 50%;*/
        /*height: 100%;*/
        max-height: 768px;
        max-width: 512px;
        height: auto;
        width: auto;
    }

    #hero .hero-metadata {
        width: 100%;
        height: 100%;
        background-color: #e3e3e3;
        border-top-right-radius: calc(2 * var(--margin));
        border-bottom-right-radius: calc(2 * var(--margin));
        padding: 15px;
        padding-top: 120px;
    }

    #hero .hero-text {
        font-weight: lighter;
        color: black;
        height: initial;
    }

    #hero img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #hero .hero-data {
        position: relative;
        width: 50%;
        height: 100%;
        border-bottom: 1px solid grey;
    }

    #hero .hero-lead {
        /*padding-left: calc(1 * var(--padding));*/
        /*position: absolute;*/
        position: static;
        color: black;
        text-shadow: none;
        /*top: 26%;*/
        /*left: 0;*/
    }

    #hero .hero-name {
        /*padding-left: calc(1 * var(--padding));*/
        /*position: absolute;*/
        position: static;
        color: black;
        text-shadow: none;
        /*top: 31%;*/
        /*left: 0;*/
        font-size: 2rem;
    }

    #hero .hero-time {
        /*padding-left: calc(1 * var(--padding));*/
        /*position: absolute;*/
        position: static;
        color: black;
        text-shadow: none;
        /*top: 40%;*/
        /*left: 0;*/
        border-bottom: 1px dotted grey;
    }

    #hero .hero-metadata {
    }

    #hero .hero-last-edit {
        /*padding-left: calc(1 * var(--padding));*/
        /*position: absolute;*/
        color: #7b7b7b;
        /*top: 72%;*/
        /*left: 0;*/
        font-size: 0.7rem;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
}


/* jumbotron image */
.main-image {
    width: 100vw;
}

.promo-image {
    width: 100%;
    object-fit: cover;
}

@media (min-width: 512.02px) {
    .promo-image {
        width: 100%;
        object-fit: contain;
    }

    .lead {
        padding-top: 23px;
    }
}

.editor {
    background-color: white;
}