p, ul, ol {
   margin: auto;
   padding-top: 10px; 
   padding-bottom: 10px; 
   padding-left: 0px;
}
h2, h3 {
   padding-top: 10px; 
   padding-left: 0px;
 }


 img {
  filter: drop-shadow(8px -1px 0px rgba(0, 0, 0, .25));
}

.footbar {
  margin-top: 30px;
}

.grid-container {
  gap:5vw;
}

.grid-item {
  border:1px solid white;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
}

.grid-item > img {
  width:300px;
  height:300px;
  object-fit:cover;
}

#timeline-container {
  position:fixed;
  height:75%;
  margin-left: 78%;
  border:1px solid white;
  background: #2e0237a9;
  width:20%;
  box-shadow: 5px 5px 0px #000000b5;
  overflow-y: hidden;
  overflow-x: hidden;
}

#timeline {
  display:inline-grid;
  gap: 10px;
  width:80%;
}

.toc_mobile {
  display:none;
}

#chapters {
	width: 100%;
	margin: auto;
}
.chp-lifelink,#lifelink {
  width:100% !important;
  grid-column-start: 1;
  grid-column-end: 3;
}
.chp-coven,#coven {
  width:100% !important;
}
.chp-apoc,#apoc {
  width:100% !important;
}
.chp-ship, #ships {
  width:100% !important;
}
.chp-etc,#etc {
  width:100% !important;

}
.chp-bor,#bor {
  width:100% !important;
}

.chp-updates,#updates {
  width:100% !important;
}

 @media only screen and (max-width: 900px) {

  #timeline-container2 { /* <-- bor */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 4000px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container3 { /* <-- bor-b */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 4000px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container4 { /* <-- apoc-arisen */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 2700px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container5 {  /* <-- apoc-arisen-b */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 2500px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container6 { /* <-- lifelink */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 2500px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container7 { /* <-- misc */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 1500px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container8 { /* <-- archive */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 625px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }

  #timeline-container9,.popup { /* <-- mid-size */
    display: none;
  }
  #timeline-container10 { /* <-- playground */
    margin: auto;
    border:1px solid white;
    background: #2e0237a9;
    width:90%;
    height: 500px;
    margin-left: 5%;
    box-shadow: 5px 5px 0px #000000b5;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
  }



  .grid-container {
    display: grid;
    grid-template-columns: auto;
    width:95%;
    margin:auto;
  }
 }
@media only screen and (max-width: 1024px) and (min-width:900px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    width:95%;
    margin:auto;
  }
}

@media only screen and (max-width: 1280px) and (min-width:1024px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    width:95%;
    margin:auto;
  }

 }

.shh {
  filter:blur(8px);
  cursor: not-allowed !important;
  user-select: none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
  -o-user-select: none;
}
.shh2 {
  filter:blur(12px);
  cursor: not-allowed !important;
  user-select: none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
  -o-user-select: none;
}

.shh,.shh2>a {
  pointer-events: none;
}




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* This keeps padding from growing the element width */
  font-family: berylium;
}

            /* navigation section!! */
            #navbar {
                height: auto;
                background-color: #362D6B;
                /* navbar color */
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar li a {
                color: #ffffff;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

                        /* navigation section!! */
            #navbar-b {
                height: auto;
                background-color: #00000099;
                /* navbar color */
                width: 90%;
                margin: auto;
            }

            #navbar-b ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar-b li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar-b li a {
                color: #ffffff;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

/*global colors. change here to see the effect*/
:root {
  --backgroundcolor: #a37474;
  --textcolor: #dddddd;
  --header:#362D6B;
  --main: #170c2d;
  --footer: #362D6B;
  --borders: #c6c6c6;

  /*links*/
  a {
  color: white;
  z-index: 99999999999999999999;
  
}

a:hover {
  text-decoration: underline;  
  color: white;
  display: inline-block;
  background-size: 120% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  transition: all 0.15s cubic-bezier(0.68, -0.25, 0.265, 1.25);
  background-image:url(https://files.catbox.moe/m84kxk.webp);
  /* background-image: url(https://media0.giphy.com/media/3otO6NFBIAFg2vPZuM/giphy.gif?cid=790b7611485f6558a0d8bd03eebd30c2b79ec3632d9e5a30&rid=giphy.gif&ct=g); */
}
  
/* tooltip */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 30%;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-weight:lighter;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -10px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* end tooltip */



/* background */
body {
  background: url(../i/bg.jpg);
  background-color:black;
  z-index: -1;
  color: white;
  font-size: 20px;
  font-family: berylium;
  text-align:center;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.fatass {
  margin: auto;
  top: 10px;
  width: 90%;
  border: 3px groove white;
  background-color: #00000099;
  padding: 20px;
  font-size: 24px;
  position: relative;
  z-index: 0 !important;
}

/*container*/

            #container {
                max-width: 95%;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

.wrapper{ 
 margin: auto;
 /*width of the content*/
 width: 95%;
 margin: auto;
 border:2px solid var(--borders);
 margin-top: 15px;
 margin-bottom: 15px;
}
/*main content*/
main{
 padding: 0px;
 background: var(--main);
   clear: left;
}
/*breadcrumbs*/
.breadcrumb{
color: var(--breadcrumb);  
}
header{
  height: 50px;
  border-bottom:2px solid var(--borders);
  background:var(--header);
}
/*prevent image overflow*/
main img{
  max-width: 100%;
}
/*footer*/
footer{
  background:var(--footer);
  padding: 35px;
  border-top:2px solid var(--borders);
  text-align: center;
}

.footerb {
  font-size: 18px;
  text-align: right;
  padding-right:20px;
}

  /*headings*/
  --breadcrumb: rgb(255, 255, 255);
  --h1: #2b2b2b;
  --h2: #2b2b2b;
  --h3: #2b2b2b;
  --h4: #2b2b2b;
  --h5: #2b2b2b;
  --headerunderline: grey;
  
  /*boxes*/
  --quotebackground:#362D6B;
  --quotetext: #dddddd;
  --boxbg: #362D6B;
  --showcontentborder:#dddddd;
  
  --seriesofbg:#362D6B;
  --seriesoftext:#dddddd;
  
  /*infotable*/
  --infoboxbg:#362D6B;
  --centertext:#0b0641;
  --boldtext:#722b2b;
  --infotext:#dddddd;

/*headers*/
h1,h2,h3,h4,h5{
overflow: hidden;
border-bottom: 2px solid var(--headerunderline); 
margin-top: 0px;
color: #b5ade1;
}
h1{
font-size: 32pt; 
}
h2{
font-size: 28pt; 
}
h3{
font-size: 24pt; 
}
h4{
font-size: 18pt;
}
h5{
font-size: 18pt;
}


/*table of contents*/
.showcontent{
  padding: 3px;
  font-weight: bold;
}
.contents{
 background-color:var(--boxbg);
  width: 40%;
 padding: 7px;
 border: 2px solid var(--showcontentborder);
}
/*this changes the dropdown to a hamburger menu for desktop screens*/
.toc summary {
    list-style-type: '> ';
}
.toc ul{
 list-style: none;
  margin-left: -30px;
}


/*quotes*/
.quotebox{
  width: 33%;
  background-size: cover;
  font-style: italic; 
  padding: 10px; 
 
 padding: 13px;
  border-left: solid;
  background-color:var(--quotebackground);
  color: var(--quotetext);
}

/*series of*/
.revealsummary{
  text-align: center;
 background-color:var(--seriesofbg);
  padding: 10px;
 font-weight: bold;
  border: 2px solid var(--showcontentborder);
}
.reveal{
  text-align: center;
 background-color:var(--seriesofbg);
  padding: 5px;
  width: 50%;
  border: 2px solid var(--showcontentborder);
  color: var(--seriesoftext);

}

/*flair*/
 #flair::before {
  background-size: cover;
  background-size: 25px 25px;
  display: inline-block;
  width: 30px; 
  height: 20px;
}

/*flair with image- delete above if using. you will need to play with the width and height to make it fit properly*/

/*  #flair::before { background-image: url('https://i.ibb.co/SwkXQjP/itsalime.png');
  background-size: cover;
  background-size: 20px 25px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  margin-left: 4px;
  content:" ";
}*/

/*infotable*/
.infotable {
  float:right;
  margin-left:5px;
  background:var(--infoboxbg);
  border-left:2px solid var(--borders);
  border:2px solid var(--borders);
  width:35%;
  font-size: 16px;
  color: var(--infotext);
  
}
.infotable img{
  max-width: 100%;
  margin: auto;
}
.infotable th {
  text-align:left;
 
}
.infotable th{
    padding: 5px;
  color: white;
}
.infotable ul{
  list-style: none;
  padding: 0px;
  margin: 4px;
}
#centertext{
  text-align: center;
  background: var(--centertext);
  color: white;
}
/*clear float after infobox*/
#clear::after {
  content: "";
  clear: both;
  display: table;
}
/*responsiveness*/

.povswitch {
  padding-top:120px;
}
.povswitch2 {
  padding-top:100px;
}


/*wide*/

@media(min-width: 1920px) {
.changelog-preview, .otherpages{
font-size: 24px;
} 
} 


@media(min-width: 1280px) and (max-width: 1920px) {
.changelog-preview, .otherpages{
font-size: 24px;
} 
} 

@media(min-width: 900px) {

.portfolio_home {
  width: 80%;
  margin-left: 10%;
}  
.portfolio_home_square {
  width: 70%;
  margin-left: 15%;
}  
.portfolio_home_tall {
  width: 50%;
  margin-left: 25%;
}  


.borheader{
 font-size: 36px !important; 
 color: #ff004e !important;
} 

.apocheader{
 font-size: 36px !important; 
 color: #811c1c !important;
} 

.lifelinkheader{
 font-size: 36px !important; 
 color: #F5A6D4 !important;
} 

 .etcheader{
 font-size: 36px !important; 
 color: #00CC99 !important;
} 

.archiveheader{
 font-size: 36px !important; 
 color: #ECC23E !important;
}   

.date {
  border: 10px solid transparent;
  border-image: url(../i/deco/dateplate.png) 64 round;
  overflow: hidden;
  overflow-x:hidden;
  background-color: #2d2b4b6e;
  text-align:left;
  padding-left:10px;
  padding-right:10px;
  font-style: italic;
  font-size:24px;
  filter:saturate(.05);

}

.date2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  background-color: none;
  width: 500px; /* Adjust width as needed */
  height: 125px; /* Adjust height as needed */
}
.date2 img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease; /* Smooth transition for filter effect */
}
.date2-text {
  position: absolute;
  color: white; /* Text color */
  font-family: 'berylium';
  font-style: italic;
  font-size:24px;
  font-weight: bold; /* Optional: make text bold */
  text-align: center;
  transition: opacity 0.3s ease; /* Smooth transition for hover effect */
  z-index: 1; /* Ensure text is above the image */
}

.pov {
  background-image: url('../i/deco/nameplate.png');
  background-size:380px;
  height: 110px;
  width:400px;
  background-repeat: no-repeat;
  position:absolute;
  overflow: hidden;
  cursor: text;
 
}

.pov-hshot {
  width:75px;
  margin-top:1px;
  margin-left: 20px;
  cursor: text;
}

.pov-role {
  width:48px;
  margin-bottom: 0px;
  margin-left: -95px;
  filter: drop-shadow(5px 2px 1px rgba(0, 0, 0, 0.647));
  cursor: text;
}

.pov-text {
  position: absolute;
  color: #000000; /* Text color */
  font-family: 'berylium';
  font-size: 24px; /* Adjust font size as needed */
  font-weight: bold; /* Optional: make text bold */
  text-align: center;
  transition: opacity 0.3s ease; /* Smooth transition for hover effect */
  z-index: 1; /* Ensure text is above the image */
  margin-right:20px;
  margin-top: -20px;/*  */
  margin-left:25px;
  text-align:center;
}


img {
  filter: drop-shadow(8px -1px 0px rgba(0, 0, 0, .25));
}

.footer {
  font-size: 18px;
  text-align: right;
  padding-right:20px;
}

#lit_coven {
  background:url(../i/bg_coven.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_archive {
  background:url(../i/bg_archive.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_day {
  background:url(../i/bg_daytime.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_night {
  background:url(../i/bg_nighttime.jpg) !important;
  
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_apoc {
  background:url(../i/bg_apoc.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_ship {
  background:url(../i/bg_ship.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_bmg {
  background:url(../i/bg_bmglore.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_bor {
  background:url(../i/bg_revelation.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

#lit_bor_b {
  background:url(../i/bg_revelation_b.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

#lit_etc {
  background:url(../i/bg_etc.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

#lit_playground {
  background:url(../i/bg_playground.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}


.toc {
  position:fixed;
  font-size: 24px;
  border:2px solid white;
  width:25%;
  margin-left:20px;
  padding:5px;
  background: rgba(0, 0, 0, .75);
}


.writing {
  border:1px solid white;
  width:75%;
  margin: left;
  padding:40px;
  font-size:20px;
  text-align:left;
  background: rgba(0, 0, 0, .75);
  margin-left: 30px;
  box-sizing: border-box
}

.writing2 {
  border:1px solid white;
  width:70%;
  margin: auto;
  padding:40px;
  font-size:20px;
  text-align:left;
  background: rgba(0, 0, 0, .75);
  margin-right: 30px;
  box-sizing: border-box
}

.writing3 {
  border:1px solid white;
  width:100%;
  margin:auto;
  padding:2%;
  font-size:20px;
  text-align:left;
  background: #151515;
  box-sizing: border-box
}

.writing4 {
  border:1px solid #88022b;
  width:100%;
  margin: auto;
  padding:2%;
  font-size:20px;
  text-align:left;
  background-image: url('../i/nightmare.png');
  box-sizing: border-box
}  





  #timeline-container2,.popup { /* <-- bor */
    display:none;
  }

  #timeline-container3,.popup { /* <-- bor-b */
    display:none;
  }

  #timeline-container4,.popup { /* <-- apoc-arisen */
    display:none;
  }

  #timeline-container5,.popup { /* <-- apoc-arisen-b */
    display:none;
  }
  #timeline-container6,.popup { /* <-- lifelink */
    display:none;
  }
  #timeline-container7,.popup { /* <-- misc */
    display:none;
  }
  #timeline-container8,.popup { /* <-- archive */
    display:none;
  }
    #timeline-container10,.popup { /* <-- playground */
    display:none;
  }  



.portfolio_expanded {
  width: 75%;
}  
.portfolio_square {
  width: 60%;
}  
.portfolio_tall {
  width: 45%;
}  


.banner{
height: 125px;
}  

button {
  padding: 15px 25px; 
  min-width: 210px;
  height: 70px; /* Set a specific height that fits your header.png well */
  
  background-image: url('../i/deco/header.png');
  background-size: 100% 100%; /* Forces the image to stretch to the exact button size */
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  
  font-family: berylium;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  transition: filter 0.2s ease, transform 0.1s ease; /* Smooth transition for filters */
}

/* Make the button light up when hovered */
button:hover {
  filter: brightness(1.3); /* Increases brightness by 30% */
}

/* Make the button darken and "sink" when clicked */
button:active {
  filter: brightness(0.7); /* Drops brightness to 70% */
  transform: translateY(2px); /* Moves it down 2px to feel like a real click */
}

  #lit_coven {
  background:url(../i/bg_coven.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_archive {
  background:url(../i/bg_archive.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_day {
  background:url(../i/bg_daytime.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_night {
  background:url(../i/bg_nighttime.jpg) !important;
  
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_apoc {
  background:url(../i/bg_apoc.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_ship {
  background:url(../i/bg_ship.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_bmg {
  background:url(../i/bg_bmglore.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

#lit_bor {
  background:url(../i/bg_revelation.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

#lit_bor_b {
  background:url(../i/bg_revelation_b.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

#lit_etc {
  background:url(../i/bg_etc.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

#lit_playground {
  background:url(../i/bg_playground.jpg) !important;
  z-index: -1 !important;
  text-align:center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

  .mobileonly{
    display: none;
  }
  .desktoponly{
    display: static;
  }


.topmenu{
  font-size: 32px;
}

}

/*narrow*/


@media(max-width: 900px) {

.help{
  width: 100%;
}  

.smallbox {
  text-align:left;
  border: 50px solid transparent;
  font-size: 20px;
  background-color: #1f1c4a;
  margin: auto;
  width: 100%;
  border-image: url(../i/deco/border.png) 128 round;
  margin-top: 0px;
  /* Slicing: [top, right, bottom, left] */
}

  .smallbox2 {
display: none;
  }

   .smallbox3 {
  text-align:left;
   font-size: 24px;
   background-color: #1a122a;
  background-color: #1a122a;
  padding-bottom: 20px;
  padding-top: 10px;
  margin: auto;
  width: 95%;
  border: 25px solid transparent; /* No layout space taken */
  border-image-source: url(../i/deco/border.png);
  border-image-slice: 128;
  border-image-repeat: round;
  border-image-width: 50px;  /* Keeps the border looking thick */
   /* Slicing: [top, right, bottom, left] */
 }

 .smallbox4 {
  text-align:left;
  font-size: 20px;
  background-color: #1f1c4a;
  padding-bottom: 20px;
  padding-top: 10px;
  margin: auto;
  width: 100%;
  border: 0px solid transparent; /* No layout space taken */
  border-image-source: url(../i/deco/border.png);
  border-image-slice: 128;
  border-image-repeat: round;
  border-image-width: 50px;  /* Keeps the border looking thick */
  /* Slicing: [top, right, bottom, left] */
}
}

@media(min-width: 900px) {

  .help{
  width: 65%;
  margin-left: 35%;
  padding-left: 10px;
}  

 .smallbox {
  text-align:left;
  font-size: 22px;
  background-color: #1f1c4a;
  padding: 0px;
  margin: auto;
  margin-top: 0px;
  width: 100%;
  border: 50px solid transparent;
  border-image: url(../i/deco/border.png) 128 round;
  /* Slicing: [top, right, bottom, left] */
}
.smallbox2 {
  position:absolute;
  text-align:left;
  font-size: 24px;
  background-color: #1a122a;
  padding-bottom: 20px;
  padding-top: 10px;
  margin: auto;
  width: 33%;
  border: 25px solid transparent; /* No layout space taken */
  border-image-source: url(../i/deco/border.png);
  border-image-slice: 128;
  border-image-repeat: round;
  border-image-width: 50px;  /* Keeps the border looking thick */
  /* Slicing: [top, right, bottom, left] */
}

.smallbox3 {
display: none;
}

.smallbox4 {
  text-align:left;
  font-size: 22px;
  background-color: #1f1c4a;
  padding-bottom: 20px;
  padding-top: 10px;
  margin: auto;
  width: 100%;
  border: 0px solid transparent; /* No layout space taken */
  border-image-source: url(../i/deco/border.png);
  border-image-slice: 128;
  border-image-repeat: round;
  border-image-width: 50px;  /* Keeps the border looking thick */
  /* Slicing: [top, right, bottom, left] */
}
}


@media(max-width: 900px) {

  .portfolio_home {
  width: 100%;
}  
  .portfolio_home_square {
  width: 100%;
}  
  .portfolio_home_tall {
  width: 100%;
}  

.changelog-preview, .otherpages{
font-size: 18px;

}  

.borheader{
 font-size: 24px !important; 
 color: #ff004e !important;
} 

.apocheader{
 font-size: 24px !important; 
 color: #811c1c !important;
} 

.lifelinkheader{
 font-size: 24px !important; 
 color: #F5A6D4 !important;
} 

 .etcheader{
 font-size: 24px !important; 
 color: #00CC99 !important;
} 

.archiveheader{
 font-size: 24px !important; 
 color: #ECC23E !important;
}   

.portfolio_expanded {
  width: 100%;
}
.portfolio_expanded_square {
  width: 100%;
}  
.portfolio_expanded_tall {
  width: 100%;
}  


.banner{
width: 95%;
}  

.toc {
  border:2px solid white;
  width:95%;
  margin:auto;
  padding:10px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, .75);
}

button {
  padding: 15px 25px; 
  min-width: 210px;
  height: 70px; /* Set a specific height that fits your header.png well */
  
  background-image: url('../i/deco/header.png');
  background-size: 100% 100%; /* Forces the image to stretch to the exact button size */
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  
  font-family: berylium;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  transition: filter 0.2s ease, transform 0.1s ease; /* Smooth transition for filters */
}

/* Make the button light up when hovered */
button:hover {
  filter: brightness(1.3); /* Increases brightness by 30% */
}

/* Make the button darken and "sink" when clicked */
button:active {
  filter: brightness(0.7); /* Drops brightness to 70% */
  transform: translateY(2px); /* Moves it down 2px to feel like a real click */
}

h1{
font-size: 24pt; 
}
h2{
font-size: 20pt; 
}
h3{
font-size: 14pt; 
}
h4{
font-size: 14pt;
}
  h5{
font-size: 18pt;
}

  .tooltip .tooltiptext {
  display: none;
  }

    #lit_coven {
    background:url(../i/bg_coven.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }
  
  #lit_day {
    background:url(../i/bg_daytime.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }
  
  #lit_night {
    background:url(../i/bg_nighttime.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }
  
  #lit_apoc {
    background:url(../i/bg_apoc.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }
  
  #lit_ship {
    background:url(../i/bg_ship.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }
  
  #lit_bmg {
    background:url(../i/bg_bmglore.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }
  
  #lit_bor {
      background:url(../i/bg_revelation.jpg) !important;
      z-index: -1 !important;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
  }

  #lit_bor_b {
    background:url(../i/bg_revelation_b.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
}

  #lit_archive {
    background:url(../i/bg_archive.jpg) !important;
    z-index: -1 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
}

#lit_etc {
  background:url(../i/bg_etc.jpg) !important;
  z-index: -1 !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
}

#lit_playground {
  background:url(../i/bg_playground.jpg) !important;
  z-index: -1 !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
overflow-x: hidden !important; /* Prevent horizontal scrolling */
overflow-y: auto; /* Allow vertical scrolling */
width: 100%; /* Ensures body takes full width */
}


  .writing {
    border:1px solid white;
    width:90%;
    margin: auto;
    padding: 5%;
    font-size:18px;
    text-align:left;
    background: rgba(0, 0, 0, .75);
    box-sizing: border-box
  }
  .writing2 {
    border:1px solid white;
    width:90%;
    margin: auto;
    padding: 5%;
    font-size:18px;
    text-align:left;
    background: rgba(0, 0, 0, .75);
    box-sizing: border-box
  }
  .writing3 {
    border:1px solid white;
    width:95%;
    margin: auto;
    padding:5%;
    font-size:18px;
    text-align:left;
    background: #202020;
    box-sizing: border-box
  }
  .writing4 {
    border:1px solid #88022b;
    width:95%;
    margin: auto;
    padding:5%;
    font-size:18px;
    text-align:left;
    background-image: url('../i/i_nightmare.jpg');
    box-sizing: border-box
  }
  
  .date2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    background-color: none;
    width: 100%; /* Adjust width as needed */
    height: 100%; /* Adjust height as needed */
  }
  .date2 img {
    display: block;
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease; /* Smooth transition for filter effect */
  }
  .date2-text {
    position: absolute;
    color: white; /* Text color */
    font-family: 'berylium';
    font-style: italic;
    font-weight: bold; /* Optional: make text bold */
    text-align: center;
    font-size: 80%;
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    z-index: 1; /* Ensure text is above the image */
  }

  .pov {
    background-image: url('../i/deco/nameplate.png');
    background-size:300px;
    height: 100px;
    width:300px;
    background-repeat: no-repeat;
    position:absolute;
    overflow: hidden;
    cursor: text;
   
  }
  
  .pov-hshot {
    width:65px;
    margin-top:1px;
    margin-left: 15px;
    cursor: text;
  }
  
  .pov-role {
    width:32px;
    margin-bottom: 0px;
    margin-left: -80px;
    filter: drop-shadow(5px 2px 1px rgba(0, 0, 0, 0.647));
    cursor: text;
  }
  
  .pov-text {
    position: absolute;
    color: #000000; /* Text color */
    font-family: 'berylium';
    font-size: 20px; /* Adjust font size as needed */
    font-weight: bold; /* Optional: make text bold */
    text-align: center;
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    z-index: 1; /* Ensure text is above the image */
    margin-right:20px;
    margin-top: -25px;/*  */
    margin-left:25px;
    text-align:center;
  }


  #timeline-container,.popup { /* <-- just makes the little stuff go away */
    display:none !important;
  }






    .wrapper{
    width: 95%;
  }
      .chapters{
    width: 50%;
  }
  .reveal{
    width: 60%;
  }
  .topmenu{
  font-size: 24px;
  }
  .mobileonly{
    display: static;
  }
  .desktoponly{
    display: none;
  }
   .infotable{
    width: 100%;
     margin-bottom: 20px;
  }
  .quotebox{
    width: 90%;
    margin: auto;
    padding: 15px;
    margin-top: 10px;
  }
  .chapters {
    width: 100%;
  }

  .contents{
    width: 95%;
  }
  .reveal {
    width: 95%;
  }

}
}

@media only screen and (max-width: 1280px) and (min-width:900px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    width:75%;
    margin:auto;
  }
.changelog-preview, .otherpages{
font-size: 24px;

}   
}



@media only screen and (max-width: 1500px) and (min-width:1280px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    width:90%;
    margin:auto;
  }
   
}
@media only screen and (min-width: 1500px) {
  .grid-container {  display: grid;
  grid-template-columns: auto auto auto auto;
  width:90%;
  margin:auto;
}
}

@media only screen and (min-width: 1440px) {
  #timeline-container9,.popup {
    display:none
}
  #timeline-container10,.popup {
    display:none
}
}

@media only screen and (max-width: 1440px) {
  #timeline-container,.popup {
    display:none
}
}

#timeline-container9 {
  position:fixed;
  height:75%;
  margin-left: 78%;
  border:1px solid white;
  background: #2e0237a9;
  width:20%;
  box-shadow: 5px 5px 0px #000000b5;
  overflow-y: hidden;
  overflow-x: hidden;
}