/*** TEXT HIGHLIGHTS ***/

.hl1 {
color: #f13836;
background-image: url(https://media.istockphoto.com/photos/red-old-matte-grunge-faded-adobe-plaster-texture-abstract-cement-picture-id1299674661?b=1&k=20&m=1299674661&s=170667a&w=0&h=TI7PCc8wsK7eaL7bLFwLQJ8w0b1uR5JiYubOSy9OaKk=);
 background-repeat: repeat;
 background-size: 80%;
  background-position: center center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

/*** LAYOUT ***/

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

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

.logoverlay {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
background: url("https://i.gifer.com/S9CS.gif") 100% cover;
opacity: 20%;
}

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

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

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

.centerbox {
display: flex;
z-index: 1;
order: 2;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
max-height: 96%;
margin-bottom: 40%;}

.footerbox {
display: flex;
order: 3;
padding: 2.5%;
min-height: 10vh;
background-color: #17191f;
border-width: 10em;
border: solid;
border-color: #17191f;
border-radius: 1%;}


/*** INNER-LAYOUT ***/

.headerimg {
display: flex;
flex-direction: row;  
position: relative;  
padding: 1.5%;
width: 70%;
height: 100%;
background-color: #17191f;}

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

.navboxcont {
display: flex;
flex-direction: column;
justify-content: center;
padding: 6.5% 0% 6.5% 6%;
width: 100%;
height: 100%;
background-color: #17191f;}

.navbox {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
width: 100%;
height: 100%;
border: 1.25px solid #17191f;
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 {
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-color: #31343d;
user-select: none;}	

.centerleft {
display: flex;
flex-direction: row;
padding: 2%;
width: 26%;
height: 100%;
background-color: #17191f;
background-image: url("../img/sidebarimg.png");
background-position: 40% 110%;
background-size: 130% 70%;
background-origin: border-box;
background-repeat: no-repeat;
}

.centerright {
display: flex;
flex-direction: column;
overflow-y: scroll;
scrollbar-width: thin;
width: 74%;
height: 100%;
padding: 2%;
background-color: #e1e4eb;
}

/*** INNER-LAYOUT ***/

.headerimg {
display: flex;
flex-direction: row;  
position: relative;  
padding: 1.5%;
width: 70%;
height: 100%;
background-color: #17191f;}

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

.navboxcont {
display: flex;
flex-direction: column;
justify-content: center;
padding: 6.5% 0% 6.5% 6%;
width: 100%;
height: 100%;
background-color: #17191f;}

.navbox {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
width: 100%;
height: 100%;
border: 1.25px solid #17191f;
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 {
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-color: #31343d;
user-select: none;}	


.centerleft {
display: flex;
flex-direction: column;
padding: 2%;
width: 26%;
height: 100%;
background-color: #17191f;
background-image: url("img/sidebarimg.png");
background-position: 40% 110%;
background-size: 130% 70%;
background-origin: border-box;
background-repeat: no-repeat;
}


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

.centerright {
display: flex;
flex-direction: column;
width: 74%;
height: 100%;
padding: 2%;
background-color: #e1e4eb;
overflow: hidden;
}

.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%;
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;
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: flex-start;
text-align: center;
color: #a76b54;
font-size: 20pt;
font-family: Segoe Pro Regular;
margin: 1%;
transition: .25s;}

a.hobbytxt:hover {
opacity: 75%;
font-size: 22pt;
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%;
pointer-events: none;
}

.headertxt {
display: flex;
position: absolute;
align-self: flex-end;
width: 248px;
height: 71px;
margin: 0% 0% 2.5% 4%;
transition: 0.4s;
}
.headertxt:hover {
margin: 0% 0% 2.8% 4%;
}

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

.centertext {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
border-radius: 1%;
border: 1.5px solid #17191f;
background-color: #e1e4eb;}

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

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

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


.tx1 {
display: flex;
margin: 2%;
width: 100%;
color: #e1e4eb;
font-size: 24px;}



.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;
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;
}

.logtop {
display: flex;
height: 70px;
width: 100%;
background-color: #17191f;
}

.controlwrap {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
gap: 2%;
height: 100%;
width:100%;
padding: 1%;
background-color: #17191f;
}

.logbut, a.logbut{
display: flex;
flex-direction: row;
justify-content: center;
height: 100%;
width: 12%;
}

.logbut:hover {
width: 12.6%;
opacity: 80%;
filter: sepia(25%);
transition: .25s;
}

.rightpnt:hover {
margin-left: 1.25%;
transition: .25s;
}
.leftpnt:hover {
margin-right: 1.25%;
transition: .25s;
}


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

.butimg {
display: flex;
align-self: center;
height: auto;
width: 100%;
}

.logwrap {
display:flex;
flex-direction: column;
padding: 4%;
gap: 10px;
height:100%;
width:100%;
background-color: #31343d;
overflow-y: scroll;
scrollbar-width:thin;
}

.logimg, a.logimg {
display: flex;
flex-direction: column;
height: auto;
width: 100%;
background-color: white;
border-radius: 1%;
transition: 0.25s;
}

.logimg:hover {
opacity: 80%;
transition: 0.25s;
}