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

#sitecanvas {
  max-width:1020px ;
  margin:0 auto;
  box-shadow: 0 3px 3px 0 #32311933, 0 3px 6px 0 #32311933;
}

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

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

a:hover{
  color: #936d9c;
}

nav{
  padding:10px 40px 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #30232a;
  position: relative;
  height:70px ;
  font-size: 20px;
  font-weight: 700;
}

nav ul{
  display: flex;
  gap:50px ;
  align-items: center;
}

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 #9e8492;
}

h3{
  color: #936d9c;
}

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

/* PAGE BASE*/
.pagecanvas{
  background-color: white;
  width: 100%;
}
.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: #936d9c;
}
.bigheader{
  font-size:50px ;
  margin:0px; 
  color: #936d9c;
}

/* 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: #936d9c;
}
.comicdivider{
  margin-bottom:18px ;
}


/* 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: #936d9c;
}

/* 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: #936d9c;
}
.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: #6b5070;
    padding:3px;
    font-size: 20px;
  }
/* OTHER PAGES */
.artbooktitle{
  margin:0px;
  color:black;
}
.brushicon img{
  width:125px ;
}
.lastupdatenotice{
  color: #b2b2b2;
}

/*RESPONSIVE DESIGN -  MOBILE FRIENDLY*/
@media (max-width:880px) {
  nav ul{
    position: absolute;
    top:70px;
    left:0px;
    right:0px;
    flex-direction: column;
    text-align: center;
    background: #6b5070;
    gap:0;
    overflow: hidden;
    padding:0px ;
  }
  nav ul li{
    padding:20px;
  }
  .menu-icon{
    display: block;
  }
  .welcomeflexbox{
    flex-direction: column;
  
}
.welcomesection{
  width:100% ;
}
.welcomeimg{
   width: auto;
}
.aboutflexbox{
  flex-direction: column;
}
.aboutsection{
  width: auto;
  padding-left: 0px;
}
.bigheader{
  text-align: center;
}

.authorimage{
  text-align: center;
  width: auto;
  padding-top:30px ;
}
blockquote{
  margin:18px 0px;
}
.webcomicflexbox{
  flex-direction: column;
}
.webcomicimage{
 text-align: center;
}
.webcomicimage img{
  width: auto;
 }
 .brushicon {
  text-align: center;
 }
 .brushicon img{
  width: auto;
 }
 #webcomicheader{
    text-align: center;
 }
.webcomicsection h1,.webcomicsection h2{
  text-align: center;
}
.webcomiclink {
  text-align: center;
}
.artbox {
  flex-direction:column;
}
.artbox .artcolumn {
  width:auto ;
}
.toolsimages{
  width:100% ;
}
.lastupdatenotice{
    text-align: center;
}


}