<html lang="en">
<head>
<style>
html, body {
    margin: 0;
    padding: 0;
    width: {{ width }}px;
    height: {{ height }}px;
    background-color: transparent !important;
    overflow: hidden;
}

#overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#overlay-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        {{ gradient_start }},
        {{ gradient_stop }}
    );
}

.text-block {
    position: absolute;
    top: 4vh;
    left: 4vw;
    color: {{ text_color }};
    font-family: 'Courier New', Courier, monospace;
    z-index: 12;
    text-align: left;
    text-shadow:
        0.5vw 0.5vw 1vw {{ shadow_color }},
        0 0 1.5vw {{ shadow_color }},
        0 0 3vw {{ shadow_color }};
    max-width: 90%;
    letter-spacing: -0.5em;
    word-spacing: -1.5em;
}

/* --- Titles --- */
.main-title {
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.subtitle {
    font-weight: 400;
    font-style: italic;
    opacity: 0.85;
    white-space: nowrap;
}

.lower-title {
    font-size: 8vw;
    font-weight: 700;
    margin-top: 8vh;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
</style>
<title></title>
</head>
<body>
    <div id="overlay-container">
        <div class="text-block">
            <div class="subtitle" id="subtitle">{{ upper_subtitle }}</div>
            <div class="main-title" id="main-title">{{ main_title }}</div>
            <div class="lower-title">{{ lower_title }}</div>
        </div>
    </div>

<script>

    function fitText(element, container, defaultFontSizeVW) {
        const containerWidth = container.clientWidth;
        let fontSize = defaultFontSizeVW; // in vw units
        element.style.fontSize = fontSize + 'vw';

        while (element.scrollWidth > containerWidth && fontSize > 1) {
            fontSize -= 0.5; // decrease font size incrementally
            element.style.fontSize = fontSize + 'vw';
        }
    }

const textBlock = document.querySelector('.text-block');
fitText(document.getElementById('main-title'), textBlock, 12);
fitText(document.getElementById('subtitle'), textBlock, 6);
</script>
</body>
</html>
