:root {
    --bg-col: #540E00; /* global scope */
    --fg-col: grey;
    --th-col: #540E00;

}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC4klEQVR4Xu2dwXLCMAxE4c/75y3cisjw2Nl1EobtjUqR5Oe17BAGrpfx93O5/P7/1+31dfp882vi8wSLLvhmmPexE58CFRVSoCIwckeg02Gjp0o9lBKS3e3pFJ/sKtDpfy1QbdMlXgUqnmIKdABbvuSpZ5CdCnTtZ8//1EOpYLK7wOj6s+cv0HALKNCzAXWX6OolTPHJ7o5POrTfi3ETugM6Oj/VX6CDkDthBbo3UHXGyJ/sc0ml/dPx5F0+XUA6njoBq/Pjkk8XkI5XoOIjlvQEpOPhkncTbigGVwEdRZL2OT61XuJjPwJxC0zCeieWW2+BwrGoCn1Hhi98dleoumuq46Mls9qerhc3pQJ9JEATXKCiRAtUPOcSXxuoGoD8yU4Dcu2Un+xqC4yfQ28FPsRUC3YBqgDU+si/QMUWUaAAjACpisf7bDVheskeHU8df4HCjBVoWNIFenagalN2/cM85MfeqiJnvdhDXUBugS5gNb/qX6DwedACDe/ScaBqQNXfXcLp69X6yX/5rWcaQDoeAVL3kAL9tHv5tKLS8ZYrlApOF0D5XPve9fYcOmZMnYCeQ3sO9Ra9qjjVX1aom8DDcfzV6vixh6oBj0eQrUAdf4EC/wLNClR++2/5nZI6w2EeCEStj/wL9NNuPWlG04qc8Sg/2dV4VehqhaozoiqMFLHanq738IP9amAUv0DFD58VaBjY6YCqBU3/jR6Md2PqMnT83XqJT3yXL9BBgGaATgEFWqAPBG6CetmiSHDY3ygAKXYWmI53tvwFaipy+cGeFEh2VXGq/+r8VejeClUV4JwR79eSgsi+Oj/FR4UWqPb9ogVqHhvlTakKXaxQFTD1PLJTz6LrXTvltxVaoK8Ryz20QAv05U9xUEuQl/wMuKFAScVUINnVFaD6q/kp/lMPLVBtFyde/R77fo+9937l8iVPPeJWgNRD1Sb+af40IfYzpU8D4tZboC7BcX2B7gz0DwkTHHrQJFiVAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

.blueLaceBroider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABUUlEQVRYR+2ZwRLDIAhE6/9/dJt0ogcyzD6CbXAmuaStIiu7Itr2Op739uwf2/bs72rfv6AqArOBatUi5+JZBqiivrfTt9U4tev9vDUiNZp1lLXvwKVGo46slLL2Yzyl0ayjrP3AZzXqaUU57BTZft0Rtbf9B/XLAFXUU82pcbyIKjus0TJAKfVWg94Esr+nNXo7UKwRp6pSq9nLAuEqbRmgVzUajWR01dt8ftrrVXEwCyAthsJ7PU1TdCI0O+A86s2cAqKUqwjLMo+mJQo8HMkj26wDVKWnMtQvA/TJo3B1eYyeEr6iXrVDPKObGu9n5/q/Ab2qUZoPVdbA1C8DNKoZuiXS2gD7xx2Prew2oJR6tWiec30vShT1KpLqTJS1D9ej1CFdRGGtq4KVAvSOMFl79+5p9kXsNKBKo2XaywBRfxspjYZvNJTDi+34zHR35D+0YmAXMgsbegAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    padding: 0.5%;
    font-size: 14px;
    width: 350px;
}




.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}
.charBio {
    text-align: center;
    
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC4klEQVR4Xu2dwXLCMAxE4c/75y3cisjw2Nl1EobtjUqR5Oe17BAGrpfx93O5/P7/1+31dfp882vi8wSLLvhmmPexE58CFRVSoCIwckeg02Gjp0o9lBKS3e3pFJ/sKtDpfy1QbdMlXgUqnmIKdABbvuSpZ5CdCnTtZ8//1EOpYLK7wOj6s+cv0HALKNCzAXWX6OolTPHJ7o5POrTfi3ETugM6Oj/VX6CDkDthBbo3UHXGyJ/sc0ml/dPx5F0+XUA6njoBq/Pjkk8XkI5XoOIjlvQEpOPhkncTbigGVwEdRZL2OT61XuJjPwJxC0zCeieWW2+BwrGoCn1Hhi98dleoumuq46Mls9qerhc3pQJ9JEATXKCiRAtUPOcSXxuoGoD8yU4Dcu2Un+xqC4yfQ28FPsRUC3YBqgDU+si/QMUWUaAAjACpisf7bDVheskeHU8df4HCjBVoWNIFenagalN2/cM85MfeqiJnvdhDXUBugS5gNb/qX6DwedACDe/ScaBqQNXfXcLp69X6yX/5rWcaQDoeAVL3kAL9tHv5tKLS8ZYrlApOF0D5XPve9fYcOmZMnYCeQ3sO9Ra9qjjVX1aom8DDcfzV6vixh6oBj0eQrUAdf4EC/wLNClR++2/5nZI6w2EeCEStj/wL9NNuPWlG04qc8Sg/2dV4VehqhaozoiqMFLHanq738IP9amAUv0DFD58VaBjY6YCqBU3/jR6Md2PqMnT83XqJT3yXL9BBgGaATgEFWqAPBG6CetmiSHDY3ygAKXYWmI53tvwFaipy+cGeFEh2VXGq/+r8VejeClUV4JwR79eSgsi+Oj/FR4UWqPb9ogVqHhvlTakKXaxQFTD1PLJTz6LrXTvltxVaoK8Ryz20QAv05U9xUEuQl/wMuKFAScVUINnVFaD6q/kp/lMPLVBtFyde/R77fo+9937l8iVPPeJWgNRD1Sb+af40IfYzpU8D4tZboC7BcX2B7gz0DwkTHHrQJFiVAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
    width: 300px;
    padding: 1%;
}

.gallery {
    width:470px;
}

.bioImg {
    border-radius: 20px;
    width:200px;
    margin:1%;
    float: left;
    
}


@font-face {
    font-family: 'voidCom V1';
    src: url(fonts/Protovoidscriptv0.1.otf) format('opentype');
}

@font-face {
    font-family: 'ovCom V1';
    src: url(fonts/Conlanguagent-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'faeCom V1';
    src: url(fonts/Fae_v0-Regular.otf) format('opentype');
}


.voidCom{
    font-family: 'VoidCom V1';
    font-size: 30;
}
.ovCom{
    font-family: 'ovCom V1';
    font-size: 30;
}
.faeCom{
    font-family: 'faeCom V1';
    font-size: 30;
}

a {
    color: lightgrey;
}

body {
    background-color:var(--th-col);
    background-image: url("BloodBGOver.png"), url("BloodBG.png");
    background-repeat: repeat, repeat;
    padding: 2%;
    color:white;
    
}

.main {
    background-color: var(--bg-col);
    background-image: url("bat.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    border-color: var(--fg-col);
    border-width: 5px;
    border-style: solid;
    padding: 2%;
    margin: 1%;
    margin-left: 10%;
    margin-right: 15%;
    font-size: 18px;
}

h1 {
    color: var(--fg-col);
    font-size: 65px;
    padding: 0%;
    margin: 0%;
}

table, th, td {
    border-collapse: collapse;
    border: 2px solid var(--th-col);
    padding: 5px;
    margin: 0px;
}
th{
    font-weight: bold;
}