<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/png" href="/assets/player/player_neutral.png">
    <link rel="preload" href="/assets/gamble/gamble_background.png" as="image">
    <link rel="preload" href="/assets/maps/S1map.png" as="image">
    <title>Ben's Sorcery Project</title>
    <link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Pirata One', cursive;
            margin: 0;
            background-image: url('/assets/background.png');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #f0f0f0;
            overflow: hidden; /* Prevents scrollbars */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* Ensure it takes full viewport height */
            text-align: center;
        }

        /* NEW: Styles for the subtitle */
        .subtitle {
            font-size: 2.5vh; /* Smaller font size using vh */
            color: #aaa;      /* Grey color */
            margin-bottom: 0.5vh; /* Small space below subtitle */
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Less pronounced shadow */
        }

        h1 {
            /* font-size: 5em (80px) -> (80 / 1135.8) * 100 = 7.04vh */
            font-size: 7.04vh; 
            /* margin-bottom: 50px -> (50 / 1135.8) * 100 = 4.4vh */
            /* Adjusted margin to account for subtitle */
            margin-top: 0; 
            margin-bottom: 4.4vh; 
            /* text-shadow: 4px 4px 8px -> Horizontal values based on width */
            /* (4 / 2304)*100 = 0.17vw; (8 / 2304)*100 = 0.35vw */
            text-shadow: 0.17vw 0.17vw 0.35vw rgba(0,0,0,0.7); 
            color: #fff; /* White color for contrast */
        }

        .action-button { 
            background-color: rgba(0, 0, 0, 0.4);
            /* border: 3px -> (3 / 2304) * 100 = 0.13vw */
            border: 0.13vw solid #aaa;
            /* border-radius: 15px -> (15 / 2304) * 100 = 0.65vw */
            border-radius: 0.65vw;
            /* height: 80px -> (80 / 1135.8) * 100 = 7.04vh */
            height: 7.04vh; 
            /* padding: 0 40px -> (40 / 2304) * 100 = 1.74vw */
            padding: 0 1.74vw; 
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f0f0f0;
            /* font-size: 3em (48px) -> (48 / 1135.8) * 100 = 4.22vh */
            font-size: 4.22vh; 
            text-decoration: none;
            transition: background-color 0.2s ease, transform 0.2s ease;
            z-index: 10;
             /* box-shadow: 0 5px 15px -> Horizontal values based on width */
            /* (5 / 2304)*100 = 0.22vw; (15 / 2304)*100 = 0.65vw */
            box-shadow: 0 0.22vw 0.65vw rgba(0,0,0,0.3);
        }

        .action-button:hover {
            background-color: rgba(0, 0, 0, 0.6);
            transform: scale(1.05); /* Subtle grow effect on hover */
        }
    </style>
</head>
<body>
    <!-- NEW: Subtitle added here -->
    <p class="subtitle">Project #4</p> 

    <h1>Ben's Sorcery Project</h1>

    <a id="start-map-link" class="action-button" href="/project4/map">Enter Map</a>

</body>
</html>