:root {
    --OGWITE: #d1d0c5;
    --YELLER: #F8B428;
    --YELLOWEDORANGE: #F26722;
    --FADYLRORANG: #EA5C58;
    --DEPTHORANGE: #D65643;
    --REDISHORANGISH: #F1462F;
    --HOTPINKISH: #FA305C;
    --GLOWUPPINK: #CE00DB;
    --DARKENDPINKORANGE: #9D255F;
    --DEEPPURP: #2A0253;
    --DEEPrPURP: #1E0139;
    --MADDRIPBLUE: #08014A;
    --DEEPBLU: #09024A;
    --ALTBLEU: #152435;
    --BABYBUTTONBLUE: #1A5B86;
    --BASICTECHBLACK: #22252A;
    --BTBBORDER: #4B4D51;


    --NICEPNK: #803955;
    --OTROGREN: #1D3414;
    --SPOTOGREEN: #037e0c;
    --NICEGRN: #2C5C49;
    --BANGINRED: #6B1916;
    --REDPASS: #7A2533;
    --OINK: #471932;
    --REPURP: #37104B;
    --PINKREDPUR: #531762;
    --PINKRD: #792330;
    --ORNG: #E39635;
    --EYEOFTHESTRM: #8D2D29;
    --MADDRIPv2: #150144;
    --BLUEVAR3: #152666;
    --BLUVAR5: #1B0E75;
    --BOGSTANDARDBLu: #1B2D7D;
    --BOGv2: #172455;
    --ROYAL: #0C175C;
    --NICEBRIGHT: #57A8F8;
    --FLOORESSE: #8AEDFC;
    --FLOURX2: #89FBD2;
}

* {
    box-sizing: border-box;
    font-family: Verdana, sans-serif;
    padding: 0;
    margin: 0;
}

dialog {
    width: 50vw;
    height: 50vh;
    border: 4px red solid;
    position: absolute;
    grid-auto-flow: row;
    align-content: center;
    justify-content: center;
    grid-gap: .5em;
}

dialog[open] {
    display: grid;
}

.gridRow {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
}

.cluster > *:not(*:first-child) {
    padding-left: .5em;
}

.navbutton {
    position: fixed;
    top: 10px;
    color: var(--MADDRIPBLUE);
    font-size: medium;
    cursor: pointer;
}

.nBRight {
    right: 10px;
}

#view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    align-content: space-evenly;
    pointer-events: none;
    & > div {
        width: 100%;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        display: flex;
        & > * {
            pointer-events: all;
        }
    }
}

#links {
    z-index: 2;
    position: absolute;
    display: flex;
    gap: 20px;
    align-content: center;
    justify-content: center;
}

#search {
    width: 45vw;
    height: 42px;
    border-radius: 4px;
    border: var(--MADDRIPBLUE);
    background: rgba(119, 183, 179, 0.88);
    text-indent: 2em;
    color: whitesmoke;

}

@media (max-width: 800px) {
    #search {
        width: 80vw;
    }

    #links {
        flex-direction: column;

        & .linkStack {
            grid-gap: 0;
            height: 120px;
        }
        & .split {
            width: 120px;
            height: 40px;
            transform: rotate(-40deg);
            margin: 0 -20px;
        }
        & .hoverCapture:hover > .linkStack {
            display: grid;
            grid-auto-flow: column;
        }
    }
}

#links > div {
    height: 120px;
    width: 120px;
    display: grid;
    grid-auto-flow: row;
    align-content: center;
    justify-content: center;
}

a {
    text-decoration: none;
}

.linkRepr {
    color: whitesmoke;
    background-color: var(--MADDRIPBLUE);
    /*border: darkblue solid 2px;*/
    border-radius: 5px;
    text-align: center;
    display: grid;
    align-content: center;
    font-size: 24px;
    cursor: pointer;
}

.full {
    width: 120px;
    height: 120px;
}

.split {
    width: 120px;
    height: 40px;
}

.linkStack {
    display: none;
    grid-auto-flow: row;
    align-content: center;
    grid-gap: .5em;
}

.hoverCapture {
    min-height: fit-content;
    align-content: center;
}

.hoverCapture:hover > .linkRepr {
    display: none;
}

.hoverCapture:hover > .linkStack {
    display: grid;
}


.stack {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    justify-content: center;
    width: 100%;
}

.stack > button {
    margin-left: 1em;
    padding: 0 .5em 0 .5em;
}


#history {
    text-align: center;
    display: grid;
    grid-auto-flow: row;
    align-content: center;
    justify-content: center;
    width: 100%;
}

canvas {
    width: 10vw;
    height: 10vw;
}

#settings {
    fill: black;
    position: fixed;
    bottom: 4px;
    left: 4px;
    width: 2em;
    height: 2em;
    background: none;
    border: none;
    z-index: 1;
    cursor: pointer;
}

#settings > img {
    width: 2em;
    height: 2em;
    /*margin: 4px 4px;*/
}

#field {
    position: absolute;
    z-index: -2;
    width: 100vw;
    height: 100vh;
    background: #eee;
    margin: 0 auto;
    display: block;
}

*:is([hidden], [hidden] *) {
    display: none;
}

.link {
    padding-top: .2em;
}

.link > input {
    padding: initial .2em initial .2em;
    width: 8em;
    text-align: center;
}

.link > button {
    padding: initial .2em initial .2em;
}

#IPBox {
    width: min-content;
    text-align: center;
}

dialog {
    z-index: 5;
    position: absolute;
    width: 60vw;
    left: 20vw;
    height: 40vh;
    top: 30vh;
    background-color: whitesmoke;
}