@font-face {
    font-family: 'Gazpacho';
    src: url('../fonts/gazpacho-black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

:root {
    --bg-color: #0a0a0a;
    --panel-color: #1a1a1a;
    --accent-color: #ff3e3e;
}
/* start */
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-container {
    position: relative;
    /* This makes it responsive: */
    width: 100%;
    /*max-width: 1080px;*/
    /* Limits size on desktop */
    height: 100vh; /* Fills mobile screen height */

    background: #000;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 'cover' ensures the video fills the portrait screen without black bars,
       even if the phone aspect ratio varies slightly */
    /* object-fit: cover;  */
    object-fit: inherit;
    transition: opacity 0.7s ease;
}

/* Ensure buttons scale with the container */
[id^="btn"] {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    /* Use percentages for button positions in your style.css
       so they stay in the right spot on different screen sizes */
}

.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.fade-in {
    animation: fadeInAnimation 1s forwards;
    display: block !important;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* end */

/* body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-color); color: #fff; margin: 0;
}

.media-container {
    position: relative;
    width: 1080px;
    height: 1920px;
    background: #000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

video {
    position: absolute; width: 100%; height: 100%;
    object-fit: cover; transition: opacity 0.7s ease;
}

.hidden { opacity: 0; pointer-events: none; display: none;} */

.show {
    display: block;
}

#btnPlay {
    /*z-index: 1111 !important;*/
    position: absolute;
    width: 44%;
    height: 7.5%;
    bottom: 29.3%;
    left: 28%;
    opacity: 0;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}

#btnPlay.btn-scale {
    transform: scale(1.2);
}

[id^="btn"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

#btnLove {
    position: absolute;
    width: 50%;
    height: 8%;
    top: 31%;
    left: 25%;
    opacity: 0;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}
.btnScene2.selected {
    transform: scale(1.2);
}

#btnFamily {
    position: absolute;
    width: 50%;
    height: 8%;
    top: 42.5%;
    left: 25%;
    opacity: 0;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}

#btnCareer {
    position: absolute;
    width: 50%;
    height: 8%;
    top: 54%;
    left: 25%;
    opacity: 0;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}

#cardBG {
    position: absolute;
    width: 90%;
    height: 37%;
    top: 21%;
    left: 5%;
    opacity: 0;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}

#btnHome {
    position: absolute;
    width: 10%;
    height: 5%;
    bottom: 2%;
    right: 3%;
    opacity: 0;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}

#qrCode {
    position: absolute;
    width: 25%;
    height: 13%;
    bottom: 22%;
    left: 37%;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
    border: #410109 solid 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#qrCode canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#s3Selected {
    position: absolute;
    width: 50%;
    height: 8%;
    top: 17%;
    left: 25%;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
}

#textQuote {
    width: 86%;
    height: 34%;
    top: 24%;
    left: 7%;
    font-size: 10rem;
}

.s3Text {
    position: absolute;
    text-align: center;
    animation: fadeInAnimation 1s forwards;
    transition: transform 0.2s ease;
    font-family: 'Gazpacho', Georgia, serif;
    line-height: 1;
    color: #410109;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    overflow-y: auto;
}

#textShare {
    width: 86%;
    height: 5%;
    bottom: 37%;
    left: 7%;
    font-size: 6rem;
}