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

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

.vertspacer{
    display: block;
    height: 16.7vw;
    /*background-color: crimson;*/
    box-sizing: border-box;
}

@media (max-width: 450px){

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

@media (min-width: 451px){

    .vertdashbox{
        display: inline-block;
        height:100%;
        width: max(5%, 50px);
        box-sizing: border-box;
        border-right-width: 4px;
        border-right-style: dashed;
        border-right-color: ghostwhite;
    }
}



.mainenvelope{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.subenvelope{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: clip;
    overflow-clip-margin: 13vw;
}

.spacer{
    display: inline-block;
    background-color: transparent;
    width: 12.5%;
    height: 100%;
    border-width: 0px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.contcol{
    display: inline-block;
    background-color: transparent;
    width: 75%;
    height: 100%;
    border-width: 0px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.portfoliopicpos{
    display: block;
    /*background-color: teal;*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(calc(75vw / 4) * 3);
}

.textblock{
    display: block;
    position: relative;
    z-index: 2;
    left: -10vw;
    top: -12vw;
    box-sizing: border-box;
    border-width: 3px;
    border-style: solid;
    border-color: ghostwhite;
    background-color: black;
    color: ghostwhite;
    width: 35vw;
    height: 45vw;
    margin: 0;
    padding: 0;
    font-size: 1vw;
    overflow: auto;
}







@media (max-width: 1920px)
{

    .piccontainer{
        display: block;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: calc(100% + 12vw);
        /*background-color: yellow;*/
        top: -57vw;
        margin: 0;
        padding: 0;
    }
    
    .spacerblockwidth{
        display: inline-block;
        position: relative;
        /*background-color: orangered;*/
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: calc(calc(100vw - 1125px) / 1.35);
        height: 100%;
    }
    
    .secondarypicholder{
        display: inline-block;
        /*background-color: lightblue;*/
        box-sizing: border-box;
        width: min(100%, calc(100% - calc(calc(100vw - 1125px) / 1.35)));
        height: 100%;
        vertical-align: top;
    }
    
    .flexwrapper{
        display: inline-flex;
        background-color: transparent;
        box-sizing: border-box;
        flex-direction: column-reverse;
        width: 100%;
        height: 100%;
    }

    .spaceblockheight{
        background-color: transparent;
        box-sizing: border-box;
        width: 90%;
        height: calc(calc(100vw - 1125px) / 1.4);
    }
    
    .pictureofme{
        position: relative;
        box-sizing: border-box;
        z-index: 1;
        border-radius: 35px;
        margin: 0;
        padding: 0;
        width: min(832px, 100%);
        height: auto;
        aspect-ratio: 1.33;
    }
}

@media (min-width: 1921px)
{

    .piccontainer{
        display: block;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: calc(100% + 12vw);
        /*background-color: yellow;*/
        top: -57vw;
        margin: 0;
        padding: 0;
    }
    
    .spacerblockwidth{
        display: inline-block;
        position: relative;
        /*background-color: orangered;*/
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 590px;
        height: 100%;
    }
    
    .secondarypicholder{
        display: inline-block;
        /*background-color: lightblue;*/
        box-sizing: border-box;
        width: calc(100% - 590px);
        height: 100%;
        vertical-align: top;
    }
    
    .flexwrapper{
        display: inline-flex;
        background-color: transparent;
        box-sizing: border-box;
        flex-direction: column-reverse;
        width: 100%;
        height: 100%;
    }

    .spaceblockheight{
        background-color: transparent;
        box-sizing: border-box;
        width: 90%;
        height: 550px;
    }
    
    .pictureofme{
        position: relative;
        box-sizing: border-box;
        z-index: 1;
        border-radius: 35px;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1.33;
    }
}



.welcome{
    display: block;
    font-size: 4.5em;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.introduction{
    display: block;
    font-size: 3em;
    text-align: center;
    white-space: nowrap;
}

.nomen{
    display: block;
    font-weight: bold;
    white-space: nowrap;
}

.textvspace{
    font-size: 1em;
}

.verbage{
    display: block;
    text-align: center;
    font-size: 2em;
    white-space: nowrap;
}

.blue{
    color: rgb(107, 159, 255);
}

.numblue{
    color: rgb(206, 224, 255);
}

@media (max-width: 475px)
{

    .biocontent{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: min(calc(calc(calc(450px - 100vw) / 1.5) + 5px), 20px);
        height: calc(85vw + max(calc(calc(100vw - 1125px) / 1.4), 0px));
    }


    /*.biocontent{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: calc(max(calc(calc(100vw - 1125px) / 1.4), 0px) * -1);
        height: calc(85vw + max(calc(calc(100vw - 1125px) / 1.4), 0px));
    }*/

    .bottomenvelope{
        display: block;
        background-color: transparent;
        width: 100%;
        height: calc(max(calc(calc(100vw - 1125px) / 1.4), 0px) + max(1vw, 50px));
    }

    .copyright{
        display: inline-block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        width: 100%;
        top: calc(0px * -1);
        height: 100%;
    }
}

@media(min-width: 476px) and (max-width: 1124px)
{
    .biocontent{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: calc(max(calc(calc(100vw - 1125px) / 1.4), 0px) * -1);
        height: calc(calc(85vw - calc(calc(100vw - 475px) * 1.01)) + max(calc(calc(100vw - 1125px) / 1.4), 0px));
    }

    .bottomenvelope{
        display: block;
        background-color: transparent;
        width: 100%;
        height: 10vw;
    }

    .copyright{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 1125px) and (max-width: 1920px)
{
    .biocontent{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: calc(max(calc(calc(100vw - 1125px) / 1.4), 0px) * -1);
        height: calc(calc(85vw - calc(calc(100vw - 475px) * 1.01)) + max(calc(calc(100vw - 1125px) / 1.4), 0px));
    }

    .bottomenvelope{
        display: block;
        background-color: transparent;
        width: 100%;
        height: calc(calc(calc(100vw - 1125px) / 1.4) + 10vw);
    }

    .copyright{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: calc(-100% + 10vw);
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 1921px) and (max-width: 2792px)
{
    .biocontent{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: calc(550px * -1);
        height: calc(calc(85vw - calc(calc(100vw - 475px) * 1.01)) + 550px);
    }

    .bottomenvelope{
        display: block;
        background-color: transparent;
        width: 100%;
        height: 550px;
    }

    .copyright{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: -100%;
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 2792px)
{
    .biocontent{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: calc(calc(550px * -1) + calc(calc(100vw - 2792px) / 100));
        height: calc(582px + calc(calc(100vw - 2792px) * .33));
    }

    .bottomenvelope{
        display: block;
        background-color: transparent;
        width: 100%;
        height: 550px;
    }

    .copyright{
        display: block;
        position: relative;
        background-color: transparent;
        font-size: 1vw;
        color: ghostwhite;
        top: -100%;
        width: 100%;
        height: 100%;
    }
}

.biobox{
    display: inline-block;
    background-color: transparent;
    box-sizing: border-box;
    flex-direction: column-reverse;
    width: 75%;
    height: 100%;
}

.bioflex{
    display: inline-flex;
    background-color: transparent;
    box-sizing: border-box;
    flex-direction: column-reverse;
    width: 100%;
    height: 100%;
}

.biotext{
    background-color: black;
    border-color: ghostwhite;
    border-width: 3px;
    border-style: solid;
    color: ghostwhite;
    font-size: 1vw;
    width: 100%;
    height: min(calc(250px + calc(max(calc(1125px - 100vw), calc(calc(1125px - 100vw) * -1)) / 5.5)), 100%);
    flex-grow: 0;
    flex-shrink: 0;
    overflow: auto;
}

@media (max-width: 450px){

    .biospacer{
        display: none;
        background-color: transparent;
        width: 100%;
        box-sizing: border-box;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 1px;
    }

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

    .biohalfright{
        display: none;
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        background-color: transparent;
    }

}

@media (min-width: 451px){

    .biospacer{
        display: block;
        background-color: transparent;
        width: 100%;
        box-sizing: border-box;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 1px;
    }

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

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

}






.title{
    display: block;
}

.characterlevel{
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    border-width: 0px;
    font-size: 3em;
    text-align-last: left;
    vertical-align: top;
}

.classlevel{
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    border-width: 0px;
    font-size: 2.1em;
    text-align-last: right;
    vertical-align: bottom;
}

.basestat{
    display: inline-block;
    box-sizing: border-box;
    border-width: 2px;
    border-color: rgb(206, 224, 255);
    border-style: solid;
    font-size: 1.9em;
    text-align: center;
}

.scosh{
    display: block;
    height: 5px;
    box-sizing: border-box;
}

.statholdr{
    display: block;
    text-align: center;
}

.italicizer{
    font-style: italic;
    color: cornflowerblue;
}

.ital{
    font-style: italic;
}

@media (max-width: 799px){

    .featholdr{
        display: block;
        box-sizing: border-box;
    }

    .feat{
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: calc(calc(calc(800px - 100vw) / 40));
        padding-left: 5px;
        padding-right: 5px;
    }

    .featname{
        display: block;
        font-size: calc(1.6em + calc(calc(1000px - 100vw) / 88));
    }

    .featdescript{
        display: block;
        font-size: calc(1.4em + calc(calc(1000px - 100vw) / 88));
    }

}

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

    .featholdr{
        display: block;
        box-sizing: border-box;
    }

    .feat{
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: calc(5px + calc(calc(1000px - 100vw) / 26));
        padding-left: 5px;
        padding-right: 5px;
    }

    .featname{
        display: inline;
        font-size: calc(1.55em + calc(calc(1000px - 100vw) / 100));
    }

    .featdescript{
        display: inline;
        font-size: calc(1.35em + calc(calc(1000px - 100vw) / 100));
    }
}

@media (min-width: 1001px) and (max-width: 1920px)
{
    .featholdr{
        display: block;
        text-align: center;
    }

    .feat{
        display: inline-block;
        width: 18%;
        box-sizing: border-box;
        vertical-align: top;
        padding: 5px;
        text-align: left;
    }

    .featname{
        display: block;
        font-size: 1.4em;
    }

    .featdescript{
        display: block;
        font-size: calc(1.1em + calc(calc(1921px - 100vw) / 550));
    }
}

@media (min-width: 1921px)
{
    .featholdr{
        display: block;
        text-align: center;
    }

    .feat{
        display: inline-block;
        width: 18%;
        box-sizing: border-box;
        vertical-align: top;
        padding: 5px;
        text-align: left;
    }

    .featname{
        display: block;
        font-size: 1.3em;
    }

    .featdescript{
        display: block;
        font-size: 1.1em;
    }
}

.copydash{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - max(1.5em, 12pt));
}

.copytext{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: max(1.91em, 12pt);
    text-align: center;
}

.dashed{
    border-style: dashed;
    border-width: 1px;
}