/* 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." */
html {
  background-image: url('assets/ultimaThule.jpg');
  background-size: cover; 
}

.dropdown {
  position: relative;
}

.dropdown-content {
  margin-top:13px;
  border-radius: 0px 0px 5px 5px;
  display: none;
  position: absolute;
  background-color: #884564;
  min-width: 107px;
  box-shadow: 0px 8px 16px 0px rgba(255, 0, 0, 0.2);
}

.dropdown-content a {
  color: rgb(228, 228, 228);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background:linear-gradient( #4d9de7, #272330); 
  border-radius: 0px 0px 5px 5px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #000000;
}

#footer {
  background: linear-gradient( #c24177, #1a1316); 
  padding:3px;
  font-size:20px;
  border-radius:10px 10px 0px 0px;
}
.logo {
  padding: 0px 0px 0px 0px;
  /*box-shadow: 3px 3px 3px 3px #32311933, 3px 3px 3px 0px #32311933;*/
  border-style: outset;
  border-width:2px;
  display: flex;
  justify-content: left;
  flex-direction:column;
  padding: 0px 0% 0% 0%;
  height:210px;
  width:240px;
  margin-left:30px;
  margin-top:20px;
  margin-bottom:20px;
  border-color:rgb(72, 48, 92);
  border-width:1px;
  border-style:solid;
  box-shadow: -1px 2px 2px 0px #00000033, -1px 2px 2px 0px #00000033;
  /*rotate: -4deg;*/
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.bounce {
  animation-name:idleBounce;
  animation-duration:4s;
  animation-iteration-count: infinite;
}
@keyframes idleBounce {
  0%   {rotate:0deg;}
  25%   {rotate:10deg;}
  50%   {rotate:0deg;}
  75%   {rotate:-10deg;}
  100%   {rotate:0deg;}
}

.leftBox {
  display:flex;
  flex-direction:column;
  flex-wrap: nowrap;
  margin: 4px auto;
  margin-top:10px;
  border-radius:6px;
  box-shadow: -2px 2px 2px 0px #00000033, -1px 2px 2px 0px #00000033;
}

.darken {
  background: rgba(52, 40, 54, 0.315);
  transform-origin: bottom left;
  transform:scaleY(1.01);
}

.rightBox {
  display:flex;
  flex-direction:column;
  flex-wrap: nowrap;
  margin: 4px auto;
  margin-top:10px;
}

#siteCanvas {
  padding: 3px;
  margin: 8px auto;
  box-shadow: 0px 3px 3px 0px #00000033, 0px 3px 6px 0px #00000033;
  width:1150px;
  height:1269px;
  background-image: url('assets/canvas2.jpg'), linear-gradient(#30232a, #30232a);
  background-size:cover; 
  background-clip:content-box, padding-box;
}




#entirePage {
  /*padding: 0px 0% 0% 30%;*/
  
  display:         flex;
  flex-wrap:       wrap;
  flex-grow:1;
  justify-content: left;
  height: 1110px;
  flex-direction: row;
  background-image: url('assets/canvas2.jpg');
  background-size: cover; 
  z-index:2;
}


.invisible {
  color:  rgba(0, 0, 0, 0.01)
}

.purple {
  color: rgb(96, 52, 185);
}

.purpleDark {
  color: rgb(71, 49, 117);
}

.leftPage {
  display: flex;
  justify-content: left;
  padding: 2px;
  border-color:rgb(0, 0, 0);
  border-width:0px;
  border-style:solid;
  margin:0px;
  flex-direction: column;
  flex-wrap: nowrap;
}

.leftBoxes {
  margin-top:5px;
  margin-bottom:3px;
  border-radius:5px;
  padding-bottom:5px;
  background: linear-gradient(rgba(228, 222, 228, 0.65),rgba(185, 180, 185, 0.65));
  border-color:rgba(121, 93, 93, 0.753);
  border-top-color:rgba(255, 255, 255, 0.829);
  border-right-color:rgba(255, 255, 255, 0.842);
  border-width:3px 3px 3px 3px;
  border-style:solid;
  margin-right:2px;
}

.centerBoxes {
  margin-left: 40px;
  margin-top:5px;
  margin-bottom:3px;
  border-radius:5px;
  padding-bottom:5px;
  background: linear-gradient(rgba(228, 222, 228, 0.65),rgba(185, 180, 185, 0.65));
  border-color:rgba(121, 93, 93, 0.753);
  border-top-color:rgba(255, 255, 255, 0.829);
  border-right-color:rgba(255, 255, 255, 0.842);
  border-width:3px 3px 3px 3px;
  border-style:solid;
  margin-right:2px;
}

.h1NoPadding {
  line-height: 0.5;
}

.headerGradient {
  padding: 12px;
  border-radius: 5px;
  background: linear-gradient(to right, rgba(250, 89, 143, 0.349),rgba(250, 89, 156, 0.055),rgba(185, 180, 185, 0),rgba(185, 180, 185, 0));
}
.gallery {
  box-sizing:border-box;
  padding: 0;
  border: 0;
}

.gallery-component-modal::before {
  animation: gallery-component-modal-spinner 1s infinite linear;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4rem;
  content: '';
  display: block;
  height: 4rem;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: opacity 0.25s ease;
  transition-delay: 0.5s;
  width: 4rem;
}

.gallery-component-modal {
  --color-background: rgba(10, 10, 10, 0.85);
  --color-background-zooming: rgba(0,0,0,1);
  --color-caption-text: #FFFFFF;
  align-content: center;
  align-items: center;
  background-color: var(--color-background);
  display: grid;
  grid-template-areas:
  "previous image   next   "
  "caption  caption caption";
  grid-template-columns: min-content auto min-content;
  height: 100%;
  justify-content: space-between;
  left: 0;
  opacity: 0;
  outline: 0;
  padding: 2rem 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  touch-action: pan-x pinch-zoom;
  transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s, background-color 0.5s ease;
  user-select: none;
  visibility: hidden;
  width: 100%;
  z-index: 0;
}

.inner {
  grid-area: image;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  transform: translateY(0.75em);
  transition: all 0.5s ease;
  width: 100%;
}

.gallery-component-modal > .inner img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
  max-width: var(--natural-width, none);
  max-height: var(--natural-height, none);
  margin: 0 auto;
}

.gallery-component-modal .nav {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3rem;
  cursor: pointer;
  height: 6rem;
  transition: opacity 0.25s ease, transform 0.5s ease;
  width: 8rem;
}

.gallery-component-modal.dark .nav {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5saW5lIHtzdHJva2U6ICNGRkZGRkY7c3Ryb2tlLXdpZHRoOiAxLjVweDt9PC9zdHlsZT48bGluZSB4MT0iMjQiIHkxPSI4IiB4Mj0iNDgiIHkyPSIzMiIgLz48bGluZSB4MT0iMjQiIHkxPSI1NiIgeDI9IjQ4IiB5Mj0iMzIiIC8+PC9zdmc+');
  opacity: 0.75;
}

.gallery-component-modal .nav.previous {
  grid-area: previous;
  transform: scaleX(-1);
}

.gallery-component-modal .nav.next:hover {
  transform: scale(1.4);
}

.gallery-component-modal .nav.previous:hover {
  transform: scaleX(-1.8);
  
}

.gallery-component-modal .nav.next {
  grid-area: next;
}

.gallery-component-modal .close:hover {
  transform: scale(1.4);
}

.gallery-component-modal.dark .nav {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5saW5lIHtzdHJva2U6ICNGRkZGRkY7c3Ryb2tlLXdpZHRoOiAxLjVweDt9PC9zdHlsZT48bGluZSB4MT0iMjQiIHkxPSI4IiB4Mj0iNDgiIHkyPSIzMiIgLz48bGluZSB4MT0iMjQiIHkxPSI1NiIgeDI9IjQ4IiB5Mj0iMzIiIC8+PC9zdmc+');
  opacity: 0.75;
}

.gallery-component-modal.dark .close {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5saW5lIHtzdHJva2U6ICNGRkZGRkY7c3Ryb2tlLXdpZHRoOiAxLjVweDt9PC9zdHlsZT48bGluZSB4MT0iMjAiIHkxPSIyMCIgeDI9IjQ0IiB5Mj0iNDQiIC8+PGxpbmUgeDE9IjIwIiB5MT0iNDQiIHgyPSI0NCIgeTI9IjIwIiAvPjwvc3ZnPg==');
  opacity: 0.75;
}

.gallery-component-modal .close {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-position: top 1rem right 1rem;
  background-repeat: no-repeat;
  background-size: 3rem;
  cursor: pointer;
  display: block;
  height: 6rem;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s ease, transform 0.5s ease;
  width: 6rem;
}

.gallery:not(:last-child) {
  margin-bottom: 2rem !important;
}

.gallery:not(:first-child) {
  margin-bottom: 2rem !important;
}
.galleryUl {
  gap: 1.125rem;
  display:flex;
  flex-wrap: wrap;
  justify-content: var(--flex-alignment);
}

.galleryLi{
  border-radius: 0.125 rem;
  display:inline-block;
  position:relative;
}
.thumbnail {
  display:block;
  transition:none;
  position:relative;
}

.galleryImage {
  height: auto;
  max-height: 18rem;
  transition:none;
  margin: 0;
  max-width: 100%;
  vertical-align: top;
  width: auto;
}

.frame {
  border-radius: 0.125rem;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.gallery-component-modal.dark {
  --color-background: rgba(10,10,10,0.85);
  --color-background-zooming: rgba(0,0,0,1);
  --color-caption-text: #FFFFFF;
}

.gallery-component-modal.visible {
  pointer-events: auto;
  visibility:visible;
  z-index: 10000;
  opacity: 1;
}

.gallery-component-modal.loaded > .inner {
  opacity: 1;
  transform: translateY(0);
}



.centerBoxesLinks {
  margin-left: 20px;
  margin-top:20px;
  margin-bottom:3px;
  border-radius:5px;
  padding-bottom:5px;
  background: linear-gradient(rgba(238, 231, 238, 0.801),rgba(185, 180, 185, 0.8));
  border-color:rgba(121, 93, 93, 0.753);
  border-top-color:rgba(255, 255, 255, 0.829);
  border-right-color:rgba(255, 255, 255, 0.842);
  border-width:3px 3px 3px 3px;
  border-style:solid;
  margin-right:100px;
}

.readableText {
  font-family: 'open sans';
  line-height: 1.45;
  font-size: 18px;
}

.leftBoxesStamps {
  margin-top:5px;
  margin-bottom:3px;
  border-radius:5px;
  padding-bottom:5px;
  padding-top:5px;
  background: linear-gradient(rgba(228, 222, 228, 0.65),rgba(185, 180, 185, 0.65));
  border-color:rgba(121, 93, 93, 0.753);
  border-top-color:rgba(255, 255, 255, 0.829);
  border-right-color:rgba(255, 255, 255, 0.842);
  border-width:3px 3px 3px 3px;
  border-style:solid;
  margin-right:2px;
  display: inline-grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, auto);
}

.rightPage {
  display: flex;
  justify-content: right;
  padding: 2px;
  margin:10px;
  border-color:rgb(0, 0, 0);
  border-width:0px;
  border-style:solid;
  margin:0px;
  flex-direction: column;
  flex-wrap: nowrap;
}

.centerPage {
  padding: 0px 10px 0% 10px;
  border-radius:0px;
  border-color:rgb(143, 143, 143);
  border-width:0px 0px 0px 1px;
  border-style:solid;
  font-size: 17px;
  align-content:flex-start;
  flex: 3 0px;
}

.aboutLeft {
  
  width: 57%;

  justify-content: left;

  font-size: 18px;
  
}

.aboutRight {
  width: 43%;
  padding-left: 20px;
  font-size: 18px;
}

.aboutAfter {
  height: 53%;
  font-size: 18px;
}

.aboutBefore {
  display: flex;
  height: 37%;
}

nav{
  padding:12px 40px 10px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient( #c24177, #1b1418); 
  position: relative;
  height:70px ;
  font-size: 20px;
  font-weight: 700;
  border-radius:0px 0px 20px 20px;
  box-shadow: 0px 2px 2px 0px #00000033, 0px 2px 2px 0px #00000033, 0px 2px 2px 0px #00000033, 0px 2px 2px 0px #00000033;
  
}

.glow:hover {
  text-shadow: 0 0 50px #ffbdf4, 0 0 50px #ffbdfc;
  
}

nav ul{
  display: flex;
  flex-grow:1;
  gap:25px ;
  align-items: center;
}

nav ul li{
  display: flex;
  flex-grow:1;
}

#title {
  /*font-family: Brush Script MT, cursive;*/
  letter-spacing:-7px;
  line-height:39px;
  /*transform: scale(.85, 1.4);*/
  /*rotate:90deg;*/
  font-size: 55px;
  font-weight: 700;
  display:flex;
  align-items: start;
  justify-content: left;
  filter: drop-shadow(-8px 1px 0px #1b1418);
  
}

body {
  /*background-color: lightpink;*/ 
  color: black;
  font-family: Verdana;
}

html{
  background-repeat:repeat ; 
}


body{
  margin:0px;
  font-family: 'open sans';
}

a{
  color: rgb(74, 58, 105);
}

a:hover{
  color: rgb(139, 90, 237);
}


nav ul li{
  list-style-type:none ;
}

nav ul li a{
  text-decoration:none  ;
  color: white;
}

nav ul li a:hover{
  text-decoration:none  ;
  color: #a999a2;
}

hr{
  border: 1px dashed #5f4452;
}

h3{
  color: rgb(96, 52, 185);
}

.menu-icon{
  display:none ;
}
.menu-icon img{
  height:38px ;
}
#menulist{
  transition: all 0.2s;
}

/* PAGE BASE*/
.entirepage{
  /*background-color: white;*/
  width: 100%;
  padding:110px 20px 20px 20px;
}
.pagecontent {
    display: block;
    font-size:18px ;
    line-height: 1.8;
    padding:20px 50px;
    color: #30232a;
  }

/* HOMEPAGE */
.welcomeflexbox{
  display: flex;
  align-items: center;
  }

.flexboxtwo{
    flex-direction: column;
    display: flex;
  }

.welcomesection{
  width: 50%;
}
.welcomeimg{
    width: 50%; 
  }
.welcomeimg img{
  max-width: 100%;
  
}
.socialmedialist img{
  max-height:30px ;
  padding-right:18px ;

}
.socialmedialist {
  padding:7px 0px 10px 0px;
}
.underheader{
  margin:0px 0px 18px 0px ;
}
.newsheader {
  text-align: center;
  margin:10px 0px ;
  color: #fab637;
}
.bigheader{
  font-size:50px ;
  margin:0px; 
  color: #fab637;
}

/* ABOUT PAGE*/
.aboutflexbox{
  display: flex;
  }

.aboutsection{
    width:60% ;
    padding-left:20px ;
}

.authorimage{
    width: 40%;
    display: flex;
  justify-content: center;
  align-items: center;
  }

.authorimage img{
  max-width: 100%;
}

#faqheader{ 
  text-align: center;
  margin:10px 0px ;
}
.flexboxstamps {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* WEBCOMICS PAGE */
.webcomicflexbox{
  display: flex;
}
.webcomicimage img{
  border-radius:30px ;
  width:200px ;
}
.webcomicsection{
  padding:0px 25px;
  
}
.webcomictitle{
  margin:0px ;
  color: rgb(74, 58, 105);
}
#webcomicheader{
  font-size:50px ;
  margin:0px; 
  color: #fab637;
}
.comicdivider{
  margin-bottom:18px ;
}
.comingsoonbud {
  text-align: center;
}
.comingsoonbud img{
  width:200px ;
}


/* GALLERY PAGE*/
.artbox {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.artbox .artcolumn {
  display:flex;
  flex-direction: column;
  width:49%;
}
.artbox .artcolumn img{
  width:100%;
  padding-bottom:14px; 

}
/* BLOG PAGE*/

.metanotes {
  margin:0px;
  color: rgb(141, 115, 135);
  
}
.blogheading {
  margin:0px 0px 5px 0px ;
}
.blogheader{
  font-size:50px ;
  margin:0px; 
  color: #fab637;
}

/* BLOG PAGE POSTS */
.youtubevideo{
  overflow: hidden;
  padding-bottom:56.25% ;
  position: relative;
  height:0 ;
}
.youtubevideo iframe{
 left:0 ;
 right:0 ;
 height:100% ;
 width:100% ;
 position: absolute;
}
.blogcushion {
  height:20px;
}
.reccheading {
  color: rgb(96, 52, 185);
}
.blogpostnotice{
  color: #b2b2b2;
}
.blogimages_fullpost {
  left:0 ;
  right:0 ;
  height:100% ;
 width:100% ;
}
/* LINKS PAGE */
.linkheaders{
  color: rgb(74, 58, 105);
  margin:0px 0px 10px 0px;
}
.linkregulartext{
  margin:0px;
}
/* FOOTER */
  #footer {
    text-align: center;
    color: white;
    background-color: #30232a;
    padding:3px;
    font-size: 20px;
  }
/* OTHER PAGES */
.artbooktitle{
  margin:0px;
  color:black;
}
.brushicon img{
  width:125px ;
}
.lastupdatenotice{
  color: #b2b2b2;
}

.neon-button {
 padding: 15px 30px;
 font-size: 1.5rem;
 color: #fff;
 text-decoration: none;
 background-color: rgba(0, 0, 0, 0.247);
 border-radius: 5px;
 border: none;
 position: relative;
 overflow: hidden;
 transition: box-shadow 0.4s ease;
}


.neon-button::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /*width: 300%;
 height: 300%;*/
 background-color: rgba(0, 0, 0, 0.685);
 border-radius: 50%;
 z-index: 0;
 transition: opacity 0.4s ease;
 transition: all 0.5s ease-in-out;
}


.neon-button:hover::before {
 opacity: 0;
 transform:scale(1);
}


.neon-button:hover {
 box-shadow: 0 0 10px #3498db, 0 0 20px #3498db, 0 0 30px #3498db;
 background: linear-gradient(rgba(255, 255, 255, 0.496), rgba(255, 255, 255, 0));
 transform: scale(1.1) 1s ease;
}