/* user styles */

            /* styles are what change the color and sizes of stuff on your site. */

            /* these are variables that are being used in the code
    these tended to confuse some people, so I only kept 
    the images as variables */

            :root {
                --header-image: url('');
                --body-bg-image: url('');

                /* colors */
                --content: #27213f;
            }

            /* if you have the URL of a font, you can set it below */
            /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
    */

            @font-face {
                font-family: DayRoman;
                src: url('https://marotovara.neocities.org/Fonts/DAYROM__.ttf');
            }
            @font-face {
                font-family: Comfortaa;
                src: url('https://marotovara.neocities.org/Fonts/Comfortaa-Regular.ttf')
            }

            @font-face {
                font-family: Comfortaa;
                src: url('https://marotovara.neocities.org/Fonts/Comfortaa-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: ComicMaro;
                src: url('https://marotovara.neocities.org/Fonts/Comicmaro-Regular.ttf');
            }
           

           
@font-face {
    font-family: varela;
    src: url('https://marotovara.de/Fonts/VarelaRound.ttf');
}
            

            body {
                font-family: 'Comfortaa', sans-serif;
                margin: 0;
                background-color: #0c0c18;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 65px;
                color: #E2FFB1;
                background-image: var(--body-bg-image);
            }

            * {
                box-sizing: border-box;
            }

            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 1000px;
                /* 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 */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                font-weight: bold;
}
            .gallbox a {
                color: aqua; 
                cursor: pointer;
}
            .archivebox a {
                color: aqua;
}
            footer a {
                color: aqua
}

a {
    color: aquamarine
}

a:hover{
    color: #f99236
}


                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            


            #header {
                width: 100%;
                background-color: #27213f;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
            }

            /* navigation section!! */
            #navbar {
                height: fit-content;
                background-color: #E2FFB1;
                /* navbar color */
                width: 100%;
            }
            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar ul li {
                position: relative;
                padding: 10px;
                padding-bottom: 7px;
            }

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

            /* navigation link when a link is hovered over */
            #navbar ul li a:hover {
                color: #f99236;
                text-decoration: underline;
            }

            #navbar ul li ul {
                display: none;
                left: -20px;
                padding: 10px 20px 15px;
                background-color: #E2FFB1;
                margin-top: 1px;
                position: absolute;
                border-radius: 0 0 10px 10px;
            }

            #navbar ul li:hover ul {
                display: block;
                z-index: 9;
            }

             #navbar ul li ul li a {
background-color: #E2FFB1;
            }
          

            #flex {
                display: flex;
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: #27213f;
                flex: 1;
                padding: 20px;
                order: 2;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */


            footer {
                background-color: #000000;
                /* background color for footer */
                width: 100%;
                height: justify;
                padding: 10px;
                padding-bottom: 20px;
                text-align: center;
                /* this centers the footer text */
            }
.footercol {
    width: 300px;
    display: inline-block;
    text-align: center;
    font-family: DayRoman;
    font-size: 14pt;
    vertical-align: middle;
}
.footercol2 {
    max-width: 150px;
    display: inline-block;
    text-align: center;
    font-family: DayRoman;
    font-size: 14pt;
    vertical-align: top;
    margin-bottom: 30px;
}

.footercol2 button {
    margin: 2px 0
}

.footercol img {
    width: 30px;
}
.footercol p {
    margin-bottom: 10px;
}

            h1 {
                color: #00FFFF;
                font-family: DayRoman;
                font-size: 70px;
}
            h2,h3,h4,h5  {
                color: #E2FFB1;
                font-family: DayRoman;
               
            }


h2 { font-size: 45px}
h3 { font-size: 30px}
h4 { font-size: 22px}
h5 { font-size: 16px}
h6
            strong {
                /* this styles bold text */
                color: #00FFFF;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #0c0c18;
                padding: 10px;
                color: aqua
            }

 /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }


           /* BELOW THIS POINT IS MEDIA QUERY */


            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }


                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
/* END OF PREMADE CSS */



/* MAIN DIVS POSTS ETC */

.posts {
    background-color: #d4d4d4;
    padding: 35px;
    color: #324158;
    font-weight: 600;
    line-height: 1.7;

    }


       
        .psts table {
            background-color: gray;
            border-radius: 10px;
            padding: 5px;
            line-height: 1.3;
            order: 2;
        }

        .psts td {
            background-color: #cfcfcf;
        }

        .psts h3 {
            background-color: #cdcdcd;
            border-radius: 10px;
        }

        .psts td:nth-child(2n+1){
            color: #27213f;
            font-family: DayRoman;
            font-variant: small-caps;
            background-color: #E2FFB1;
                padding: 5px;
            border-radius: 15px;
            border-style: solid;
            border-color: gray;

        }

        .psts td:nth-child(2n){
                padding: 5px;
            border-radius: 15px;
            border-style: solid;
            border-color: gray;
        }

        .psts tr:nth-child(7){
            background-color: aqua;
            margin: 10px;
        }

        .posts hr {
            border-style: solid;
            height: 3px;
            background-color: #27213f;
        }
        .posts h1 {color: #324158}
        .posts h2 {color: #324158}
        .posts h3 {color: #324158}
        .posts h4 {color: #324158}
        .posts h5 {color: #324158}



/* CHIBIDEX */

.chibidex {
    background-color: #f2fed8;
    color: #27213f;
     line-height: 1.7;
}
       
        .chibidex img:hover {
            background-color: #A9F5E1;
        }

.chibidex a {
    color: #36428A
}

.chibidex a:hover{
    color: #f99236
}

.chibidex h1,.chibidex h2,.chibidex h3,.chibidex h4 {
    margin: 0;
    color: #27213f;
}

.character a {
  color: #000000;
  }

 .character {
    background-color: #d4d4d4;
    padding: 35px;
    color: #324158;
    font-weight: 600;
    line-height: 1.7;
}

img.char {
    margin-top: 30px;
    max-width: 100%;
    
}

            .character table {
                border-radius: 5px;
                line-height: 1.3;
                order: 2;
                width: 100%;
            }

            .character td {
                background-color: #cfcfcf;
                
            }

            .character td:nth-child(2n+1){
                color: #36428A;
                font-family: DayRoman;
                font-variant: small-caps;
                font-size: 16pt;
                background-color: #E2FFB1;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 15px;
                padding-left: 15px;
                width: 30%;
                filter: drop-shadow( 7px 2px );

            }

            .character td:nth-child(2n){
                color: #27213f;
                border-bottom-right-radius: 5px;
                border-top-right-radius: 15px;
                padding-left: 15px;
                filter: drop-shadow( 5px 2px );
            }

            .character h3 {
                background-color: #cdcdcd;
                border-radius: 10px;
            }


            .character hr {
                border-style: solid;
                height: 6px;
                background-color: black;
                border-radius: 5px;
                margin-left: 20%;
            }

            .character h1 {color: #324158}
            .character h2 {color: #324158}
            .character h3 {color: #324158}
            .character h4 {color: #324158}
            .character h5 {color: #324158}

.cheeb2 {
    max-width: 400px;
    min-width: 180px;
    width: 20%;
    display: inline-block;
  flex-grow: 1;
    padding: 0px 5px;
    
}

.cheeb {
    max-width: 120px;
    border-radius: 35px;
  transition: transform .2s; /* Animation */
        
}

.cheeb:hover{
    transform: scale(1.5);
    border-radius: 45px;
}


.cheebbox{
  width: 53%;
  display: flex;
    max-height: 250px;
  transition: ease .5s; /* Animation */
    overflow: hidden;
    background-color: #E2FFB1;
    border-radius: 15px;
    position: relative;
    justify-content: center;
}

.cheebbox:hover{
    max-height: fit-content;
    width: 100%;
    overflow: visible;
}

.cheebbox:onclick{
    max-height: fit-content;
    width: 100%;
    overflow: visible;
}

.cheebbox img {
    height: 120px;
    object-fit: cover;
}

.cheebcontainer {
    flex: wrap;
    display: flex
}

/* SHOP THINGS*/

.shopcard {
    background-color:#27213f ;
    color: #E2FFB1;
    padding: 20px;
    border-radius: 20px;
    margin: 50px 50px;
    width: 90%;
}

.shopcard:after {
  content: "";
  display: table;
  clear: both;
}

.shopcard img {
    width: 50%;
}

.shopdescr {
    width: 50%;
    margin: 0;
    float: right;
    padding-left: 40px
}

.shopdescr h3 {
    margin: 5px 0;
}

.shopdescr:after {
  content: "";
  display: table;
  clear: both;
}

.shop {
    border-block-end-style: dotted;
}

.shopcard td {
    padding: 10px 0;
    border-block-end-style: dashed;
}

.shopcard table p {
    margin: 7px 0;
}


/* LIL BOXES */

summary {
    background-color: #E2FFB1;
    color: #36428A;
    padding: 15px;
    font-family: DayRoman;
    font-size: 20pt;
    font-weight: 600;
    border-radius: 15px;
    width: fit-content;
}

.thumbbox {
    max-width: 150px;
    vertical-align: top;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 2px;
    padding: 10px;
}

         .thumbbox:hover {
             background-color: #27213f;
             border-radius: 14px;
         }
         .thumbbox:link {
             text-decoration: none;
         }


.archivebox {
    padding: 5px 10px 10px;
    border-radius: 15px;
}
.gallerybox {
    width: 100%;
    align-content: center;
    color: #7884b8;
    padding: 5px 10px 10px;
    border-radius: 15px;
    background-color: #0c0c18;
    margin-bottom: 30px;
}


.gallbox {
            max-width: 170px;
             vertical-align: top;
            overflow: hidden;
             display:inline-block;
             padding: 5px 10px;
}

        .gallbox:hover {
            background-color: #27213f;
            border-radius: 14px;
        }
        .gallbox img {
            border-radius: 10px;
            margin-top: 5px;
        }
/*-----*/

.pictobox {
    float: right;
    display: flex;
    flex-flow: row wrap;
    width: 90%;
    align-content: center;
    color: #7884B8;
    padding: 5px 10px 10px;
    border-radius: 15px;
    background-color: #0c0c18;
    margin-bottom: 30px;
                
    
}

            .picbox {
            max-width: 170px;
             vertical-align: top;
            overflow: hidden;
             display:inline-block;
                cursor: pointer;
              
            }
            

.picbox p {
    margin: 0px;
    margin-bottom: -23px;
    padding: 3px 10px;
    position: relative ;
    top: -28px;
    color: #0c0c18;
    background-color: rgba(226, 255, 177, 0.58);
    width: max-content;
    border-radius: 5px 35%;
    
}

.comment {
    margin: 0px;
    margin-bottom: -25px;
    padding: 3px 10px;
    position: relative ;
    top: -30px;
    color: #0c0c18;
    background-color: rgba(226, 255, 177, 0.58);
    width: max-content;
    border-radius: 5px 35%;
    
}


                
    img.gall {
        margin: 5px;
        filter: blur(0.5px);
        height: 130px;
        width: 145px;
        object-fit: cover;
        object-position:top;
        border-radius: 10px;

    }

    img.gall:hover{
        background-color: #27213f;
        border-style: solid;
        border-color: #27213f;
        border-width: 5px;
    }

#nsfwbutton {
    float: right;
    position: relative;
    top: -20px;
    right: 5px;
    margin-bottom: -30px;
}

#nsfwbutton p {
    margin: 0;
    color: #f99236;
    background-color: beige;
    width: fit-content;
    padding: 6px;
    border-radius: 30% 5px;
    cursor: default;
    display: inline;
    border: solid;
    border-color: rgba(249, 146, 54, 0.5);
}

#nsfwbutton p:hover {
    color: #f99236
}





/* STAMP CONTAINER */
.stamp {
    max-width: 120px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    display:inline-block;
    padding: 0px 10px;
    margin-top: 20px;
            
}
        .stamp img {
            padding: 5px 0px;

        }


    /* INDEX DIARY */
.lilscroll {
    overflow-y: scroll;
    overflow-x: hidden;
     font-family: ComicMaro;
    font-weight: 500;
    font-size: 19px;
    scrollbar-width: none;
}



/* TAB BOXES */

/* Style the tab */
.tab {
  overflow: hidden;
    border-radius: 15px;
  border: 0px solid #ccc;
}

        /* Style the buttons inside the tab */
        .tab button {
          background-color: #E2FFB1;
            border-radius: 15px;
          float: left;
          border: none;
          outline: none;
          cursor: pointer;
          padding: 14px 16px;
          transition: 0.3s;
          font-size: 20px;
            font-family: DayRoman;
            color: #27213f;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
          background-color: #f2fed8;
        }

        /* Create an active/current tablink class */
        .tab button.active {
          background-color: #AABF87;
        }

/* Style the tab content */
.tabcontent {
    background-color: #E2FFB1;
    border-radius: 15px;
  display: none;
  padding: 6px 12px;
}



/* Style the tab */
.tab2 {
  overflow: hidden;
    border-radius: 15px;
  border: 0px solid #ccc;
}

        /* Style the buttons inside the tab */
        .tab2 button {
            background-color: #27213f; color: #E2FFB1;font-size: 34px;
            border-radius: 15px;
          float: left;
          border: none;
          outline: none;
          cursor: pointer;
          padding: 14px 16px;
          transition: 0.3s;
            font-family: DayRoman;
        }

        /* Change background color of buttons on hover */
        .tab2 button:hover {
          background-color: #212C62;
        }

        /* Create an active/current tablink class */
        .tab2 button.active {
          background-color: #0c0c18;
        }



/* IDS & CLASSES FOR FANFIC */

#contentf {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  max-width: 70%;
}

#contentf p {
    font-size: 12pt;
}

#contentf h3 {
    font-size: 19pt;
    border-bottom: solid;
    margin-bottom: 0px;
    border-width: 2px;
    
}

#ficcontent {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  max-width: 85%;
  line-height: 1.5rem;
    font-family: 'varela';
    font-size: 14.5pt;
    font-synthesis: style;
}

        #ficcontent p {
          margin: 20px 0;
        }

#fic, #desc {
  width: 100%;
}

#fic p {
  text-indent: 1em;
}

#desc {
  text-align: center;  
}

/* Fit container */

.infoboxscroll hr {
  border-width: 0 0 2px 0;
  border-color: #27213f;
  border-style: dashed;
  margin: 20px 0;
}


.ficcontainer {
  width: 100%;
  background-color: #e2e2e2;
  margin: 25px 0;
    border-radius: 25px;
    color: #27213f;
}

.fictitle {
        max-height: fit-content;
  font-size: 26px;
  width: 100%;
  color: #27213f;
  font-family: DayRoman;
  font-weight: bold;
}

        .fictitle a {
          color: #36428A;
        }

        .fictitle a::after {
          content: ' →';
        }

        .fictitle a:hover {
          color: #f99236;
        }

.ficrating {
  width: 70px;
  padding: 5px;
  margin-right: 10px;
  display: inline-block;
  font-size: 35px;
  background-color: #f99236;
  color: #27213f;
  font-family: DayRoman;
  text-align: center;
  vertical-align: baseline;
    border-top-left-radius: 25px;
}

.ficdescription, .infoboxscroll {
  padding: 10px;
}

.ficdescription {
  line-height: 1.5rem;
}

.infocontainer {
  display: flex;
  border-width: 2px 0 0 0;
  border-color: #27213f;
  border-style: solid;
  max-height: ;
}

.ficinfo, .characterinfo {
  width: 50%;
}

.infoheader {
  font-size: 25px;
  width: 100%;
  color: #27213f;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-weight: bold;
  padding: 5px 10px;
  height: ;
}

        .characterinfo img {
            max-width: 90px;
            float: left;
            padding: 5px;
            margin-right: 5px;
        }

        .characterinfo hr {
            clear: both;
            border-width: 0 0 1px 0;
            border-color: #27213f;
            border-style: dashed;
            margin: 5px;
        }

.infoboxscroll {
    width: 100%;
    height: 125px;
    overflow-y: auto;
    font-size: 1em;
    line-height: 1.2rem;
}

            .infoboxscroll span {
                background-color: var(--fontcolor);
                color: #27213f;
                padding: 0 3px;
                font-weight: bold;
                font-family: var(--headerfont);
                font-variant: small-caps;
                letter-spacing: 1px;
            }

.comicprev img {
        width: 18%;
    }



/* BUTTON SIZED THINGS */
          

.button {
    height: 40px;
    min-width: 100px;
    padding: 4px 15px 5px;
    background-color: #27213f;
    color: aqua;
    border-radius: 15px;
    font-size: 16px;
    font-family: Comfortaa;
    font-weight: 900;
    border-color: #0c0c18;
    border-style: solid;
        
}

.buttontwo {
    height: 40px;
    background-color: #27213f;
    color: #36428A;
    border-radius: 15px;
    font-size: 18px;
    border-color: #0c0c18;
    border-style: solid;
        
}

.buttonbig {
    height: 60px;
    min-width: 130px;
    font-family: DayRoman;
    font-size: 30px;
    font-weight:bolder;
    padding: 4px 15px 5px;
    background-color: #27213f;
    color: #f99236;
    border-radius: 15px;
    border-color: #0c0c18;
    border-style: solid;
        
}
        .button:hover {
    background-color: #36428A;
            cursor: pointer;
    
}
        .buttonbig:hover {
    background-color: #36428A;
            cursor: pointer;
    
    
}
        .buttontwo:hover {
    background-color: #0c0c18;
            cursor: pointer;
    
    
}
        .button:active {
    background-color: #f99236;
            cursor: grabbing;
    
}
        .buttonbig:active {
    background-color: #f99236;
            cursor: grabbing;
    
    
}
        .buttontwo:active {
    background-color: #36428A;
            cursor: grabbing;
    
    
}

.logbox {
    max-width: 75%;
    margin: auto;
}

          

.scrollbox{
    overflow: scroll;
    display:inline-block;
    max-width: 70px;
    max-height: 50px;
    
}


/* GALLERY DROPDOWN */





/* PORTFOLIO GALLERY */
        
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}



.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

.scroll-container img {
  padding: 10px;
}


div.gallery {
  border: 0px solid #ccc;
}

div.gallery:hover {
  border: 2px solid #36428A;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.clearfixcomic {
    float: left;
    position: relative ;top: -160px;margin-bottom: -250px;
}

.clearfixcomic:after {
  content: "";
  display: table;
  clear: both;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9; /* Sit on top */
  padding-top: auto; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 900px;
}

/* Modal Content (Image) */
.modal-content img {
  height: 100%;
}

 /*Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 659px;
  text-align: center;
  color: #ccc;
  padding: 13px 0;
  height: 87px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

---

/* SCROLLBAR */

::-webkit-scrollbar {
  width: 10px;
  height: 12px;
  background: var(--backgroundcolor);
}
  
::-webkit-scrollbar-track {
  border-radius: 0px;
  width: 0px;  
  background: var(--backgroundcolor);
  border-color: var(--fontcolor); 
  border-width: 1px;
  border-style: solid;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: var(--fontcolor);
  border-color: var(--fontcolor); 
  border-width: 1px;
  border-style: solid;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--backgroundcolor);  
}





  /* NEW TAB TRY FOR GALLERY */

/* Set height of body and the document to 100% to enable "full page tabs" */

/* Style tab links */
.tablink {
  background-color: #E2FFB1;
    font-family: DayRoman;
    font-weight: 600;
  color: #27213f;
  float: left;
    font-size: 22pt;
  outline: none;
  cursor: pointer;
  width: 11%;
    border-radius: 50px 45%;
    border: solid;
    border-color: aquamarine;
    padding: 10px;
}

.tablink2 {
  background-color: #0c0c18;
    font-family: DayRoman;
    font-weight: 600 ;
  color: #E2FFB1;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 22px;
  width: 22%;
}

.tablink:hover {
  background-color: #f99236;
}
.tablink2:hover {
  background-color: #324158;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontentgall {
  color: white;
  display: none;
  padding: 50px 15px;
  height:auto;
    background-color: #0c0c18;
    border-radius: 37px;
}

.tabcontentgall h3 {
    margin-top: -30px;
    padding: 0px;
    }

/* FILTERING GALL */

/* Create three equal columns that floats next to each other */
.columng {
    float: left;
    margin-bottom: 5px;
    max-height: 144px;
    text-align: center;
    max-width: 150px;
    vertical-align: top;
    overflow: hidden;
    display: none; /* Hide columns by default */
}
.columng p {
    margin: 0px;
    margin-bottom: -10px;
    padding: 3px 10px;
    position: relative ;
    top: -30px;
    color: #0c0c18;
    background-color: rgba(226, 255, 177, 0.58);
    width: max-content;
    border-radius: 5px 35%;
    
}


/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
.galltop h1 {
       float: right;
    margin-top: 0px;
    }

.mobilefix {
    display: none;
}

/* RESPONSIVENESS */

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 840px) {
  
    .column {
    flex: 50%;
    max-width: 50%;
  }
    .tablink {
        padding: 7px 5px;
        font-size: 16pt;
    }
    .columng {
        width: 140px;
    }
    img.gall {
        width: 135px;
        cursor: pointer;
        
    }
    
    h1 {
                color: #00FFFF;
                font-family: DayRoman ;
                font-size: 60px;
}
          

    
    
    
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
    flex: 100%;
    max-width: 100%;
  }
     .columng {
        width: 135px;
    }
     .characterinfo img {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    #ficcontent {
        margin: 0;
        max-width: 100%;
        font-size: 13.5pt;
    }
    
    #contentf {
        max-width: 90%;
        margin: auto;
    }
    
      .tablink {
        font-size: 18pt;
        padding: 1px;
        margin: 0px;
          width: 20%;
    }
    img.gall {
        width: 130px;
        height: 120px;
    }
    
    .galltop h1 {
        float: none;
    }
   
    img.port {
        width: 100%;
    }
    .clearfixcomic {
        float: none;
        position: relative ;
        top: 0px;
        margin-bottom: -0px;
}
    
    .comicprev img {
        width: 32%;
    }
    
    .infoheader {
  letter-spacing: 1px;
    }
    
    .gallerybox {
        padding: 0px;
    }
    
      h1 {
                color: #00FFFF;
                font-family: DayRoman ;
                font-size: 50px;
}
    
    .uhhh {
        padding: 0;
    }
    
    .lilscroll {
        width: 100%;
    }
    
    .logbox {
        max-width: 100%;
    }
    
    .mobilefix {
        margin: 0;
        max-width: 100%;
        display: block;
    }
    
    .mobilehide {
        display: none;
    }
    
    
/*.tabcontentgall h3 {
    margin-top: -30px;
    padding: 0px;
    } */
    
}


            /* END OF THINGS */