<meta name="viewport" content="width=device-width">

<title>SNAKE Changelog.</title>
<link rel="icon" type="image/x-icon" href="favicon.svg">
<style>
    body {
        background-color: black;
    }

    h1 {
        font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
        text-align: center;
        color: #ffffff;
    }
    
    .desc {
        font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
        text-align: center;
        color: #ffffff;
    }
    
    .break {
        margin: auto;
        width: 100%;
        height: 1px;
        width: 400px;
        background: #717171;
        border-bottom: 1px solid #313030;
    }
    
    .date {
        font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
        color: grey;
        font-size: 30px;
        text-align: center;
    }
    
    .updates {
        font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
        color: rgb(239, 236, 236);
        text-align: center;
    }

    .img {
        display: block;
        margin: 10px auto;
        max-width: 49%;
        border: 2px solid #ffffff;
        border-radius: 5px;
    }

    .video {
        display: block;
        margin: 10px auto;
        max-width: 45%;
        border: 2px solid #ffffff;
        border-radius: 5px;
    }

    .fallback-text {
            color: red;
            font-size: 18px;
        }
</style>

<h1><u>Changelog</u>:</h1>
<h3 class="desc">Updates to <a href="https://bbcbitesize.vercel.app">SNAKE</a>.</h3>
<div class="break"></div>
<h3 class="date">==============================[December 21st 2024]==============================</h3>
<div>
    <li class="updates">Created Changelog HTML.</li>
    <img class="img" src="img1.png" alt="Changelog Update Screenshot">
    
    <li class="updates">Made Spacing Between "Coins" and The coinCount smaller.</li>
    <img class="img" src="img2.png" alt="coinCount Spacing Update">
    
    <li class="updates">Created Changelog Button on Main Website.</li>
    <img class="img" src="img3.png" alt="Creation of Changelog Button.">

    <li class="updates">Video Demo of Changelog Button.</li>
    <video class="video" controls>
        <source src="video1.mp4" type="video/mp4">
        <div class="fallback-text">
        Your browser does not support the video tag.
        </div>
    </video>
</div>
