.overlay {
z-index: 5;
display: none;
position: absolute;
height: 100%;
width: 100%;
background-color: black;
opacity: 100%;
}


.twwrap {
display: flex;
position: absolute;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
position:fixed;
inset:0;
width: 100%;
height: 100%;
z-index: 10;
}

.twbox {
z-index: 50;
display: flex;
display: none;
flex-direction: column;
width: 90%;
max-width: 350px;   
height: auto;
max-height: 80vh;
overflow: hidden;
top: 240px;
padding: 0;
filter: drop-shadow(0 0px 6px rgb(0, 0, 0, 0.65));
}

.modal-header {
display: flex;
 justify-content: center;
 align-items: center;
  border: #0D0D0D;
  height: 50px;
   color: #e79b77; 
  padding: 0;
    }
	
    .modal-body {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
      color: #e1e4eb;
      text-align: center;
      font-weight: 700;
      border: #e1e4eb 2px solid;
	  border-radius: 2%;
	  letter-spacing: 0.5px;
    }
    .modal-body p {
    flex: 1;
    min-width: 0;
}

	button.btn {
      font-family: SegoePro-Semibold; 
      width: 100px;
      text-align: center;
      border: #e1e4eb 2px solid;
      font-size: 20px;
      font-weight: 700;
      color: #e1e4eb;
	  transition: 0.24s;
    }
	button.btn:hover {
      font-family: SegoePro-Semibold; 
      font-smooth: never;
      width: 110px;
      text-align: center;
      border: #e79b77 2px solid;
      font-size: 20px;
      font-weight: 700;
      color: #f3dbdb;
	  letter-spacing: 2.5px;
	  transition: 0.24s;
    }
	
        button.btn:focus {
			display: flex;
       outline: none;
  box-shadow: none;
    }


/*** 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/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;}

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

/*** ELEMENTS ***/

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

.centertext {
display: flex;
flex-direction: column;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
padding: 4.5%;
margin: 2% 0% 2% 0%;
border-radius: 15px 2px 6px 15px;
border: solid #17191f60;
border-width: 1.5px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-color: #31343D40 transparent;
scrollbar-width: thin;}

.tagbox, a.tagbox {
display: flex;
flex-direction: column;
align-self: flex-end;
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;
background-color: #31343d;
opacity: 80%;
}

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

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

.tx2 {
display: flex;
color: #31343d;
font-size: 14px;
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: #31343d;
opacity:75%;}

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

hr {
display: flex;
width: 100%;
border: 1px solid #7d818a80;
margin: 2.75% auto;}

::selection {
  background: #c2c6d5;
}

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