body {
    width: 99vw;
    height: 99vh;
    background-color: #566246;
    font-size: 16px;
    position: fixed;
}

html, body {
    overflow-x: hidden;
}

.card {
    background-color: #d8dad3;
    color: #4a4a48;
}

.card-title {
    border-bottom: 1px solid #566246;
    color: #566246;
    font-weight: 600;
}

.display-number {
    font-size: 1.5rem;
    line-height: 2rem;
}

.hidden {
    position: relative;
    max-height: 70vh;
    /*overflow: hidden;*/
}

.hidden.active::before {
    display: block;
    content: '';
    background-color: #f1f2eb;
    position: absolute;
    z-index: 100;
    height: calc( 100% + 20px );
    width: calc( 100% + 20px );
    transition: opacity 200ms;
    opacity: 1;
    top: -10px;
    left: -10px;
    border-radius: 10px;
}

.hidden.active:hover:before {
    opacity: 0;
}

#last-image {
    height: 100%;
    overflow: hidden;
    display: grid;
}

#image-container, #video-container  {
    /*width: 100%;*/
    max-width: 100%;
    max-height: 90%;
    object-fit: cover;
    justify-self: center;
}

#title {
    width: 100%;
}

#flash, #flash2 {
    position: fixed;
    min-width: 50%;
    bottom: 2rem;
    left: 25%;
}