<!DOCTYPE html>
<html lang="en">
    {{ partial "head.html" . }}
<body {{ if .Site.Params.background_image }}style="background-image: url('{{ .Site.Params.background_image }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"{{ end }}>
    <!-- Background Animation -->

    <div style="
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
">
    <div style="
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 40px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        max-width: 600px;
        margin: 0 auto;
        ">
        <!-- Your content here -->
        <div class="container mx-auto px-4 py-14 max-w-md">
            <!-- Profile Section -->
            {{ partial "profile.html" . }}

            <!-- Links Section -->
            {{ partial "link-card.html" . }}

            <!-- Spotify Embed -->

            <!-- Messaging Etiquette section -->
              
            
            <!-- Embed with hue-shift filter -->
            <!-- style="filter: hue-rotate(150deg) saturate(0.6) brightness(0.9);" -->


            <!-- About Me section (If you want to write about yourself, uncomment the section below)--> 
            {{ partial "about.html" . }}

            <!-- Instructions section (After you're done adding your links, remove or comment the line below) -->

            <footer class="text-center text-xs opacity-60">
                © {{ .Site.Params.copyright }}
            </footer>
            
        </div>
    </div>
    </div>

    <script src="js/script.js"></script>
</body>
</html>
