:root{ /* learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */

      --body-bg-color:#0A0B0E; /*this changes the overall page's background color*/
      --body-bg-image: url(''); /*add the body image here*/
      --body-bg-position: center top; /*add the body image positioning here. this can be two values (ex: top center) */
      --body-bg-repeat: repeat; /* add the body image repeatability here. you can change it to repeat, repeat-x, repeat-y, etc. */
      --body-bg-size: contain; /*this changes how you want the bg image to stretch out. */
      --body-font: "Oxygen", sans-serif ; /*change the font-family of the entire site here*/
      --body-font-size: 16px; /*change the font size of the entire site here*/
      --body-color:#0A0B0E; /*change the font color of the entire site here*/

      --link:#D14D00; /*change the links color here*/
      --link-hover: #D01500;  /*change the links hover color here*/
      --link-visited:red;

      --banner-image: url('http://gastudios.ca/wp-content/uploads/2024/11/V25KK_headerm.jpg'); /* replace the background here */
      --banner-position: center; /*-- by default, the banner is centered. this is where you can change it --*/
      --banner-repeat: no-repeat; /*-- by default, it's set not to repeat. you can change it to repeat, repeat-x, repeat-y, etc. --*/
      --banner-size: cover; /* this stretches the banner out to cover the whole area */
      --banner-height:680px; /*-- you can change the height of the banner here */
 

      --comic-nav: white; /*This changes the color of the comic navigation! */
      --comic-nav-hover: #777; /*This is what it changes to when you hover over it! */
      --comic-nav-background:black;

      --footer-bg-color: #0A0B0E; /* this changes the footer's background color */
      --footer-bg-image: url(''); /* changes the footer background image */
      --footer-bg-position: top center; /* changes the positioning of the background image */
      --footer-bg-repeat: repeat;
      --footer-bg-size: auto;
      --footer-link:#914400;
      --footer-link-hover: #4B4B4B;
      }


      html, body{
      min-height:100vh;
      background:#0A0B0E;
      }


      hr:last-child {
          display: none;
      }

      /* You don't have to change anything here! Change the variables up top in the :root section. */

      body{
        background-color: var(--body-bg-color);
        background-image:var(--body-bg-image);
        background-position: var(--body-bg-position);
        background-repeat: var(--body-bg-repeat);
        background-size: var(--body-bg-size);
        font-family: "Oxygen", sans-serif;
        text-transform: uppercase;
        color: var(--body-color) !important;
        font-size: var(--font-size) !important;
      }

      a{
        color: var(--link);
      }

          a:hover{
            color: var(--link-hover);
          }

      .banner{
        background-color: var(--banner-bg-color);
        background-image: var(--banner-image);
        background-position: var(--banner-position);
        background-repeat: var(--banner-repeat);
        background-size: var(--banner-size);
        height: var(--banner-height);
  
      }
      
           /* Some other cosmetic changes... */
           * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


.wrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;

}

.wrapper i {
    height: 50px;
    width: 50px;
    background: #904800;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 1.25 rem;
    transform: translateY(-50%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);

}

.wrapper i:first-child {
    left: -22px;

}

.wrapper i:last-child {
    right: -22px;

}

.wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3) - 12px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: 0;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel :where(.card, .img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel.no-transition {
    scroll-behavior: auto;
}

.carousel.dragging .card {
    cursor: grab;
    user-select: none;
}

.carousel .card {
    scroll-snap-align: start;
    height: auto;
    list-style: none;
    background: black;
    border-radius: 2px;
    display: flex;
    cursor: pointer;
    width: auto;
    padding-bottom: 0px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card .img {
    background: green;
    width: 145px;
    height: 145px;
    border-radius: 50%;

}

.card .img img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #fff;
}


.card span {
    color: #6a6d78;
    font-size: 1.31rem;

}

@media screen and (max-width: 900px) {
    .wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 9px);

    }
}

@media screen and (max-width: 600px) {
    .wrapper .carousel {
        grid-auto-columns: 100%;

    }
}

      
        .navbar{
          background-color:#0A0B0E;
          padding-top:0px;
          padding-right:58px;
          padding-bottom:0px;
          padding-left:20px;
          border:4px solid black;
      }
      
      .navbar a, .navbar-link, a.navbar-item{
color: white !important;
text-transform: uppercase;
font-weight:700;
font-size: 16px;
background-color:#121212;
margin-top:5px;
margin-bottom:5px;
margin-left:1px;
margin-right:1px;
border: 2px solid black;
border-radius: 10px;
 padding-top:10px;
          padding-right:10px;
          padding-bottom:10px;
          padding-left:10px;
}

.navbar a:hover, .navbar-link:hover, a:hover.navbar-item{
color: white !important;
text-transform: uppercase;
font-weight:700;
font-size: 16px;
background-color:#4A12FF;
margin-top:5px;
margin-bottom:5px;
margin-left:1px;
margin-right:1px;
border: 2px solid black;
border-radius: 10px;
 padding-top:10px;
          padding-right:10px;
          padding-bottom:10px;
          padding-left:10px;
}

.box{
    background-color:#1B1B1B;
    border:4px solid black;
    padding:30px;
}

.media-content{
    background-color:#1B1B1B;
    color:white;
    font-size:15px;
}


.title{
   color:white;
font-size:22px;
text-align: center;
margin-top:20px;
}

.card{
background-color:#1B1B1B;
 padding-top:0px;
          padding-right:15px;
          padding-bottom:12px;
          padding-left:15px;
border:4px solid black;
border-top:5px solid black;
border-radius: 10px;
}

.card-image{
    padding-top:20px;
    border-radius: 10px;
}

.card-content{
 padding-top:10px;
          padding-right:0px;
          padding-bottom:5px;
          padding-left:0px;
          font-size:14px;
          color:#D8D8D8;
          text-transform: none;
    
}

.hero-body1{
background-color:#0A0B0E;
padding-top:50px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

}

      .comic-nav a{
        color: var(--comic-nav);
      }

          .comic-nav a:hover{
            color: var(--comic-nav-hover);
          }

      .footer{
        background-color: var(--footer-bg-color);
        background-image: var(--footer-bg-image);
        background-position: var(--footer-bg-position);
        background-repeat: var(--footer-bg-repeat);
        background-size: var(--footer-bg-size);
        font-size: 14px;
         text-transform: uppercase;
      }

          .footer a{
            color: var(--footer-link);
            text-transform: uppercase;
             font-size: 14px;
          }

          .footer a:hover{
            color: var(--footer-link-hover);
             text-transform: uppercase;
             font-size: 14px;
          }


   
@media (min-width: 768px) {
    

    
  .button-82-front {
    font-size: 1.25rem;
    padding: 12px 42px;
  }
}

.button-82-pushable:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}
      
      
      /* Mobile support cosmetic changes... */

      @media screen and (max-width: 768px){
        .comic-nav span{
          display: none;
        }

        .reply1, .reply2, .reply3, .reply4, .reply5{
            margin-left: 0;
        }
      }
            
  /* Carousel... */
            

      
    /* Comic Page... */
    
    
.comicarea {
    text-align:center;
}

#comicimagewrap {
    padding:15px;
    background-color:#030303;
    
    display:inline-block;
}

#comicimagewrap img {
    margin:auto;
}



.comicnav {
    margin:auto;
    text-align:center;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    max-width:600px;
}


input::placeholder {
    color:#cabfa1;
    opacity:1;
}


#pages {
    font-size:1.2em;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}

#pageslabel {
    margin-right:10px;
}

.pagelink,
.pagelink:link,
.pagelink:visited {
    background-color:#7DACD7;
    color:#ffffff;
    border-radius:50%;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:35px;
    min-height:35px;
    box-sizing:border-box;
    transition:background-color 250ms, color 250ms;
    margin:5px;
    padding:4px;
}

.currentpage,
.currentpage:link,
.currentpage:visited {
    background-color:#1160AA;
    color:#ffffff;
}

.pagelink:not(.currentpage):hover {
    background-color:#082642;
    color:#ffffff;
}

.pageskip {
    margin-left:5px;
    margin-right:5px;
}


    /* Age Gate... */