:root{
    --base-unit: max(8vw, 100px);
    --unitheight: 1;
}

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

a, a:hover, a:visited, a:active, a:link{
    color: inherit;
    text-decoration: none;
}

.mainholdr{
    display: block;
    width: 100%;
    --units: 9;
    --unitheight: calc(var(--base-unit) * var(--units));
    box-sizing: border-box;
}





@media (max-width: 450px){

    .vertdashholdr{
        display: inline-block;
        width: 100px;
        height: var(--unitheight);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .vertdashbox{
        background-color: transparent;
        display: inline-block;
        width: 25px;
        height: 100%;
        box-sizing: border-box;
        border-right-color: ghostwhite;
        border-right-width: 4px;
        border-right-style: dashed;
        color: transparent;
    }

    .infocolumn{
        background-color: transparent;
        display: inline-block;
        width: calc(100% - 100px);
        height: var(--unitheight);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        vertical-align: top;
    }

    .leftspacer{
        background-color: transparent;
        display: inline-block;
        box-sizing: border-box;
        width: 75px;
    }

}

@media (min-width: 451px){

    .vertdashholdr{
        display: inline-block;
        width: max(10%, 100px);
        height: var(--unitheight);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .vertdashbox{
        background-color: transparent;
        display: inline-block;
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        border-right-color: ghostwhite;
        border-right-width: 4px;
        border-right-style: dashed;
        color: transparent;
    }

    .infocolumn{
        background-color: transparent;
        display: inline-block;
        width: min(90%, calc(100% - 100px));
        height: var(--unitheight);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        vertical-align: top;
    }

    .leftspacer{
        background-color: transparent;
        display: inline-block;
        box-sizing: border-box;
        width: 50%;
    }

}



.botdash{
    border-bottom-color: ghostwhite;
    border-bottom-style: dashed;
    border-bottom-width: 4px;
    color: transparent;
}



.fulltang{
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.halforder{
    height: calc(calc(var(--unitheight) / var(--units)) / 2)
}

.firstorder{
    height: calc(var(--unitheight) / var(--units));
}

.secondorder{
    height: calc(calc(var(--unitheight) / var(--units)) * 2);
}

.thirdorder{
    height: calc(calc(var(--unitheight) / var(--units)) * 3);
}

.halved{
    height: 50%;;
}

.twothirded{
    height: 67%;
}

.thirded{
    height: 33%;
}

.red{
    background-color: red;
}

.blue{
    background-color: cornflowerblue;
}

.golden{
    background-color: goldenrod;
}

.green{
    background-color: palegreen;
}



.infocard{
    background-color: transparent;
    position: relative;
    display: inline-block;
    width: 75%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: top;
    z-index: 3;
}

.leadout{
    background-color: transparent;
    display: inline-block;
    width: 25%;
    height: 100%;
    box-sizing: border-box;
}

@media (max-width: 716px){

    .flexer{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 50%;
    }

    .menuicon{
        display: flex;
        box-sizing: border-box;
        height: 100%;
        aspect-ratio: 1;
        background-color: transparent;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
    }

    .iconspacer{
        box-sizing: border-box;
        background-color: transparent;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .cardinfo{
        display: block;
        background-color: black;
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        border-color: ghostwhite;
        border-width: 3px;
        border-style: solid;
        font-size: 1vw;
        overflow: auto;
    }

    .descriptext{
        display: block;
        font-size: calc(2.3em + calc(calc(716px - 100vw) / 80));
        line-height: 1.2;
        padding-left: max(5px, 1vw);
        padding-right: max(5px, 1vw);
        box-sizing: border-box;
        color: ghostwhite;
    }

    .titletext{
        display: block;
        font-size: 7em;
        box-sizing: border-box;
        color: cornflowerblue;
        text-align: center;
    }

}

@media (min-width: 717px){

    .flexer{
        display: inline-flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 33%;
        height: 100%;
        vertical-align: top;
    }

    .menuicon{
        display: flex;
        box-sizing: border-box;
        width: 100%;
        aspect-ratio: 1;
        background-color: transparent;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
    }

    .iconspacer{
        box-sizing: border-box;
        background-color: transparent;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .cardinfo{
        display: inline-block;
        background-color: black;
        width: 67%;
        height: 100%;
        box-sizing: border-box;
        border-color: ghostwhite;
        border-width: 3px;
        border-style: solid;
        font-size: 1vw;
        overflow: auto;
    }

    .descriptext{
        display: block;
        font-size: calc(2em + calc(calc(1920px - 100vw) / 200));
        line-height: 1.2;
        padding-left: max(5px, 1vw);
        padding-right: max(5px, 1vw);
        box-sizing: border-box;
        color: ghostwhite;
    }

    .titletext{
        display: block;
        font-size: 7em;
        box-sizing: border-box;
        color: cornflowerblue;
        padding-left: max(5px, 1vw);
    }

}

.menuiconcontent{
    width: 95%;
    height: 95%;
    background-color: black;
    box-sizing: border-box;
    border-radius: 20%;
    border-color: ghostwhite;
    border-width: 3px;
    border-style: solid;
    flex-grow: 0;
    flex-shrink: 0;
    align-self: center;
}

.relativedashbox{
    display: block;
    position: relative;
    width: 75%;
    height: 100%;
    top: calc(-100% - 4px);
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color: ghostwhite;
    z-index: 1;
}

@media (max-width: 450px){

    .node{
        display: block;
        position: absolute;
        box-sizing: border-box;
        background-color: black;
        border-color: ghostwhite;
        border-width: 4px;
        border-style: solid;
        border-radius: 20%;
        height: 2vw;
        width: 2vw;
        top: 195px;
        left: -80px;
    }
}

@media (min-width: 451px) and (max-width: 999px){

    .node{
        display: block;
        position: absolute;
        box-sizing: border-box;
        background-color: black;
        border-color: ghostwhite;
        border-width: 4px;
        border-style: solid;
        border-radius: 20%;
        height: 2vw;
        width: 2vw;
        top: calc(calc(15vw - 2px) + calc(calc(1250px - 100vw) / 6.25));
        left: calc(-6vw - 29px + calc(calc(100vw - 450px) / 20));
    }

}

@media (min-width: 1000px) and (max-width: 1249px){

    .node{
        display: block;
        position: absolute;
        box-sizing: border-box;
        background-color: black;
        border-color: ghostwhite;
        border-width: 4px;
        border-style: solid;
        border-radius: 20%;
        height: 2vw;
        width: 2vw;
        top: calc(calc(15vw - 2px) + calc(calc(1250px - 100vw) / 6.25));
        left: calc(-6vw - calc(calc(1250px - 100vw) / 100));
    }

}

@media (min-width: 1250px){

    .node{
        display: block;
        position: absolute;
        box-sizing: border-box;
        background-color: black;
        border-color: ghostwhite;
        border-width: 4px;
        border-style: solid;
        border-radius: 20%;
        height: 2vw;
        width: 2vw;
        top: calc(15vw - 2px);
        left: -6vw;
    }
}



.nullpos{
    position: relative;
}

.copybar{
    display: block;
    height: 1.5vw;
    width: 100%;
}

@media (max-width: 450px){

    .copyspace{
        display: flex;
        width: 50px;
        height: 100%;
        justify-content: center;
    }

    .copydash{
        border-color: cornflowerblue;
        height: 100%;
        border-width: 1px;
        border-style: dashed;
        box-sizing: border-box;
        font-size: 1.25vw;
        color: ghostwhite;
        text-align: center;
        align-self: center;
    }
}

@media (min-width: 451px){

    .copyspace{
        display: flex;
        width: max(10%, 100px);
        height: 100%;
        justify-content: center;
    }

    .copydash{
        border-color: cornflowerblue;
        height: 100%;
        border-width: 1px;
        border-style: dashed;
        box-sizing: border-box;
        font-size: 1.25vw;
        color: ghostwhite;
        text-align: center;
        align-self: center;
    }
}



.zupone{
    z-index: 1;
}

.zuptwo{
    z-index: 2;
}

.zupthree{
    z-index: 3;
}

.transp{
    background-color: transparent;
}



.one:hover ~ .one{
    background-color: cornflowerblue;
}

.err:hover ~ .err{
    background-color: crimson;
}

.menuiconcontent:hover{
    background-color: cornflowerblue;
}

.err:hover{
    background-color: crimson;
}

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

.savage{
    width: 100%;
    height: auto;
}

.pixlpic{
    display: block;
    width:100%;
    height: auto;
    image-rendering: crisp-edges;
}