<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Kevin wif Hat - XMAS Edition</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/animations.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <audio id="kevinSound" preload="auto">
        <source src="assets/sounds/kevin.mp3" type="audio/mpeg">
    </audio>
    <audio id="yesSound" preload="auto">
        <source src="assets/sounds/yes.mp3" type="audio/mpeg">
    </audio>
    <audio id="noSound" preload="auto">
        <source src="assets/sounds/no.mp3" type="audio/mpeg">
    </audio>
    <link rel="icon" type="image/png" href="assets/images/favicon.png">
    <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/images/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon-180x180.png">
</head>
<body>
    <!-- Popup will be added here by JavaScript -->
    
    <!-- Main content container -->
    <div id="main-content">
        <!-- Existing content goes here -->
       
        <!-- Snow Container -->
        <div class="snow-container" id="snowContainer"></div>
        
        <!-- Floating Heads Container -->
        <div id="floatingHeadsContainer"></div>
        
        <!-- Main content structure -->
        <main>
            <!-- Hero Section -->
            <section id="hero" class="hero-section">
                <div class="container">
                    <div class="hero-content">
                        <div class="contract-address">
                            <a href="https://solscan.io/account/KevB5AJZxqBtS6ZuxVeqo9g72sN6MEG7pbMYy1Zj2Zq" target="_blank" rel="noopener noreferrer">
                                <p>Wallet: KevB5AJZxqBtS6ZuxVeqo9g72sN6MEG7pbMYy1Zj2Zq</p>
                            </a>
                        </div>
                        <img src="assets/images/seed.png" alt="Kevin wif Hat Logo" class="hero-logo">
                        <div class="hero-subtitle">
                            <div id="questionGame">
                                <!-- Question 1 -->
                                <div id="question1" class="question-container">
                                    <p>Question 1: What is the handle of our X account?</p>
                                    <div class="input-container">
                                        <input type="text" id="answer1" placeholder="Enter your answer">
                                        <button type="button" onclick="window.checkAnswer(1)">Submit</button>
                                    </div>
                                </div>

                                <!-- Question 2 -->
                                <div id="question2" class="question-container" style="display: none;">
                                    <p>Question 2: What was the final item on Kevins “My Shopping List for Xmas” post from the @kevin_wif_hat account?</p>
                                    <div class="input-container">
                                        <input type="text" id="answer2" placeholder="Enter your answer">
                                        <button type="button" onclick="window.checkAnswer(2)">Submit</button>
                                    </div>
                                </div>

                                <!-- Question 3 -->
                                <div id="question3" class="question-container" style="display: none;">
                                    <p>Question 3: What is Kevin using to protect his house?</p>
                                    <div class="input-container">
                                        <input type="text" id="answer3" placeholder="Enter your answer">
                                        <button type="button" onclick="window.checkAnswer(3)">Submit</button>
                                    </div>
                                </div>

                                <!-- Hint (hidden initially) -->
                                <div id="hint" class="hint-container" style="display: none;">
                                    <p>Congratulations! Here's your hint: Home Alone 1990 Full Movie English HD 1080p (movie for only christmas it will be removed soon)</p>
                                </div>
                            </div>
                        </div>
                     
                    </div>
                </div>
            </section>

        <footer>
            <div class="container">
                <p>© 2024 Kevin wif Hat. Don't get left Home Alone this XMAS!</p>
            </div>
        </footer>
    </div>

    <!-- Add JavaScript files at the end of body -->
    <script src="js/main.js"></script>
    <script src="js/calendar.js"></script>
</body>
</html>

