:root {
    --hero-video-height: 1000px;
    --hero-banner-height: 11rem;
    --hero-banner-content-width: 61rem;
}

.mdv-hero__logo_text {
    max-height: 4.4em;
}

.mdv-hero__content {
    position: sticky;
    bottom: 11rem;
    left: 0;
    height: var(--hero-banner-height);
    background: rgba(0, 0, 0, 0.5);
    color: hsl(0, 0%, 90%);
}

.mdv-hero__image video, .mdv-hero__image img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: var(--hero-video-height);
    object-fit: cover;
    object-position: 35% center;
}

.mdv-hero__spacer {
    height: calc(var(--hero-video-height) - var(--hero-banner-height));
}

.mdv-grid-hero {
    margin: 0;
    max-width: 100%;
}

.mdv-grid-content {
    margin: auto;
    padding: 1em;
    max-width: var(--hero-banner-content-width);
}

.mdv-hero h3 {
    margin: .2rem 0 1.2rem;
}

.mdv-hero .md-button {
    border-color: var(--md-primary-fg-color);
    color: var(--md-accent-bg-color);
}

/* Ensure that images don't run into previous text blocks. */
article p:has(> img.floatr), article p:has(> img.floatl) {
    clear: both;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 3rem;
}

article p img.floatr, article p img.floatl {
    margin-top: 0;
    margin-bottom: 0;
    /* max-width: 600px;
    max-height: 400px; */
    /* height: 400px !important; */
    user-select: none;
}

p .twemoji {
    margin-right: 1em;
}

.md-clipboard {
    display: none;
}

@media screen and (max-width: 60em) {
    div.fx-finr,
    div.fx-finl,
    div.fx-finb {
        clear: both;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .container>h1 {
        order: 1;
        margin-bottom: 1rem;
        padding-top: 2rem;
    }

    .container>p {
        order: 2;
        padding-top: 1rem;
    }

    article p img.floatr, article p img.floatl {
        width: auto !important;
        max-height: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;        
    }

    p:has(> img.floatr), p:has(> img.floatl) {
        text-align: center;
    }    
    
    /* Form styles for narrow screens */
    .md-form .form-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
    }
    
    .md-form .form-row label {
        margin-bottom: 0.5rem;
    }
    
    .md-form .select-container {
        width: 100%;
    }
    
    .md-form .submit-row {
        margin-top: 1rem;
    }

    .select-container select {
        margin-bottom: 0.5rem;
    }
}

@media screen and (min-width: 60em) {
    .floatl-textfirst {
        width: 50% !important;
        padding-right: 2rem;
    }

    .floatl-textfirst h2 {
        margin-top: 0;
    }

    .floatr-textfirst {
        width: 50% !important;
        padding-left: 2rem;
    }

    .floatr,
    .floatr-textfirst {
        float: right;
    }

    .floatl,
    .floatl-textfirst {
        float: left;
    }

    article p img.floatr, article p img.floatl {
        width: 50% !important;
        max-width: 600px !important;
    } 

    img.floatr {
        margin-left: 2rem;
    }

    img.floatl {
        margin-right: 2rem;
    }
    
    /* Form styles for wider screens */
    .md-form .form-row {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px;
        margin-bottom: 1rem;
        align-items: start;
    }
    
    .md-form .select-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .md-form .submit-row {
        grid-template-columns: 120px auto;
    }
    
    .md-form button {
        grid-column: 2;
        width: fit-content;
    }
}

/* Form general styles */
.md-form {
    max-width: 90%;
    margin: 0 auto;
}

.md-form .md-input {
    width: 100%;
}

textarea.md-input {
    height: 200px !important;
}

/* Scrolling effects */

.fx-finr {
    transform: translateX(20px);
}

.fx-finl {
    transform: translateX(-20px);
}

.fx-finb {
    transform: translateY(20px);
}

.fx-finr,
.fx-finl,
.fx-finb {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
    will-change: opacity, transform;
}

.fx-finl.fx-show,
.fx-finr.fx-show,
.fx-finb.fx-show {
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
}

.fx-finr.fx-bypass,
.fx-finl.fx-bypass,
.fx-finb.fx-bypass {
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
    transition: none !important;
}

/* General style adjustments */

.padtop {
    padding-top: 2rem;
}

.headerlink {
    display: none !important;
}

.language-text {
    padding: 0;
}