/*** LAYOUT ***/

.html, body {
height: 100vh;
width: 100vw;
line-height: normal;
}

.pagewrap {
display: flex;
justify-content: center;
height: 100vh;
width: 100vw;
background: url("/img/bgbf.png");
background-color: rgb(240, 243, 245, 0.5);
 background-position: 0 0;
    background-repeat: repeat;
    background-size: 650px;
	background-position: 50% 0%;
background-blend-mode: multiply;
}

.bodywrap {
display: flex;
justify-content: center;
width:100%;
margin: 0 auto;
background-color: none;}

.contentwrap {
display: flex;
flex-direction: column;
align-content: center;
max-width: 36em;
width: 100%;
height: 100vh;
background-color: none;
overflow-y: auto;
scrollbar-width: none;}

.headerbox {
display: flex;
order: 1;
flex-direction: row;
justify-content: center;
margin: 2vh 0 2vh 0;
min-height: 12em;
border-width: 10em;
border: solid;
border-color: #17191f;
border-radius: 5px;
}

#headnav {
display: flex;
}

.centerbox {
display: flex;
order: 2;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 2vh;
height: 100%;
max-height: 36em;
border-width: 2px;
border: solid;
border-color: #17191f;
border-radius: 5px;
background-image: url("/img/sidebarimg.png"), url("/img/cardbg1.png");
background-position: -4% 108%;
background-size: 34% 69%, 20%;
background-origin: border-box;
background-repeat: no-repeat, repeat;
background-color: #17191f;}

.footerbox {
display: flex;
order: 3;
padding: 2.5%;
min-height: 10vh;
background-color: #17191f;
border-width: 10em;
border: solid;
background: repeat url("/img/cardbg1.png");
background-size: 60%;
border-color: #17191f;
border-radius: 4px;}


/*** INNER-LAYOUT ***/

.headerimg {
display: flex;
flex-direction: row;  
position: relative;  
padding: 1.5%;
width: 70%;
height: 100%;
background: repeat url("/img/cardbg1.png");
background-size: 60%;
background-color: #17191f;}

.navboxcont {
display: flex;
flex-direction: column;
justify-content: center;
padding: 6.5% 0% 6.5% 6%;
width: 100%;
height: 100%;
background: repeat url("/img/cardbg1.png");
background-color: #17191f;}

.navbox {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
width: 100%;
height: 100%;
border: 1.25px solid #17191f;
border-radius: 15px 2px 2px 2px;
background: linear-gradient(360deg, rgba(225, 228, 235, 0.7) 0%, rgba(225, 228, 235, 0.8) 100%), url("/img/alkalineoverlaybw.png");
background-color: #e1e4eb;}

a.navbox {
font-family: SourceSerif4SB;
color: #17191f;
font-size: 10.6px;
letter-spacing: 1.5px;
text-decoration: underline overline #17191f;
text-underline-offset: 3.5px;
transition: all .25s;
user-select: none;}

a.navbox:hover {
height: 130%;
letter-spacing: 2.5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: #f3dbdb;
text-decoration: underline overline #e79b77;
text-underline-offset: 3.5px;
background: linear-gradient(360deg, rgba(49, 52, 61, 0.8) 0%, rgba(49, 52, 61, 0.9) 100%), url("/img/alkalineoverlaybw.png");
background-color: #31343d;
user-select: none;}	

.centerleft {
display: flex;
flex-direction: column;
padding: 2%;
width: 26%;
height: 100%;
}

.centerright {
display: flex;
flex-direction: column;
overflow-y: scroll;
scrollbar-width: thin;
width: 74%;
height: 100%;
padding: 2%;
border-radius: 30px 0px 0px 30px;
background: linear-gradient(360deg, rgba(225, 228, 235, 0.8) 0%, rgba(225, 228, 235, 0.9) 100%), url("/img/alkalineoverlaybw.png");
background-position: 100% 50%;
background-blend-mode: normal;
background-color: #e1e4eb;
overflow: hidden;
}

/*** INNER-LAYOUT ***/

.headernav {
display: flex;
width: 30%;
height: 100%;
background-color: #e1e4eb;}


.leftnav {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 6%;
}

.topabout {
display: flex;
flex-direction: row;
padding: 1.5%;
column-gap: 2%;
width: 100%;
height: 20%;
border-bottom: 0px;
background-color: #17191f;
}

.aboutlist {
display: flex;
flex-direction: column;
height: 100%;
width: 75%;
background-color: #17191f;
}

.biotop {
display: flex;
padding: 1.5%;
width: 100%;
height: 8%;
border-radius: 15px 2px 0px 0px;
background: repeat url("/img/cardbg1.png");
background-size: 60%;
background-color: #17191f;
user-select: none;
}

.biohead {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 2%;
margin: 0 auto;
}

/*** ELEMENTS ***/

.aboutimg {
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 1.5%;
width: 30%;
height: 100%;
pointer-events: none;
}

.abouticon {
display: flex;
object-fit: contain;
box-sizing: border-box;
width: 100%;
height: 100%;
filter: grayscale(20%);
pointer-events: none;
}

.aboutrow {
display: flex;
align-items: center;
min-height: 25%;
width: 100%;
border-bottom: 1.5px solid #17191f;
background-color: #31343d;
}

.abouttxt {
display: flex;
align-items: center;
font-family: TTNorms;
font-size: 11px;
color: #f3dbdb;
height: 100%;
width: 76%;
margin: 0;
padding: 1%;
}

.aboutico {
display: flex;
height: 100%;
width: auto;
margin: 0%;
padding: 0.5%;
pointer-events: none;
}

.abouttag {
display: flex;
align-items: center;
justify-content: center;
font-family: TTNormsSB;	
height: 100%;
width: 24%;
padding: 1%;
font-size: 12px;
color: #cb9882;
}

.hobbywrap {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: rgba(23, 25, 31, 0);
}

.hobbyhd{
display: flex;
color: #a76b54;
font-size: 14px;
font-family: SourceSerif4SB;
background-color: #000000;
margin: 0;}

.hobbylist {
display: flex;
flex-direction: row;
justify-content: center;
gap: 1%;
flex-wrap: wrap;
width: 100%;
height: 100%;
padding: 1% 4% 1% 4%;
}

a.hobbytxt{
display: flex;
width: 8%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transform-origin: center;
color: #a76b54;
font-size: 20pt;
font-family: Segoe Pro Regular;
margin: 1%;
transition: .25s;
transform: scale(1);
}

a.hobbytxt:hover {
opacity: 75%;
transform: scale(1.1);
transition: .25s;
color: #17191f;
text-decoration: none;
}

.logempty {
opacity:30%;
filter: grayscale(90%);
pointer-events: none;
user-select: none;
}

.hobbyimg {
display: flex;
margin: 2%;
transition: .25s
}

.hobbyimg:hover {
display: flex;
opacity: 80%;
transition: .25s;
}

.charwrap {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
column-gap: 6%;
row-gap: 4%;
padding: 2%;
width: 100%;
height: 100%;
background-color: rgba(23, 25, 31, 0);}

.charbox {
display: flex;
width: 28%;
height: 28%;}

.char {
display: flex;
object-fit: contain;
box-sizing: border-box;
width: 100%;
height: 100%;
transition: 0.25s;}

.char:hover {
opacity: 75%;
padding: 2%;}

.topimg {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 2px 20px 6px 40px;
pointer-events: none;
}

.headertxt {
display: flex;
position: absolute;
align-self: flex-end;
width: 260px;
height: auto;
margin: 0% 0% 2% 4%;
transition: 0.25s;
filter: drop-shadow(0px 0px 5px #17191f);
}

.headertxt:hover {
margin: 0% 0% 2.4% 4%;
}

.centerwrap {
display: none;
height: 100%;
width: 100%;
}

.centertext {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
border-radius: 15px 2px 6px 15px;
border: solid #17191f60;
border-width: 0px 1.5px 1.5px  1.5px;}

.tagbox, a.tagbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2%;
width: 100%;
height: 20px;
font-family: AdobeGaramondProB;
font-size: 10px;
letter-spacing: 1px;
color: #e1e4eb;
transition: all .25s;
user-select: none;
border: 1.5px solid #31343d;
border-radius: 2px 10px 2px 10px;
}

a.tagbox:hover {
opacity: 100%;
letter-spacing: 1.5px;
text-underline-offset: 3.5px;
border: 1px solid #e79b77;
color: #f3dbdb;}

.tagbox.selected {
background-color: #31343d;}		


.tx1 {
display: flex;
margin: 0;
color: #e1e4eb;
font-size: 14.4px;}

.tx2bio {
display: flex;
flex-direction: column;
height: 80%;
width: 100%;
font-size: 13px;
color: #31343d;
padding: 3%;
margin: 0;}

.chartx2 {
display: flex;
flex-direction: column;
width: 100%;
font-size: 13px;
color: #17191f;
padding: 2%;
margin: 0;}

.tx22 {
margin: 2%;}

.tx3 {
display: flex;
align-items: flex-start;
padding: 0% 0% 2.5% 0%;
margin: 0%;
font-size: 10.75px;
font-weight: 600;
color: #17191f;}

.centerimg {
display: flex;
object-fit: contain;
margin: 1.5%;
filter: hue-rotate(35deg);}

::selection {
  background: #c2c6d5;
}

.hr1 {
display: flex;
width: 100%;
border: 1px solid #7d818a;
opacity: 25%;
margin: 1.5% auto;}

.hr2 {
display: flex;
width: 100%;
border: 0.66px solid #e1e4eb;
margin: 4% auto;}

h5 {
display: flex;
color: #e1e4eb;
margin: 0 auto;
font-family: 'SourceSerif4SB';
}

a#hb {
color: #17191f;
opacity: 75%;
text-decoration: none;
transition: 0.25s;}
a#hb:hover{
color: #17191f;
text-decoration: none;
opacity: 100%;
letter-spacing: 1px;}

.copyrightbox {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
width: 25%;
}

.copyrighttxt {
display: flex;
margin: 0%;
opacity: 20%;
font-size: 7.4pt;
color: #e1e4eb;
pointer-events: none;
user-select: none;
}

.copyrightimg {
display: flex;
height: 31px;
width: 88px;
opacity: 15%;
pointer-events: none;
}

.updatetxt {
display: flex;
margin: 0% 0% 2% 2%;
opacity: 20%;
font-size: 7.4pt;
color: #17191f;
opacity: 50%;
pointer-events: none;
user-select: none;
}