:root {
    /* Colors */
    --background-color: white;
    --titleColor: black;
    --filterBackgroundColor: white;
    --filterLabelColor: black;
    --filterTextColor: black;
    --lightboxBackgroundColor: #000000ef;
    --lightboxTitleColor: white;
    --lightboxCaptionColor: white;
    --lightboxCreditColor: white;

    /* Font faces */
    --Header-font: 'Header-default';
    --Title-font: "Title-default";
    --Lightbox_title-font: "Lightbox_title-default";
    --Lightbox_caption-font: "Lightbox_caption-default";
    --Lightbox_credit-font: "Lightbox_credit-default";
    --filter_label-font: "filter_label-default";
    --filter_text-font: "filter_text-default";

    /* Font modifiers */
    --fontModifier: '1.0';
    --Header-font-adjust: 0;
    --Title-font-adjust: 0;
    --Lightbox_title-font-adjust: 0;
    --Lightbox_caption-font-adjust: 0;
    --Lightbox_credit-font-adjust: 0;
    --filter_label-font-adjust: 0;
    --filter_text-font-adjust: 0;
}

/* Font definitions */
@font-face {
    font-family: "Header-default";
    src: url("../_fonts/OpenSans-Bold.ttf");
}

@font-face {
    font-family: "Title-default";
    src: url("../_fonts/OpenSans-Bold.ttf");
}

@font-face {
    font-family: "Lightbox_title-default";
    src: url("../_fonts/OpenSans-Bold.ttf");
}

@font-face {
    font-family: "Lightbox_caption-default";
    src: url("../_fonts/OpenSans-Regular.ttf");
}

@font-face {
    font-family: "Lightbox_credit-default";
    src: url("../_fonts/OpenSans-LightItalic.ttf");
}

@font-face {
    font-family: "filter_label-default";
    src: url("../_fonts/OpenSans-Bold.ttf");
}

@font-face {
    font-family: "filter_text-default";
    src: url("../_fonts/OpenSans-Regular.ttf");
}

html {
    touch-action: manipulation;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;/* Firefox all */
    -ms-user-select: none;
    user-select: none;
}
body {
    overflow: hidden;
    background: var(--background-color);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
.cardTitleContainer {
    margin-top: 1vmax;
}
.cardTitle {
    font-size: calc(3vmax + var(--Title-font-adjust)*1vmax);
    font-family: var(--Title-font);
    color: var(--titleColor);
    height: 80%;
}
.container-fluid {
    touch-action: manipulation;
}
.display-full {
    height: 100vh;
}
.display-share {
    height: 70vh;
}
.filterSelect {
    font-size: 20px;
    outline: none;
}

.mediaLightboxImageShort {
    max-height: 60%;
}
.mediaLightboxImageTall {
    max-height: 85%;
}
.input {
    font-size: 30px;
    border: 0px;
}
.filter-entry {
    font-family: var(--filter_text-font);
    font-size: calc(3vmin + var(--filter_text-font-adjust)*1vmin);
    color: var(--filterTextColor);
  }
.filter-label {
    font-family: var(--filter_label-font);
    font-size: calc(3vmin + var(--filter_label-font-adjust)*1vmin);
    color: var(--filterLabelColor);
}
.langSwitch-entry {
    font-size: 3vmin;
  }
.pageButton {
    font-size: 5vw;
    background-color: RGBA(97,92,92,0.5)!important;
    outline: none;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    line-height: 100%;
}
.resultCard {
    height: 100%;
}
.resultImg {
    object-fit: cover;
    height: 100%;
}
#attractorImage {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
}
#attractorOverlay {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 2;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: opacity 400ms ease;
}
#attractorVideo {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#displayPane {
    overflow: hidden;
    height: 100vh;
}
#filterOptions {
    width: 25vmax;
    background-color: var(--filterBackgroundColor);
}
#mediaLightbox {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0vh;
    left: 0px;
    background-color: var(--lightboxBackgroundColor);
    z-index: 1000;
    display: none;
    align-items: center;
    opacity: 0;
    transition: 500ms;
}
#mediaLightboxCaption {
    font-size: calc(2vmax + var(--Lightbox_caption-font-adjust)*1vmax);
    color: var(--lightboxCaptionColor);
    overflow-y: auto;
    height: 15%;
    font-family: var(--Lightbox_caption-font);
}
#mediaLightboxCredit {
    font-size: calc(1.5vmax + var(--Lightbox_credit-font-adjust)*1vmax);
    color: var(--lightboxCreditColor);
    padding-top: 10px;
    height: 6%;
    font-family: var(--Lightbox_credit-font);
}
.lightboxMedia {
    width: 100%;
    height: 70%;
    object-fit: contain;
    display: block;
    margin: auto;
}
#mediaLightboxTitle {
    text-align: center;
    font-size: calc(3vmax + var(--Lightbox_title-font-adjust)*1vmax);
    color: var(--lightboxTitleColor);
    height: 9%;
    font-family: var(--Lightbox_title-font);
}
#filterDropdown {
    position: absolute;
    width: 5vmax;
    height: 5vmax;
    bottom: 0px;
    left: 0vw;
    margin-left: 1vmax;
    margin-bottom: 1vmax;
}
#langSwitchDropdown {
    position: absolute;
    width: 5vmax;
    height: 5vmax;
    bottom: 0px;
    right: 0vw;
    margin-right: 1vmax;
    margin-bottom: 1vmax;
}
#logoRegion {
    height: 100%;
}
#resultsRow {
    padding-top: 2.5vh;
    transition: 300ms;
}
#searchInput {
    outline: none;
}
#searchPane {
    background-color: gray;
}

@media (orientation: landscape) {
    .hg-rows {
        height: 100%;
    }
    .hg-row {
        height: 20%;
    }
    .hg-button {
        height: 100%!important;
    }
    .resultImg {
    }
    .simple-keyboard {
        height: 100%;
    }
    #keyboardRegion {
        height: 100%;
    }
}

@media (orientation: portrait) {
    .hg-button {
        height: 3.5vh!important;
    }
    .hg-standardBtn {
        height: 3.5vh!important;
    }
    .resultImg {
    }
}