html {
    /* background from https://css-pattern.com/cube-columns/ */
    position: relative;
    --s: 113px;
    --c1: #000000;
    --c2: #0d0d0d;
    --c3: #151515;

    --_g: var(--c3) 0 120deg,#0000 0;

    background:
        conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
        conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
        conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
        conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
        linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%, var(--c1) 0 calc(500%/6),var(--c2) 0);

    background-size: calc(1.732 * var(--s)) var(--s);
    background-color: #000;
    
    /* for the footer */
    height: auto;
}

body {
    margin: 0;
    color: #fff;
    font-family: Arial, sans-serif;

    position: relative;

    /* for the footer */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    padding: 0 20rem;

    /* for the footer */
    flex: 1;
}

a {
    color: lightskyblue;
}

.fingerprint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;

    background: #1e1e1e;
    color: #cfcfcf;

    padding: 0.35rem;
    border-radius: 6px;
}

.footerfr{
    background-color: black;
    line-height: 1.5rem;
    font-size: 0.75rem;
    color:lightslategrey;

    display: flex;
    justify-content: center;
    width: 100%;
}

.ascii {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.1;
    white-space: pre;
    overflow-x: auto;
    padding: 1rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;

    position: relative;
}

.ascii-wrapper {
    position: relative;
    z-index: 1;
}

.ascii-wrapper::before {
    /*start gradient mid ascii art */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(to bottom, #000 0%, #000000c4 50%, #0000007c 75%, #00000000 100%, transparent 100%);

    width: 100vw;
}

.center {
    display: flex;
    justify-content: center;
    width: 100%;
}

.box {
    border: 2px solid #555;
    border-radius: 8px;
    display: inline-block;
    padding: 0rem 1rem 0rem 1rem;
}

legend {
    padding: 0 0.5rem;
    font-weight: 600;
}

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.johnvertisement {
    /* straight from https://john.citrons.xyz/ */
    margin-left: auto;
    display: block;
    margin-right: auto;
    max-width: 732px;
    width: 100%;
    height: 94px;
    border: none;
}

.color-shift {
    font-weight: bold;

    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, red);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: smoothShift 5s linear infinite;
    display: inline-block;
}

@keyframes smoothShift {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
}

/* MOBILE */
/* ----- */
@media (max-width: 600px) {
    html {
        --s: 60px; /* smaller boxes in background for mobile */
        background-size: calc(1.732 * var(--s)) var(--s);
    }
    .ascii {
        font-size: clamp(1px, 0.7vw, 12px);
    }
    main {
        padding: 0 5vh;
        margin-left: 0;
    }
    .johnvertisement {
        height: 50px;
    }
}