```html
<!-- =========================
     NUKE ALL BUTTON
     ========================= -->

<div id="nukeall" onclick="NUKEALL()">
    <img src="nukeall.png" alt="NUKE ALL">
</div>

<div id="nukeOverlay">
    <img id="nukeGif" src="nuke.gif" alt="">
</div>


<!-- =========================
     HEADER
     ========================= -->

<div id="header">
    <input type="checkbox" id="headerToggle">

    <label for="headerToggle">
        <img id="headerIdle"
             src="https://nordes.neocities.org/grubsidle.gif"
             alt="Header">

        <img id="headerClick"
             src="https://nordes.neocities.org/MOBIUSgifclick.gif"
             alt="">
    </label>
</div>


<div id="headerArea">

    <nav id="navbar">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ISSUE 1</a></li>
            <li><a href="#">ART</a></li>
        </ul>
    </nav>

</div>


<!-- =========================
     MAIN CONTENT
     ========================= -->

<div id="flex">

    <main>

        <h1>A HOBBY COMIC Of Mine</h1>

        <p>This will be updated randomly.</p>

        <p>
            If you want to know more, follow me on
            <a href="https://www.tiktok.com/@omnibus798"
               target="_blank"
               rel="noopener noreferrer">
                TikTok
            </a>
        </p>

        <h1>Thanks, from Nordes</h1>

    </main>


    <div id="bigImage">
        <img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExeXRpOHl4MTBjOGY1bmcyZWd2am9kdml2Y21zOGFkMGluYjJqZjBsYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3oz8xy39wlsZmhdlmM/giphy.gif" alt="Comic strip">
    </div>


    <!-- MACE -->

    <div id="littleMace">
        <img id="maceIdle" src="maceidle.png" alt="Mace">
        <img id="maceSpin" src="macespin.gif" alt="">
    </div>


    <footer id="footer"></footer>

</div>


<!-- =========================
     CSS
     ========================= -->

<style>

:root {
    --header-image: url('https://nordes.neocities.org/grubsidle.gif');
    --body-bg-image: url('https://nordes.neocities.org/background.png');
    --text-box-image: url('https://nordes.neocities.org/text%20box.png');

    --content: #F0EEF0;
}


/* FONT */

@font-face {
    font-family: 'nordesfont';
    src: url('Nordesfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* BODY */

body {
    font-family: 'nordesfont', sans-serif;
    font-size: 40px;
    margin: 0;
    background-color: #08031A;
    color: #242124;
}


/* BACKGROUND */

body::before {
    content: "";
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background-image: var(--body-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: -1;
}


* {
    box-sizing: border-box;
}


/* CONTAINER */

#container {
    max-width: 900px;
    margin: 0 auto;

    position: relative;
    z-index: 1;
}


#container a {
    color: #F0EEF0;
    font-weight: bold;
}


/* =========================
   NUKE ALL BUTTON
   ========================= */

#nukeall {
    position: fixed;

    top: 10px;
    left: 10px;

    width: 100px;
    height: 100px;

    z-index: 100000;

    cursor: pointer;
}


#nukeall img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


#nukeall:hover {
    transform: scale(1.05);
}


/* =========================
   FULLSCREEN NUKE
   ========================= */

#nukeOverlay {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: black;

    z-index: 999999;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


#nukeGif {
    width: 100vw;
    height: 100vh;

    object-fit: cover;

    display: block;
}


/* =========================
   HEADER
   ========================= */

#header {
    width: 100%;
    height: 300px;

    position: relative;

    overflow: hidden;
}


/* Hide checkbox */

#headerToggle {
    display: none;
}


/* Header label */

#header label {
    display: block;

    width: 100%;
    height: 100%;

    cursor: pointer;

    position: relative;
}


/* Header GIFs */

#header img {
    position: absolute;

    width: 50%;
    height: 100%;

    object-fit: contain;

    left: 25%;
    top: 0;
}


/* Idle */

#headerIdle {
    display: block;
}


/* Click */

#headerClick {
    display: none;
}


/* Swap GIFs */

#headerToggle:checked + label #headerIdle {
    display: none;
}


#headerToggle:checked + label #headerClick {
    display: block;
}


/* =========================
   NAVBAR
   ========================= */

#navbar {
    height: 50px;

    background-color: transparent;

    width: 70%;

    margin: 0 auto;

    text-align: center;
}


#navbar ul {
    display: flex;

    padding: 0;
    margin: 0;

    list-style-type: none;

    justify-content: space-evenly;

    align-items: center;

    height: 100%;
}


#navbar li {
    padding: 0;
}


#navbar li a {
    color: #F0EEF0;

    font-weight: 800;

    font-size: 40px;

    text-decoration: none;
}


#navbar li a:hover {
    color: #a49cba;

    text-decoration: underline;
}


/* =========================
   FLEX
   ========================= */

#flex {
    display: flex;

    flex-direction: column;
}


/* =========================
   MAIN
   ========================= */

main {
    width: 70%;

    margin: 0 auto;

    padding: 20px;

    order: 1;

    text-align: center;

    background-image: var(--text-box-image);

    background-size: 100%;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================
   COMIC
   ========================= */

#bigImage {
    width: 100%;

    text-align: center;

    padding: 20px 0;

    order: 2;
}


#bigImage img {
    width: 100%;

    max-width: 700px;

    height: auto;

    display: block;

    margin: 0 auto;
}


/* =========================
   MACE
   ========================= */

#littleMace {
    position: fixed;

    bottom: 20px;
    right: 20px;

    width: 120px;
    height: 130px;

    z-index: 9999;

    cursor: pointer;
}


#maceIdle {
    width: 120px;
    height: auto;

    position: absolute;

    bottom: 0;
    right: 0;
}


#maceSpin {
    display: none;

    width: 280px;
    height: auto;

    position: absolute;

    bottom: 0;
    right: -80px;
}


/* =========================
   FOOTER
   ========================= */

footer {
    background-color: #BFA6A0;

    width: 70%;

    margin: 0 auto;

    padding: 20px;

    order: 3;

    text-align: center;
}


/* =========================
   HEADINGS
   ========================= */

h1,
h2,
h3 {
    color: #242124;
}


h1 {
    font-size: 50px;
}


p {
    font-size: 35px !important;
}


#navbar li a {
    font-size: 40px !important;
}


strong {
    color: #242124;
}


/* =========================
   BOX
   ========================= */

.box {
    background-color: #13092D;

    border: 1px solid #ED64F5;

    padding: 5px;
}


/* =========================
   TOP BAR
   ========================= */

#topBar {
    width: 100%;
    height: 30px;

    padding: 5px;

    font-size: 100px;

    background-color: #13092D;
}


/* =========================
   MOBILE
   ========================= */

@media only screen and (max-width: 800px) {

    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }

}

</style>


<!-- =========================
     JAVASCRIPT
     ========================= -->

    <script>

/* =========================
   MACE
   ========================= */

const littleMace = document.getElementById("littleMace");
const maceIdle = document.getElementById("maceIdle");
const maceSpin = document.getElementById("maceSpin");

littleMace.addEventListener("click", function() {

    maceIdle.style.display = "none";

    maceSpin.style.display = "block";

    setTimeout(function() {

        maceSpin.style.display = "none";

        maceIdle.style.display = "block";

    }, 1000);

});


/* =========================
   NUKE ALL
   ========================= */

function NUKEALL() {

    var overlay = document.getElementById("nukeOverlay");
    var gif = document.getElementById("nukeGif");

    /* Restart the GIF */
    gif.src = "nuke.gif?x=" + new Date().getTime();

    /* Show it */
    overlay.style.display = "flex";

    /* Hide after 3.5 seconds */
    setTimeout(function() {
        overlay.style.display = "none";
    }, 3500);
}

</script>