/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
     

@font-face {
  font-family:VHSGlitch2-Regular;
  src: url(https://ghostmoor.gay/Fonts/VHSGlitch2-Regular.woff) format("woff"),
       url(https://ghostmoor.gay/Fonts/VHSGlitch2-Regular.woff2) format("woff2");
}

@font-face {
  font-family:VHSGlitch2-Bits;
  src: url(https://ghostmoor.gay/Fonts/VHSGlitch2-Bits.woff) format("woff"),
       url(https://ghostmoor.gay/Fonts/VHSGlitch2-Bits.woff2) format("woff2");
}

@font-face {
  font-family:Inconsolata;
  src: url(/Fonts/Inconsolata-VariableFontwdthwght.woff) format("woff"),
       url(/Fonts/Inconsolata-VariableFontwdthwght.woff2) format("woff2");
  
}

@font-face {
  font-family:Brooklyn-Italic;
  src: url(https://ghostmoor.gay/Fonts/Brooklyn-Italic.woff) format("woff"),
       url(https://ghostmoor.gay/Fonts/Brooklyn-Italic.woff2) format("woff2");
  
}

body {
  background-color:#131313;
  background: url(/background%20images/v01_glitch-18_sm.jpg) no-repeat fixed;
  background-size:cover;
  font-family: "Consolas", "Andale Mono", "Lucida Console", "Inconsolata", monospace;
  font-size:16px;
  animation: fade-in 2s;
  color: #FFFFFF;
}

/*    HEADERS   */

.h1 {
  font-family: "Consolas", "Inconsolata";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size: 20px;
  line-height:1;
}

.h11 {
  font-family: "VHSGlitch2-Regular", "Inconsolata";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size: 20px;
  line-height:1;
}

.h11 a:link, a:hover, a:active {
  text-decoration:none;
}

.h2 {
  font-family: "Consolas", "Inconsolata";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size: 18px;
  line-height:1;
}

.h3 {
  font-family: "VHSGlitch2-Regular";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size:60px;
  color:#FFFFFF;
}

.h3 a:link, a:hover, a:active {
  text-decoration:none;
}

.h4 {
  font-family: "Consolas", "Inconsolata";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size:14px;
  line-height:0.5;
}

.h5 {
  font-family: "VHSGlitch2-Regular";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size:40px;
  color:#FFFFFF;
}


.h5 a:link,  a:hover, a:active {
  text-decoration:none;
}

.h6 {
  font-family: "VHSGlitch2-Bits";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size:200px;
  padding:100px;
}

.h6 a:link, a:hover, a:active {
  text-decoration:none;
}


.blink {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}


/*    HYPERLINK SETTINGS    */


 a:link, a:visited, a:active {
  color:  #dffbff;
  text-shadow: -0.08em 0 0.5px #e005b9;
}

a:hover {
  color: #14e2ff;
  transition: ease-in-out 0.3s;
  text-shadow: 0 0 0;
}

/*    SIDEBAR   */

.sidebarpic {
  max-width:100%;
  margin-top:10px;
}

.sidebarpic img {
  max-width:90%;
  border-radius:50%;
}

/*    HOMEPAGE
/*    Mainpost, Mainproj, Charprof, etc fall within .container    */


.container {
  display: grid; 
  grid-template-columns: auto, 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar Mainpost"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}


.Title {
  grid-area: Title; 
  text-shadow: -0.08em 0 0.5px #290118;
  text-align:center;
  font-size:60px;
  font-family:VHSGlitch2-Regular;
  margin-top:25px;
  animation:blinkingText 2s infinite;
}


.Menu {
  grid-area: Menu;
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size:22px;
  letter-spacing:.3rem;
  width:100%;
  margin-top:20px;
  margin-bottom:20px;
}

.Menu a:hover {
  text-decoration:underline;
}


.Sidebar {
  grid-area: Sidebar;
  width:200px;
  position:inherit;
  font-size:18px;
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin-top:0px;
  padding:1em;
  background-color:rgba(19,19,19,0.8);
  overflow-x:hidden;
  white-space:nowrap;
  align-self:start;
}

/* WEBRING WIDGET */

.yw-widget-full {
  display: block;
  width: 165px;
  margin: auto;
  border: 3px double limegreen;
  padding: 16px;
  background-color: black;
  background-image: url("https://cloudflare-ipfs.com/ipfs/QmaKT1nHC9JM5xmz7cRuRcB8jrkRjxdPsLaLnyzEta3e8R/gridnew.gif");
  color: white;
  text-align: center;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.yw-title {
  font-size: 15px;
line-height: 20px;
letter-spacing: 2px;
}

/*    POSTS   */

.Mainpost { grid-area: Mainpost;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;

  padding:0em;
  
  display: grid; 
  grid-template-columns: repeat(2,1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "About About About"
    "Subpost1 Subpost1 Subpost1"
    "Subpost2 Subpost2 Subpost3"; 
}

.About { grid-area: About;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  padding:1em;
  background-color:rgba(19,19,19,0.8);
  box-sizing:border-box;
}

.Subpost1{ grid-area: Subpost1;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  padding:1em;
  background-color:rgba(19,19,19,0.8);
  box-sizing:border-box;
}

.Subpost1 img {
  width: 100%;
}

.Subpost2{ grid-area: Subpost2;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  padding:1em;
  background-color:rgba(19,19,19,0.8);
  box-sizing:border-box;
}

.Subpost2 img {
  width:100%;
  border-radius:10px;
}

.Subpost3{ grid-area: Subpost3;
  position:relative;
  color:#eeeeee;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  padding:1em;
  background-color:rgba(19,19,19,0.8);
  box-sizing:border-box;
}

.Subpost3 img {
  width: 25%;
  border-radius:10px;
  margin-right:15px;
}


.hprae {
  position:absolute;
  margin-top:1745px;
  margin-left:-100px;
  z-index:10;
}

.hphead {
  position:absolute;
  max-width:300px;
  margin-top:690px;
  margin-left:870px;
  z-index:9;
}


/* TABLE */

.table {
  border: 1px solid #FFFFFF;
  background-color:rgba(256,256,256,0.05);
  width: 80%;
  text-align: left;
  border-collapse: collapse;
}

.table td, table.table th {
  border: 1px solid #FFFFFF;
  padding: 3px 3px;
}

.table thead {
  font-family:"VHSGlitch2-regular";
  font-size: 2rem;
  text-shadow: -0.08em 0 0.5px #e005b9;
  background:rgba(256,256,256,0.1);
}

.table thead th {
  font-weight: normal;
}

  


/*    PROJECTS    */
/*    used on: originals, fanworks    */

.Mainproj {
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  gap: 20px 20px;


}

.Mainproj img{
  max-width:150px;
  border-radius:50%;
  text-shadow: -0.08em 0 0.5px #e005b9;
}

.About {

  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:1em;
  box-sizing:border-box;
}

.SubprojA{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.SubprojB{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.Subproj1{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.Subproj1:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.Subproj2{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.Subproj2:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.Subproj3{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.Subproj3:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.Subproj4{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.Subproj4:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
  
}

.Subproj5{
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

.Subproj5:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}


.Footer {
  grid-area: Footer;
  box-sizing:border-box;
}

/*    VESSEL HUB    */

.vesselcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar vesselpage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.vesselpage {  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "Projtitle Projtitle Projtitle Projtitle Projtitle Projtitle "
    ". vesselintro vesselintro vesselintro vesselintro ."
    "world world world people people people"
    "storyhead storyhead storyhead storyhead storyhead storyhead"
    "ftslink ftslink lvbox lvbox extrabox extrabox";
}

.vesselpage img {
  width:100%;
  border-radius:10px;
  margin-bottom:10px;
}


.vesselintro { grid-area: vesselintro;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.world { grid-area: world; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.people { grid-area: people; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.storyhead { grid-area: storyhead; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.ftslink { grid-area: ftslink; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.lvbox { grid-area: lvbox;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.extrabox { grid-area: extrabox;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}


/*    LASAAINET'S VOICE   */

.lvcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar lvpage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.lvpage {
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "Projtitle Projtitle Projtitle Projtitle"
    "lvhead lvhead lvhead lvhead"
    "noen lvsumm lvsumm eleng"
    "noen lvsumm lvsumm eleng"
    "lvbox1 lvbox2 lvbox3 lvbox4"; 
}

.lvpage img {
  width:100%;
  border-radius:10px;
}

.lvhead { grid-area: lvhead;
  width:100%;
  overflow:hidden;
}

.lvhead img { grid-area: lvhead;
  width:100%;
    border-radius:0;
}

.noen { grid-area: noen;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.eleng { grid-area: eleng; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.lvsumm { grid-area: lvsumm; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  padding: 1em;
  box-sizing: border-box;
}

.lvbox1 { grid-area: lvbox1; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.lvbox2 { grid-area: lvbox2; 

  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.lvbox3 { grid-area: lvbox3; 

  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.lvbox4 { grid-area: lvbox4; 

  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

/*    NEOSCUM   */

.scumcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar scumpage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.scumpage {
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:1em;

display: grid; 
  grid-template-columns: repeat(4,1fr); 
  grid-template-rows: auto;
  gap: 20px 20px; 
  grid-template-areas: 
    "Projtitle Projtitle Projtitle Projtitle"
    "scumintro scumintro scumintro scumlinks"
    "scumcomics scumcomics scumcomics scumcomics"
    "tp tp tt tt"
    "scumgal scumgal scumgal scumgal"
    "gallery gallery gallery gallery";
}

.scumpage img {
  max-width:100%;
  border-radius: 10px;
}

.scumintro { grid-area: scumintro;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.scumintro:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.scumlinks {grid-area: scumlinks;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  text-align:center;
  font-size:24px;
  box-sizing:border-box;
}

.scumlinks:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.scumlinks a:link, a:hover, a:active {
  text-decoration:none;
}

.scumcomics { grid-area: scumcomics;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding-top:10px;
  padding-bottom:15px;
  box-sizing:border-box;
  
}

.tp { grid-area:tp;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.tp:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.tp img {
  margin-bottom:10px;
}

.tp a:link, a:hover, a:active {
  text-decoration:none;
}

.tt { grid-area:tt;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.tt:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.tt img {
  margin-bottom:10px;
}

.tt a:link, a:hover, a:active {
  text-decoration:none;
}


.scumgal { grid-area: scumgal;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding-top:10px;
  padding-bottom:15px;
  box-sizing:border-box;
  
}


/*    LOST IN TRANSIT   */

.LITcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar LITpage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}



.LITpage { grid-area: LITpage;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;

display: grid; 
  grid-template-columns: repeat(6,1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "Projtitle Projtitle Projtitle Projtitle Projtitle Projtitle"
    "LITIntro LITIntro LITIntro LITIntro LITChar LITChar"
    "LITMain LITMain LITMain LITMain LITMain LITMain"
    "LITOne LITOne LITOne LITTwo LITTwo LITTwo"
    "LITThree LITThree LITThree LITplym LITplym LITplym"
    "LITFour LITFour LITFour LITSix LITSix LITSix"
    
    "LITSub LITSub LITSub LITSub LITSub LITSub"
    "seraphim seraphim eggshells eggshells fahrenheit fahrenheit"
    "cfbk cfbk lb lb unspoken unspoken"
    "faith faith impt impt fwf fwf "
    "galtitle galtitle galtitle galtitle galtitle galtitle"
    "gallery gallery gallery gallery gallery gallery";
}

.LITpage a:link, a:hover, a:active {
  text-decoration:none;
}

  .Projtitle { grid-area: Projtitle;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
  
}

.LITIntro { grid-area: LITIntro;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.LITIntro:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.LITChar { grid-area:LITChar;

  position:relative;
  color:#eeeeee;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  width:100%;
  text-align:center;
  font-family: "VHSGlitch2-Regular";
  font-size: 2.7vw;
  letter-spacing:-0.1;
  line-height:4rem;
  justify-self: end;
  box-sizing:border-box;
}

.LITChar img {
  margin-top:20px;
}

.LITChar:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}
.LITChar  a:link, a:hover,  a:active {
  text-decoration:none;
}

.LITMain { grid-area: LITMain;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:1em;
  box-sizing:border-box;
}



.LITOne { grid-area:LITOne;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.LITOne:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.LITOne img {
  margin-bottom:10px;
}

.LITOne a:link, a:hover, a:active {
  text-decoration:none;
}

.LITTwo { grid-area: LITTwo;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.LITTwo:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.LITTwo img {
  margin-bottom:10px;
}

.LITThree { grid-area: LITThree;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.LITThree:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.LITThree img {
  margin-bottom:10px;
}

.LITplym { grid-area: LITplym;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.LITplym:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.LITplym img {
  margin-bottom:10px;
}

.LITFour { grid-area: LITFour;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.LITFour:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.LITFour img {
  margin-bottom:10px;
}


.LITSix { grid-area: LITSix;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

.LITSix:hover {
 background-color:rgba(10,10,10,1);
 transition: all 0.3s ease-in;
 border-radius:10px;
}

.LITSix img {
  margin-bottom:10px;
}

/*    LIT SIDE STORIES    */

.seraphim { grid-area: seraphim;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  text-align:center;
}

.seraphim:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.seraphim img {
  margin-bottom:10px;
}

.eggshells { grid-area: eggshells;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:100%;
  text-align:center;
}

.eggshells:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.eggshells img {
  margin-bottom:10px;
}

.fahrenheit { grid-area: fahrenheit;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:100%;
  text-align:center;
}

.fahrenheit:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.fahrenheit img {
  margin-bottom:10px;
}

.cfbk { grid-area: cfbk;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:1fr;
  text-align:center;
}

.cfbk:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.cfbk img {
  margin-bottom:10px;
}

.lb { grid-area: lb;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:100%;
  text-align:center;
}

.lb:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.lb img {
  margin-bottom:10px;
}

.unspoken { grid-area: unspoken;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:100%;
  text-align:center;
}

.unspoken:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.unspoken img {
  margin-bottom:10px;
}

.faith { grid-area: faith;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:100%;
  text-align:center;
}

.faith:hover {  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.faith img {
  margin-bottom:10px;
}

.impt { grid-area: impt;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:1fr;
  text-align:center;
}

.impt:hover {  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.impt img {
  margin-bottom:10px;
}

.fwf { grid-area: fwf;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  max-width:100%;
  text-align:center;
}

.fwf:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.fwf img {
  margin-bottom:10px;
}

.LITpage img {
  max-width:100%;
  border-radius:10px;
}

.LITSub { grid-area: LITSub;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:1em;
  box-sizing:border-box;
  
}

.galtitle { grid-area: galtitle;
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:1em;
  box-sizing:border-box;
}


/*    FIC GALLERY   */

 .fgbox { 
 /* width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify; */

}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color:rgba(19,19,19,0.8);
  color: #ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  font-family: "VHSGlitch2-Regular";
  text-shadow: -0.08em 0 0.5px #e005b9;
  outline: none;
  font-size: 60px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color:rgba(10,10,10,1);
  border-radius:10px;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 15px;
  background-color:rgba(19,19,19,0.8);
  max-height:0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  border-radius:10px;
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
}

/* .fgtitle {
  background-color:rgba(19,19,19,0.8);
  width: 100%;
  border: none;
  text-align: center;
  font-family: "VHSGlitch2-Regular";
  text-shadow: -0.08em 0 0.5px #e005b9;
  font-size:60px;
  color:#FFFFFF;
}

.active, .fgtitle:hover {
  background-color:rgba(10,10,10,1);
  border-radius:10px;
}

.fgcontent {
  background-color:rgba(10,10,10,1);
  width:100%;
  padding: 0 18px;
  max-height:500px;
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-radius:10px;
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
}
*/

/*    WRITING   */


.Chapter {
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  margin:auto;
  padding:0em;
  
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(auto);
  gap: 20px 50px;

  grid-template-areas: 
    "fictitle fictitle fictitle"
    "ficintro ficintro ficgal"
    "ficmain ficmain ficmain"
    "ficmain ficmain ficmain"
    "ficfoot ficfoot ficfoot"; 
}

.fictitle { grid-area: fictitle;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:15px;
}

.ficintro { grid-area: ficintro;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding-right:15px;
  padding-left:15px;
}

.ficgal { grid-area: ficgal;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:15px;
}

.ficgal img {
  width:100%;
  position:relative;
  border-radius:10px;
  -webkit-filter:grayscale(100%);
  filter:grayscale(100%);
}

.ficgal a:link, a:hover, a:active {
  text-decoration: none;
}
  
.ficgaltitle { grid-area: ficgal;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:center;
  align-self:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:15px;
  z-index:999;
}


.ficmain { grid-area: ficmain;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  margin:auto;
  padding:15px;
}

.ficmain img {
  max-width:100%;
  padding-right: 10px;
  padding-left: 10px;
}

.ficmain .luci {
  font-family: "Brooklyn-Italic";
  letter-spacing: 0.2rem;
  font-size: 14px;
  text-shadow: -1px 0 0 #00ffff, 1px 0 0 #ff0000;
}

.ficfoot { grid-area: ficfoot;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  font-size:20px;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding:15px;
}

.center {
  text-align:center;
}

.right {
  text-align:right;
}

/*    LIT CHARACTER PROFILES    */

.charprof {
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding-right:15px;
  padding-left:15px;
  
  display: grid; 
  grid-template-columns: repeat(4fr,auto);
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "chartitle chartitle chartitle chartitle"
    "mc1 mc1 mc1 mc1"
    "mc2 mc2 mc2 mc2"
    "mc3 mc3 mc3 mc3"
    "mc4 mc4 mc4 mc4"
    "mc5 mc5 mc5 mc5"
    "subchar subchar subchar subchar"
    "subchar1 subchar2 subchar3 subchar4"; 
}

.chartitle { grid-area: chartitle;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  padding:1em;
  
}

.mc1 { grid-area: mc1;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
}

.mc1 img {
  max-width:200px;
  border-radius:10px;
  margin-right:15px;
  margin-bottom:5px;
}
  
.mc1:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}
.mc2 { grid-area: mc2;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
  }
  
.mc2:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.mc2 img {
  max-width:200px;
  border-radius:10px;
  margin-right:15px;
  margin-bottom:5px;
}

.mc3 { grid-area: mc3;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
}
  
.mc3:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.mc3 img {
  max-width:200px;
  border-radius:10px;
  margin-right:15px;
  margin-bottom:5px;
}

.mc4 { grid-area: mc4;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
}
  
.mc4:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.mc4 img {
  max-width:200px;
  border-radius:10px;
  margin-right:15px;
  margin-bottom:5px;
}

.mc5 { grid-area: mc5;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;
}
  
.mc5:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.mc5 img {
  max-width:200px;
  border-radius:10px;
  margin-right:15px;
  margin-bottom:5px;
}

.subchar { grid-area: subchar; 
  width: 100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding-top:10px;
  padding-bottom:10px;
}

.subchar1 { grid-area: subchar1; 
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;}
  
.subchar1:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.subchar1 img {
  max-width:100%;
  border-radius:10px;
  margin-bottom:5px;
}

.subchar2 { grid-area: subchar2; 
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;}
  
.subchar2:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.subchar2 img {
  max-width:100%;
  border-radius:10px;
  margin-bottom:5px;
}

.subchar3 { grid-area: subchar3; 
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;}
  
.subchar3:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.subchar3 img {
  border-radius:10px;
  max-width:100%;
  margin-bottom:5px;
}

.subchar4 { grid-area: subchar4; 
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:15px;}
  
.subchar4:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.subchar4 img {
  max-width:100%;
  border-radius:10px;
  margin-bottom:5px;
}


/*    FOLDER SPLIT    */

.Folder { 
  width: 95%;
  position:relative;
  color:#eeeeee;
  background-color:transparent;
  text-align:justify;

  padding:1rem;

  display: grid; 
  grid-template-columns: repeat(2,1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "Folder1 Folder2";
}

.Folder1{ grid-area: Folder1;
  position: relative;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;
}

.Folder1:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;

}

.Folder2{ grid-area: Folder2;
  position:relative;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  padding:1em;

}

.Folder2:hover{
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
}

.Folder img {
  max-width:100%;
  text-align:center;
  border-radius:10px;
  margin-bottom:15px;
  
}

/*    ODDWORLD        */

.oddcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar oddpage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.oddpage {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "oddtitle oddtitle oddtitle"
    "oddintro dovereki halfway"
    "oddintro apos wwr"
    "oddgal-head oddgal-head oddgal-head"
    "oddgal oddgal oddgal"; 
}

.oddpage a:link, a:hover, a:active {
  text-decoration:none;
}

.oddpage img {
  max-width:100%;
  border-radius:10px;
}

.oddtitle { grid-area: oddtitle; 

  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}
.dovereki { grid-area: dovereki; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.dovereki img {
  margin-bottom: 10px;
}

.dovereki:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.halfway { grid-area: halfway;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}
.halfway img {
  margin-bottom: 10px;
}

.halfway:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.apos { grid-area: apos; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.apos img {
  margin-bottom: 10px;
}

.apos:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.wwr { grid-area: wwr; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.wwr img {
  margin-bottom: 10px;
}

.wwr:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.oddgal-head { grid-area: oddgal-head; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}
.oddgal { grid-area: oddgal; }

.oddintro { grid-area: oddintro; }

/*    DOVE REKI       */

.drcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar drpage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.drpage {
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "oddtitle oddtitle oddtitle oddtitle"
    "drintro drintro pueo pueo"
    "drscene1 drsumm drsumm drscene2"
    "drscene1 drsumm drsumm drscene2"
    "drgal-head drgal-head drgal-head drgal-head"
    "drgal drgal drgal drgal"; 
}

.drpage img {
  border-radius:10px;
  max-width:100%;
}

.oddtitle { grid-area: oddtitle; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.drintro { grid-area: drintro; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;

  padding: 1em;
  box-sizing:border-box;
}

.pueo { grid-area: pueo; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  transition: all 0.3s ease-in;
  text-align:center;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.pueo img {
  margin-bottom:10px;
}

.pueo:hover {
  background-color:rgba(10,10,10,1);
  transition: all 0.3s ease-in;
  border-radius:10px;
}

.drscene1 { grid-area: drscene1; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.drsumm { grid-area: drsumm; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;

  padding: 1em;
  box-sizing:border-box;
}

.drscene2 { grid-area: drscene2; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.drgal-head { grid-area: drgal-head;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.drgal { grid-area: drgal; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

/*    APOS        */

.aposcontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 30px 30px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar apospage"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.apospage {  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "oddtitle oddtitle oddtitle oddtitle"
    "aposhead aposhead aposhead aposhead"
    ". aposintro aposintro ."
    "aposres aposres aposfact aposfact"
    "fortbravo fortbravo ef113 ef113"
    "fortbravo fortbravo sulfex sulfex"
    "fortbravo fortbravo blkcreek blkcreek"
    "aposgal-head aposgal-head aposgal-head aposgal-head"
    "aposgal aposgal aposgal aposgal";
}

.oddtitle { grid-area: oddtitle; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.aposhead { grid-area: aposhead; 
  width:100%;
  height:250px;
  overflow:hidden;
}

.aposhead img {
  width:100%;
  margin-top:-100px;
}

.aposintro { grid-area: aposintro; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.aposres { grid-area: aposres; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.aposfact { grid-area: aposfact; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.fortbravo { grid-area: fortbravo; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.ef113 { grid-area: ef113; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.sulfex { grid-area: sulfex; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.blkcreek { grid-area: blkcreek; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.aposgal-head { grid-area: aposgal-head; 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.aposgal { grid-area: aposgal; 

}



/*    GALLERY CODE    */

  .ggtitle { 
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}

.gg-container { grid-area: gallery;
  --main-color: rgba(19,19,19,0.8);
  --secondary-color: rgba(10,10,10,0.8);
  --txt-color: #fff;
  --img-bg-color:rgba(19,19,19,0.8);
  --backdrop-color:rgba(19,19,19,0.8);
  --gap-length: 20px;
  --row-height: auto;
  --column-width: 350px;
  

}

.gg-container *[data-theme="dark"] {
  --main-color: #ddd;
  --secondary-color: #eee;
  --txt-color: #FFFFFF;
  --img-bg-color:rgba(19,19,19,0.8);
  --backdrop-color: rgba(19,19,19,0.8);
}

.gg-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
  grid-auto-rows: var(--row-height);
  grid-gap: var(--gap-length);
          align-items: center;
        justify-items: center;
}

.gg-box img {

  object-fit: cover;
  cursor: pointer;
  max-width: 350px;
  min-height:100px;
  max-height:250px;
  margin-bottom:20px;
  border-radius:10px;
  background: var(--img-bg-color);
}

#gg-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--backdrop-color);
  z-index: 9999;
  text-align: center;
}

#gg-screen .gg-image {
  height: 80%;
  display: inline-flex;
  margin-top:4rem;
  justify-content: center;
  align-items: center;
}

#gg-screen .gg-image img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border-radius:10px;
  align-content: center;
  align-items: center;
}

.gg-btn {
  width: 35px;
  height: 35px;
  background: var(--main-color);
  color: var(--txt-color);
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 2px;
  position: fixed;
  bottom: 10px;
}

.gg-btn:hover {
  background: var(--secondary-color);
}

.gg-close {
  top: 10px;
}

.gg-close,
.gg-next {
  right: 10px;
}

.gg-prev {
  right: 50px;
}

.gg-prev,
.gg-next {
  bottom: 10px;
}

@media (min-width: 478px) {
  .gg-box img:nth-child(2n):not(:last-of-type) {
    grid-row-end: span auto;
  }

  [data-layout="horizontal"] img:nth-child(2n):not(:last-of-type) {
    grid-column-end: span 2;
    grid-row-end: span 1;
  }

  [data-layout="square"] img:nth-child(2n):not(:last-of-type) {
    grid-row-end: span 1;
    grid-column-end: span 1;
  }
}

@media (max-width: 768px) {
  .gg-box {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: calc(var(--row-height) - 15vh);
    margin: 10px 0;
  }
}

@media (max-width: 450px) {
  .gg-box {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}


/*    COMIC VIEW CODE   */

.comicpagecontainer {
  display: grid; 
  grid-template-columns: auto 5fr;
  grid-template-rows: auto;
  gap: 20px 20px;
  grid-template-areas: 
    "Title Title"
    "Menu Menu"
    "Sidebar comicpost"
    "Footer Footer"; 
  max-width:1400px;
  margin:auto;
}

.comicpost {
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: auto; 
  gap: 20px 20px; 
  grid-template-areas: 
    "comictitle comictitle comictitle"
    "comicdesc comicdesc comicdesc"
    "comic-container comic-container comic-container"; 
}
.comictitle { grid-area: comictitle;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing:border-box;
}
.comicdesc { grid-area: comicdesc;
  width:100%;
  position:relative;
  color:#eeeeee;
  background-color:rgba(19,19,19,0.8);
  text-align:justify;
  text-shadow: -0.08em 0 0.5px #e005b9;
  margin:auto;
  padding: 1em;
  box-sizing: border-box;
}

.comic-container { grid-area:comic-container;
  width:100%;
  padding:1em;
  box-sizing:border-box;
}

.gg-container2 { 
  --main-color: rgba(19,19,19,0.8);
  --secondary-color: rgba(10,10,10,0.8);
  --txt-color: #fff;
  --img-bg-color:rgba(19,19,19,0.8);
  --backdrop-color:rgba(19,19,19,0.8);
  --gap-length: 20px;
  --row-height: auto;
  --column-width: 1fr;
  

}

.gg-container2 *[data-theme="dark"] {
  --main-color: #ddd;
  --secondary-color: #eee;
  --txt-color: #FFFFFF;
  --img-bg-color:rgba(19,19,19,0.8);
  --backdrop-color: rgba(19,19,19,0.8);
}

.gg-box2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: var(--row-height);
  grid-gap: var(--gap-length);
  align-items: center;
  justify-items: center;
}

.gg-box2 img {

  object-fit: cover;
  cursor: pointer;
  max-width:100%;
  min-height:100px;
  margin-bottom:20px;
  border-radius:10px;
  background: var(--img-bg-color);
}

#gg-screen2 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--backdrop-color);
  z-index: 9999;
  text-align: center;
}

#gg-screen2 .gg-image2 {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#gg-screen2 .gg-image2 img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border-radius:10px;
  align-content: center;
  align-items: center;
}

.gg-btn2 {
  width: 35px;
  height: 35px;
  background: var(--main-color);
  color: var(--txt-color);
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 2px;
  position: fixed;
  bottom: 10px;
}

.gg-btn2:hover {
  background: var(--secondary-color);
}

.gg-close2 {
  top: 10px;
}

.gg-close2,
.gg-next2 {
  right: 10px;
}

.gg-prev2 {
  right: 50px;
}

.gg-prev2,
.gg-next2 {
  bottom: 10px;
}

@media (min-width: 478px) {
  .gg-box img:nth-child(2n):not(:last-of-type) {
    grid-row-end: span auto;
  }

  [data-layout="horizontal"] img:nth-child(2n):not(:last-of-type) {
    grid-column-end: span 2;
    grid-row-end: span 1;
  }

  [data-layout="square"] img:nth-child(2n):not(:last-of-type) {
    grid-row-end: span 1;
    grid-column-end: span 1;
  }
}

@media (max-width: 768px) {
  .gg-box {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: calc(var(--row-height) - 15vh);
    margin: 10px 0;
  }
}

@media (max-width: 450px) {
  .gg-box {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* MOBILE VIEW */

@media (max-width:800px) {
  
  .container {
  display: grid; 
  grid-template-columns: auto; 
  grid-template-rows: auto; 
  gap: 1em 1em; 
  grid-template-areas: 
    "Title"
    "Menu"
    "Sidebar"
    "Mainpost"
    "Footer"; 
  width: 80%; 
  }


}



@keyframes blinkingText{
    0%{     color: #e70088;    }
    2%{    color: #e70088; }
    4%{    color: #e70088; }
    6%{    color:transparent;  }
    8%{   color: #e70088;    }
    10%{   color: #e70088;    }
    12%{   color: transparent;    }
    14%{   color: transparent;    }
    16%{   color: #e70088;    }
    18%{    color: #e70088; }
    20%{    color: transparent; }
    22%{    color: transparent; }
    24%{    color: transparent; }
    26%{    color: transparent; }
    28%{    color: transparent; }
    30%{    color: transparent; }
    32%{    color: transparent; }
    34%{    color: transparent; }
    36%{    color: transparent; }
    38%{    color: transparent; }
    40%{    color: transparent; }
    42%{    color: transparent; }
    44%{    color: transparent; }
    46%{    color: transparent; }
    48%{    color: transparent; }
    50%{    color: transparent; }
    52%{    color: transparent; }
    54%{    color: transparent; }
    56%{   color: #e70088;    }
    58%{   color: #e70088;    }
    60%{    color:transparent;  }
    62%{    color: #e70088; }
    64%{    color: #e70088; }
    66%{    color: transparent; }
    68%{    color:transparent;  }
    70%{    color: transparent; }
    72%{    color: #e70088; }
    74%{     color: #e70088;    }
    76%{   color: #e70088;    }
    78%{   color: #e70088;    }
    80%{   color: #e70088;    }
    82%{   color: #e70088;    }
    84%{   color: #e70088;    }
    86%{   color: #e70088;    }
    88%{   color: #e70088;    }
    90%{   color: #e70088;    }
    92%{   color: #e70088;    }
    94%{   color: #e70088;    }
    96%{   color: #e70088;    }
    98%{   color: #e70088;    }
    100%{   color: #e70088;    }

}