<!doctype html>
<html lang="en">
    <head><!doctype html>
<html lang="en">
    <head>
        <title>vomit heart - home</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap" rel="stylesheet" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="/style.css" rel="stylesheet" type="text/css" media="all" />
        <style>

                                                                            body {

                                                                              cursor: crosshair;                                                              display: flex;
                                                                      flex-direction: column;
                                                                      justify-content: center;
                                                                      align-items: center;
                                                                      position: relative;
                                                                                background-color: #c8284c;
                                                                                background-image: url("https://i.postimg.cc/vZ2N2JTs/cream-paper.png");
                                                                                background-repeat: repeat;
                                                                                font-size: 15px;
                                                                                color: #000000;

                                                            font-family: "Jacquard 24", system-ui;
                                                              font-weight: 400;
                                                              font-style: normal;

                                                            }
                                                            /* unvisited link */
                                                    a:link {
                                                      color: #920909;

                                                                              cursor: crosshair;
                                                    }

                                                    /* visited link */
                                                    a:visited {
                                                      color: #920909;

                                                                              cursor: crosshair;
                                                    }

                                                    /* mouse over link */
                                                    a:hover {
                                                      color: #c8284c;

                                                                              cursor: crosshair;
                                                    }

                                                    /* selected link */
                                                    a:active {
                                                      color: #920909;

                                                                              cursor: crosshair;
                                                    }
                                                                            div {
                                        border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABmElEQVR4AeyUgY7EIAhEu/f//3wHJC9RitSue1Uvl2inDBQGQvp1HMd355WwrkO+rmAJIj5FFSqx659S6EvkZlfcv3KymuqzoqVQI1Z9REL9rlxpb8W3+Fa+ND4S2ko0lb8jtNWx7lF5aajk9B2+lQd/iHeEhgmeIiOh2n15n9JS1tT3qm4ktApYxVChql6v1/TWLvkkHfZVHdX2UqEdueaHjAj1k8CmK2yP+G/hiNBbhUaDM6G2G1LAo1B2PN9r28fyaMWL63wyoefoiUwklJ2aJSusHwmdJTCt+y80Hc8bTp0oOwGSBtsj/lH0ebHJi22oQnEsjSrU/88Q7Hls/KNIPo/krXgVimNp7BU6vYmthbIbs6YY1t96okzS/l9ieBTKjud7bftYHq14cZ3Pn5joua2aYZc8EuV5bPy3cKuJsiu+QyYAev+nbPKDPq/p22qiYQdCWieCTx3qgVXdrSdadVIY7BCIiwmAVzzfg8SnuPVE6RRMOxUncaBQdrBBI5MHcWAVuuVE2bEWVh1+0GjVg7dS20z0BwAA///9JG8iAAAABklEQVQDAI1jmD/sPl3eAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
                                        border-width:  14px;
                                        border-style:  solid;
                                    }
                                            }
                                                                    }
                                                                            li {
                                                                      display: inline;

                                                                    }
                                                                            li {
                                                                      display: inline-block;


                                                                    }

                                                                    a {

                                                                      background-color: transparent;
                                                                        text-decoration: none;


                            }

                                                                    }
                                                                            ul {
                                                                      list-style-type: none;
                                                                      margin: 43;
                                                                      padding: 0;
                                                                      overflow: hidden;
                                                                       justify-content: center;
                                                                      display: flex;
                                                                    }

                                                                    li a {
                                                                      display: block;
                                                                      padding: 8px;
                                                                      background-color: transparent;
                                                                        font-size: larger;



                                                            }

                                                            h1 {
                                                    color: #920909;
                                                                      margin: 10px;
                                                            font-family: "Jacquard 24", system-ui;
                                                            font-size: x-large;
                        }
                                                            h2 {
                                                                display:flex;
                        justify-content:flex-end;
                                                    color: #920909;
                                                                      margin: 10px;
                                                            font-family: "Jacquard 24", system-ui;
                                                            font-size: larger
                        }
                                                               h3 {

                                                                 margin: 10px;

                                                    color: #920909;

                                                            font-family: "Jacquard 24", system-ui;
                                                           font-size: large;
                        }
                        .header {
                            display: flex;
                            align-text: center;
                            border: none;
                             color: #920909;
                                                                      margin: 23px;
                                                            font-family: "Jacquard 24", system-ui;
                                                            font-size: 64px;
                                                        padding: 0;
                        }
                                                   .nav {
                                                       display: flex;
                                        width: 400px;
                                      justify-content: center;
                              background-color: transparent;
                              }
                                    .container {
                                    font-family: Georgia, 'times new roman', times, serif;
                                        font-size: small;
                                        padding: 10px;

                                    }
                                    .footer {
                                          text-align: center;
              font-size: 15px;
              padding: 20px;
              background-color: transparent;
              bottom: 0;
              margin: 0;
              width: 400px;
              position: static;
              box-sizing: border-box;
            }
                                    .imgfairy {
                                        position: absolute;
                                        margin-top: 162px;
                                        margin-left: -707px;
                                    }
                                     .imgmoth {
                                        position: absolute;
                                        margin-top: -297px;
                                        margin-left: 675px;
                                         transform: rotate(-150deg);
                                    }
           
     
        </style>
    </head>
    <body>
        <img src="https://i.postimg.cc/qRrysGn3/fairy.png" class="imgfairy" />
        <img src="https://i.postimg.cc/gJKRN6qB/moth.png" class="imgmoth" />

        <div class="header">vomit heart</div>

        <div class="nav">
            <ul style="padding: 0; text-align: center">
                <li><a href="link">home</a></li>
                <li><a href="link">sobre mí</a></li>
                <li><a href="link">blog</a></li>
                <li><a href="https://stigmatadiaboli.neocities.org/mis-ocs">mis ocs</a></li>
                <li><a href="link">archivo</a></li>
            </ul>
        </div>

        <br />
        <div class="container" style="height: 300px; width: 400px; overflow: auto">
            <h1>Updates</h1>
            <h2>August 20th, 2025</h2>
            <h3>Welcome to the Thunderdome</h3>
            <p>
                This is little code mainly for a blogging site but you can use it for whatever, you can put back/forth
                links in your footer and link them to each month of entries. Or put whatever you want here, it is up to
                you! Please don't remove the credit or at least put it somewhere like in the links section. :D I'd
                recommend uploading the illustrations to your own server. Edit to your hearts content but remember the
                Ship of Theseus! <br />
                <center>
                    <img src="https://i.postimg.cc/Bn1zh7xj/bug.png" alt="divider" />
                </center>
            </p>

            <p>(The tables in the the preview might look off on codepen but the code is working fine.)</p>
        </div>
        <br />
        <div class="footer">
            © 2025 your name here / <a href="http://marycuntrarian.neocities.org">theme</a>
            <p>
                <details class="widget-area">
                    <summary>webrings</summary>
                    webrings here
                </details>
            </p>
        </div>
        <br /><br />
    </body>
</html>
