:root {
    --yfColorCreamLight: #f8f2de;
    --MobileStatusHeight: 30px;
}

body {
    font-family: Barlow;
    font-size: 16px;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Prevent font scaling in landscape while allowing user zoom */
}

/* #region | css reset */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

input,
button,
textarea,
select {
    font: inherit;
}

/* #endregion | css reset */

.mzButtonText.centered {
    width: 100%;
}

/* #region | Video player */

#PlayerContainer {
    position: absolute;
    top: 0px;
    width: 100vw;
    height: 100dvh;
}

#VideoContainerElement {
    width: 100%;
    height: 100%;
}

#VideoElement {
    width: 100%;
    height: 100%;
}

#PlayerBack {
    position: absolute;
    z-index: 1;
    top: calc(0px + var(--MobileStatusHeight));
    width: 100vw;
}

#PlayerBackBtn {
    height: 60px;
    width: 100px;
    margin: auto;
    background: var(--yfColorCreamLight);
    border-radius: 8px;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(-50px);
    transition: transform 800ms, opacity 1500ms;
    border: 2px solid #888;
}

#PlayerBackBtn.show {
    opacity: 1;
    transform: none;
}

/* 
@media all and (display-mode: fullscreen) {
  body {
    background-color: gray;
  }
} */

/* #endregion | Video player */

.mzHidden {
    display: none !important;
}