<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <div class="main-container">

        <h1 id="synonymised">Synonymised</h1>


        <p class="description">The objective of Synonymised is to list five synonyms for the provided definition, without listing the defined word itself. For each correct answer you provide, a hint will be given on what the defined word is, so you can avoid it in your next guess. <br><br> You have <b>five</b> incorrect guesses - hit the trap, you're out! <br><span style="font-size:12px", "line-height: 5px">PS I'm gonna now note what kinda word it is in the definition, like [a] for adjective or [v] for verb, etc. you get it</span></p>

        

        <div class="game">

            <p class="prompt">Today's definition:<br><i>[v] cease work or movement in order to relax, sleep, or recover strength</i></p>


            <!-- Hint Area -->

            <div id="hintArea" class="hint-area"></div>


            <!-- Guess Containers -->

            <div id="guess1" class="guess-container">

                <input id="guessInput1" type="text" class="guess-input" placeholder="Type your guess...">

            </div>

            <div id="guess2" class="guess-container">

                <input id="guessInput2" type="text" class="guess-input" placeholder="Type your guess...">

            </div>

            <div id="guess3" class="guess-container">

                <input id="guessInput3" type="text" class="guess-input" placeholder="Type your guess...">

            </div>

            <div id="guess4" class="guess-container">

                <input id="guessInput4" type="text" class="guess-input" placeholder="Type your guess...">

            </div>

            <div id="guess5" class="guess-container">

                <input id="guessInput5" type="text" class="guess-input" placeholder="Type your guess...">

            </div>


            <!-- Message Area -->

            <div id="message" class="message-area"></div>

        </div>

    </div>



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

</body>

</html>