/*** ANIMATIONS ***/

/* ----------------------------------------------
 * Generated by Animista on 2022-4-7 8:51:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}


/*** FONTS ***/
  @font-face {
    font-family: 'Segoe Pro Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Segoe Pro Regular'), url('/font/SegoePro-Regular.woff') format('woff');
    }

    @font-face {
    font-family: 'Segoe Pro Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Italic'), url('/font/SegoePro-Italic.woff') format('woff');
    }

    @font-face {
    font-family: 'Segoe Pro SemiLight';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro SemiLight'), url('/font/SegoePro-Semilight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Segoe Pro SemiLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro SemiLight Italic'), url('/font/SegoePro-SemilightItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Segoe Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Semibold'), url('/font/SegoePro-Semibold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Segoe Pro Semibold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Semibold Italic'), url('/font/SegoePro-SemiboldItalic.woff') format('woff');
    }
.SegoePro {
font-family: 'Segoe Pro Regular';
letter-spacing: 0.1px;
}
.SegoeProIT {
font-family: 'Segoe Pro Italic';
letter-spacing: 0.1px;
}
.SegoeProLI {
font-family: 'Segoe Pro SemiLight';
letter-spacing: 0.1px;
}
.SegoeProLIIT {
font-family: 'Segoe Pro Semilight Italic';
letter-spacing: 0.1px;
}
.SegoeProSB {
font-family: 'Segoe Pro Semibold';
letter-spacing: 0.1px;
}
.SegoeProSBIT {
font-family: 'Segoe Pro Semibold Italic';
letter-spacing: 0.1px;
}

/* TTNorms */



@font-face {
    font-family: "TTNorms";
	src: url("/font/ttnorms-regular-webfont.woff");
	 font-style: normal;
	 font-weight: 400;
}
@font-face {
    font-family: "TTNormsIT";
	src: url("/font/ttnorms-italic-webfont.woff");
	 font-style: italic;
	 font-weight: 400;
}
@font-face {
    font-family: "TTNormsSB";
	src: url("/font/ttnorms-medium-webfont.woff");
	 font-style: normal;
	 font-weight: 600;
}
@font-face {
    font-family: "TTNormsSBIT";
	src: url("/font/ttnorms-mediumitalic-webfont.woff");
	 font-style: italic;
	 font-weight: 600;
}
@font-face {
    font-family: "TTNormsBD";
	src: url("/font/ttnorms-bold-webfont.woff");
	 font-style: normal;
	 font-weight: 700;
}
@font-face {
    font-family: "TTNormsBDIT";
	src: url("/font/ttnorms-bolditalic-webfont.woff");
	 font-style: italic;
	 font-weight: 700;
}

.TTNorms {
    font-family: "TTNorms";
	font-style: normal;
	 font-weight: 400;}
.TTNormsSB {
    font-family: "TTNormsSB";
	font-style: normal;
	 font-weight: 600;}
.TTNormsSBIT {
    font-family: "TTNormsSBIT";
	font-style: italic;
	 font-weight: 600;}

/* Garamond */



@font-face {
    font-family: "AdobeGaramondPro";
	src: url("/font/AGaramondPro-Regular.woff");
	 font-style: normal;
	 font-weight: 400;
}
@font-face {
    font-family: "AdobeGaramondProIt";
	src: url("/font/AGaramondPro-Italic.woff");
	 font-style: italic;
	 font-weight: 400;
}
@font-face {
    font-family: "AdobeGaramondProSB";
	src: url("/font/AGaramondPro-Semibold.woff");
	 font-style: normal;
	 font-weight: 600;
}
@font-face {
    font-family: "AdobeGaramondProSBIT";
	src: url("/font/AGaramondPro-SemiboldItalic.woff");
	 font-style: italic;
	 font-weight: 600;
}
@font-face {
    font-family: "AdobeGaramondProB";
	src: url("/font/AGaramondPro-Bold.woff");
	 font-style: normal;
	 font-weight: 700;
}
@font-face {
    font-family: "AdobeGaramondProBIT";
	src: url("/font/AGaramondPro-BoldItalic.woff");
	 font-style: italic;
	 font-weight: 700;
}
.Garamond {font-family: "AdobeGaramondPro";}
.GaramondIT {font-family: "AdobeGaramondProIt";}
.GaramondSB {font-family: "AdobeGaramondProSB";}
.GaramondSBIT {font-family: "AdobeGaramondProSBIT";}
.GaramondB {font-family: "AdobeGaramondProB";}
.GaramondBIT {font-family: "AdobeGaramondProBIT";}



/* SourceSerif */

@font-face {
    font-family: "SourceSerif4";
	src: url("/font/SourceSerif4-Regular.woff");
	 font-style: normal;
	 font-weight: 400;
}
@font-face {
    font-family: "SourceSerif4It";
	src: url("/font/SourceSerif4-RegularIt.woff");
	 font-style: italic;
	 font-weight: 400;
}
@font-face {
    font-family: "SourceSerif4LI";
	src: url("/font/SourceSerif4-Light.woff");
	 font-style: normal;
	 font-weight: 300;
}
@font-face {
    font-family: "SourceSerif4LIIt";
	src: url("/font/SourceSerif4-LightIt.woff");
	 font-style: italic;
	 font-weight: 300;
}
@font-face {
    font-family: "SourceSerif4SB";
	src: url("/font/SourceSerif4-Semibold.woff");
	 font-style: normal;
	 font-weight: 600;
}
@font-face {
    font-family: "SourceSerif4SBIT";
	src: url("/font/SourceSerif4-SemiboldIt.woff");
	 font-style: italic;
	 font-weight: 600;
}

.SourceSerif {font-family: "SourceSerif4";}
.SourceSerifIT {font-family: "SourceSerif4IT";}
.SourceSerifLI {font-family: "SourceSerif4LI";}
.SourceSerifLIIT {font-family: "SourceSerif4LIIT";}
.SourceSerifSB {font-family: "SourceSerif4SB";}
.SourceSerifSBIT {font-family: "SourceSerif4SBIT";}

@font-face {
    font-family: "KleeOne";
	src: url("/font/KleeOne-Regular.woff");
	 font-style: normal;
	 font-weight: 400;}
	 
@font-face {
    font-family: "KleeOneSB";
	src: url("/font/KleeOne-SemiBold.woff");
	 font-style: normal;
	 font-weight: 600;}
	 
.KleeOne {font-family: "KleeOne";}
.KleeOneSB {font-family: "KleeOneSB";}

/*** 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/bg.png") 50% repeat;
background-color: rgb(240, 243, 245, 0.5);
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;
background-color: #46595c;
border-width: 10em;
border: solid;
border-color: #17191f;
border-radius: 1%;}

.centerbox {
display: flex;
order: 2;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 2vh;
height: 100%;
max-height: 36em;
background-color: #46595c;
border-width: 10em;
border: solid;
border-color: #17191f;
border-radius: 1%;}

.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: row;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: rgba(23, 25, 31, 0);
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: rgba(125, 129, 138, 0.25) rgba(125, 129, 138, 0.1);
padding: 1% 4% 1% 4%;
}

.hobbylist {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
width: 100%;
height: auto;
padding: 3%;
}

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

.hobbytxt{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #31343d;
width: 100%;
height: 100%;
font-size: 13px;
font-family: Segoe Pro Regular;
margin: 2%;}

.hobbyimg {
display: flex;
width: 100%;
height: auto;
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 {
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: 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;
text-decoration: none;
}

a.tagbox:hover {
opacity: 100%;
letter-spacing: 1.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;
overflow-y: scroll;
scrollbar-width: thin;}

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