{{template "base/head" .}}

<div class="page-content">
    <div class="landing-hero">
        <video autoplay="" muted="" loop="" src="https://md.sudovanilla.org/videos/mp4/3783818-hd_1920_1080_24fps.mp4" poster="https://md.sudovanilla.org/images/vlcsnap-2024-05-02-17h23m53s431.png"></video>
        <!-- Shoelace needs JS, this is a fallback solution -->
        <noscript><p id="video-credit">Drone Footage Of The Island And The Sea By Taryn Elliott Taryn Elliott on Pexels</p> </noscript>
        <sl-tooltip id="video-credit-js" class="with-js" content="Drone Footage Of The Island And The Sea By Taryn Elliott Taryn Elliott on Pexels" placement="top-end" style="--sl-tooltip-arrow-size: 0; --max-width: 600px;">
            <svg width="16" height="16" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" id="video-credit-js">
                <path d="M12 11.5V16.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12 7.51L12.01 7.49889" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </sl-tooltip>
        <div class="hero-content">
            <h2>Ark</h2>
            <p>The heart of SudoVanilla</p>
        </div>
    </div>
</div>

<style>
.landing-hero {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 text-align: left;
	 position: relative;
}
 .landing-hero video {
	 width: 100%;
	 height: 500px;
	 border-radius: 10px;
	 opacity: 0.32;
	 object-fit: cover;
	 pointer-events: none;
}
 .landing-hero #video-credit, .landing-hero #video-credit-js {
	 position: absolute;
	 color: white;
	 bottom: 0px;
	 right: 0px;
	 font-size: 10px;
	 opacity: 0.4;
	 margin: 32px;
}
 .landing-hero #video-credit a, .landing-hero #video-credit-js a {
	 color: white;
}
 .landing-hero .hero-content {
	 position: absolute;
	 display: flow-root;
	 width: 100%;
	 max-width: 1200px;
	 padding-left: 16%;
}
 .landing-hero .hero-content h2 {
	 font-size: 50px;
	 margin: 0px;
}
 .landing-hero .hero-content .sudovanilla-logo p {
	 font-size: 64px !important;
	 margin: 0px !important;
}
 .landing-hero .hero-content p {
	 font-size: 24px;
	 margin: 0px;
}
@media screen and (max-width: 800px) {
	.landing-hero {
		position: fixed !important;
		top: -16px !important;
		left: 0px !important;
		width: 100% !important;
		height: 100% !important;
	}
	.landing-hero video {
		height: 100% !important;
		border-radius: 0px !important;
	}
	.hero-content {
		top: 40% !important;
	}
}
</style>