/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    background-color: white;
    color: black;
    font-size: 10px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    animation: fade-in 0.25s steps(3);
}
body {
    background: #fff;
    color: #292725;
    font-family: "Erica One", sans-serif, monospace;
    font-size: 12px;
    text-align: justify;
    line-height: 1.1;
}

main {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 400px;
}

main1 {
    display: flex;
    padding-top: 12em;   
    padding-left: 22em;
    height: 100vh;
    gap: 2em;
}

#blueloser {
    position: relative;
    background: url(https://files.catbox.moe/um01y2.png) center no-repeat;
    width: 400px;
    height: 185px;
    border: 1px dotted #252794;
}

#blue {
    z-index: 1;
    top: -98px;
    right: 20px;
    font-size: 80px;
    letter-spacing: -8px;
    transform: scaleY(2);
}

#loser {
    z-index: 2;
    top: -15px;
    right: -3px;
    font-size: 45px;
    letter-spacing: -5px;
    transform: scaleY(1.95);
}

h1 {
    position: absolute;
    user-select: none;
    pointer-events: none;
    margin: 0;
    color: #fff;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 0 #0000ff, -1px -1px 0 #0000ff, -1px 1px 0 #0000ff, 1px -1px 0 #0000ff;
}

h2 {
    display: block;
    color: #fff;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 0 #0000ff, -1px -1px 0 #0000ff, -1px 1px 0 #0000ff, 1px -1px 0 #0000ff;
    font-size: 18px;
    text-align: right;
    margin: 0.5em 0;
}

h3 {
    margin: 0;
    color: #fff;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 0 #0000ff, -1px -1px 0 #0000ff, -1px 1px 0 #0000ff, 1px -1px 0 #0000ff;
}

a {
    color: #000ff
}

a:not(.icon) {
    color: #fff;
    text-decoration: 1px underline dotted #fff;
    letter-spacing: 1px;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

hr {
    height: 1px; /* Adjusts the height of the line */
    background-color: #0000ff; /* Sets the desired color */
    border: none; /* Removes the default border */
}


nav {
    right: 1em;
    top: 68px;
    text-align: right;
}

nav {
    z-index: 999;
    position: absolute;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 10px;
    line-height: 1.25;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

#hm {
    z-index: 3;
    position: absolute;
    top: -115px;
    pointer-events: none;
    user-select: none;
}

#info > div {
    display: flex;
    justify-content: space-between;
}

#info > div {
    div {
        display: flex;
        gap: 0.5em;
    }
}

aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    width: 245px;
    font-size: 9px;
}

aside {
    display: block;
    unicode-bidi: isolate;
}

#mp {
    position: relative;
    background: url(https://files.catbox.moe/usbjoq.png) center no-repeat;
    height: 345px;
    border: 1px dotted #bcbcbd;
}

#the {
    z-index: 2;
    top: 25px;
    left: 45px;
    font-size: 40px;
    letter-spacing: -3px;
    transform: scaleY(1.95);
}

#main {
    z-index: 1;
    top: -25px;
    left: -27px;
    font-size: 55px;
    letter-spacing: -5px;
    transform: scaleY(2);
}

#page {
    z-index: 1;
    top: -10px;
    right: -18px;
    font-size: 60px;
    letter-spacing: -7px;
    writing-mode: sideways-rl;
    transform: scaleX(1.75);
}

* {
    box-sizing: border-box;
    image-rendering: pixelated;
    scrollbar-width: thin;
    scrollbar-color: #29272575 transparent;
}

nav1 {
    bottom: 107px;
    left: 1em;
}

nav1 {
    z-index: 999;
    position: absolute;
    display: flex;
    flex-direction: column;
    color: #98a5af;
    font-size: 10px;
    line-height: 1.25;
    text-shadow: 1px 1px #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
}

.tab:not(:target) {
    display: none !important;
}

.tab:target {
    animation: fade-in 0.25s steps(3);
    outline: none !important;
    border: none !important;
}

.tab {
    overflow-y: auto;
    width: 500px;
    padding: 0 1em;
    overflow-y: auto;
}

.tab:target {
    animation: fade-in 0.25s steps(3);
    outline: none !important;
    border: none !important;
}
.tab4 {
    width: 300px;
    max-height: 335px;
    padding: 0 1em;
    overflow-y: auto;
}

#xtra {
    position: relative;
    background: url(https://files.catbox.moe/evc1dv.png) center no-repeat;
    height: 345px;
    border: 1px dotted #bcbcbd;
}

main4 {
    display: flex;
    gap: .5em;
}

nav4 {
    top: 1em;
    right: 1em;
    text-align: right;
}

nav4 {
    z-index: 999;
    position: absolute;
    display: flex;
    flex-direction: column;
    color: #98a5af;
    font-size: 10px;
    line-height: 1.25;
    text-shadow: 1px 1px #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
}