/* 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 {
       height: auto;
     max-height: 100%;
     overflow: hidden;
  }


/*background, main font, etc*/
body {
font-family: "consolas";
font-size: 14px;
color: #4F1D43;
background-image: url(https://crystalfruit.neocities.org/colosseum/img/colobackground.png);
background-repeat:no-repeat;
background-attachment: fixed;
background-color: #D2E6F7;
}

/*link color and decorations*/
a {
color: #F87035;
}

a:hover {
 color: #FE7A73;
}

/*this is so it doesn't underline the links 'cause I think it's ugly lmao*/
a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }


/*aligning tools for the main boxes that make up the site
everything goes inside the wrapper*/

.wrapper {
  max-width: 1400px; 
  margin: 0 auto;
 }
 
.row {
  display: flex;
  align-items: center;
   }
  
.column {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  }
  
  
  
  
/*style for the li'l boxes of content*/ 
  
.box {
 background-color: #FFEEBD;
 outline: groove 2px #F87035;
 border-radius: 1px;
 margin: 6px;
}

.nav {
 width: 178px;
}

.update {
 width: 178px;
 height: 562px;
 overflow: auto;
}

.main {
  width: 1008px;
  height: 690px;
  overflow: auto;
}



.footer {
  margin-left: 6px;
  margin-right: 6px;
  width: 1380px;
  background: #FFA366;
  color: #FFEEBD;
  border-radius: 2px;
  padding: 4px;
  font-size: 11px;
  text-align: center;
}




/*Formatting for specific areas*/ 
.inner {
padding: 4px;
}

.inner2 {
padding: 8px;
}

.innerlist {
padding-left: 4px;
padding-top: 4px;
font-size: 12px;

}


.box h1, .box h3  {
  background: #F87035;
  padding: 0.1em 0.1em 0.2em 0.1em;
  margin: 0;
  text-align: center;
  border-bottom: 3px;
  color: #FFEEBD;
  font-family: "impact";
}

.artpackblurb {
  height: 200px;
  width: 980px;
  outline: groove 2px #F87035;
  border-radius: 1px;
  margin: 4px;
  
}

.artpackinner {
  height: 200px;
  width: 980px;
  
}

.artpackthumb {
  height: 192px;
  width: 192px;
  outline: solid 4px #F87035;
  border-radius: 1px 1px 0px 0px;
  margin: 4px;
  float: left;
  clear: right;
  
}







  
/*clickable buttons*/
.navbutton {
  width: 162px;
  height: 20px;
  margin: 4px 10px 10px 4px; 
  background-color: #F87035;
  outline: 2px solid #4F1D43;
  color: #4F1D43;
  font-size: 14px;
  border: none;
  border-radius: 1px;
  box-shadow: 2px 4px;
}

.navbutton:hover {
  background-color: #FFA366; 
  color: #F87035;
  outline: 2px solid #F87035;
  cursor: pointer;
  box-shadow: none;
}






 /* Dropdown Button */
.dropbtn {
  background-color: #F87035;
  width: 170px;
  outline: none;
  color: #4F1D43;
  padding: 8px;
  font-size: 14px;
  border-radius: 2px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFA366;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
  height: 140px;
  overflow: auto;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #FFEEBD;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #FFEEBD; color:#FFA366;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #FFA366;}







 /* image properties */
 
 .banner {
   width: 1388px;
   margin-top: 0px;
   margin-bottom: 2px;
   outline: groove 2px #F87035;
   border-radius: 1px;
   margin-left: 6px;
   margin-right: 6px;
 }
 
 .chapterindex {
   width: 840px;
   margin: 4px;
   outline: groove 2px #F87035;
   border-radius: 1px;
 }
 
  .substar {
   width: 178px;
   height: 300px;
   margin: 6px;
   outline: groove 2px #F87035;
   border-radius: 1px;
 }

 .comicpage {
   width: 960px;
   margin-top: 2px;
   margin-bottom: 2px;
 }

.tinygif {
   height: 10px;
 }

.mediumgif {
   height: 76px;
 }





.thumbnailsmall {
  width: 200px;
  outline: groove 2px #F87035;
  border-radius: 1px;
  margin: 4px;
}

.thumbnailmedium {
  width: 400px;
  outline: groove 2px #F87035;
  border-radius: 1px;
  margin: 4px;
}

.thumbnailbig {
  width: 700px;
  outline: groove 2px #F87035;
  border-radius: 1px;
  margin: 4px;
}




.thumbnailsmall, .thumbnailmedium:hover {
  cursor: pointer;
  opacity: 0.8;
}







/*This is for the little comment box courtesy of virtual-observer

    Below you will be able to freely customize every aspect of the comment widget.
    Most aspects of the widget are 100% able to be customized in CSS, but for strong structural changes,
    you may have to edit the JavaScript file.

    These are all the classes and IDs at your disposal!
    Classes have a c- at the start and IDs have a c_
    You don't need every single one for a good theme, but I tried to give as many options as possible!
*/
/*
    Containers:
        #c_widget - The container <div> for the entire widget
        #c_inputArea - The wrapper <div> around the form
        #c_container - The wrapper <div> around all the comments

    The input form:
        #c_form - The whole input <form>
        #c_widgetTitle - The <h2> title at the top of the form

        .c-inputWrapper- All <div> wrappers for each label/input pair
        .c-label - All <label>s
        .c-input - All <input>s

        #c_nameWrapper - The wrapper <div> for the name field
        .c-nameLabel - The <label> for the name field
        .c-nameInput - The <input> for the name field

        #c_websiteWrapper - The wrapper <div> for the website field
        .c-websiteLabel - The <label> for the website field
        .c-websiteInput - The <input> for the website field

        #c_textWrapper - The wrapper <div> for the text field
        .c-textLabel - The <label> for the text field
        .c-textInput - The <input> for the text field

        #c_submitButton - The submit button (It's an <input> element with a type of "submit")
        #c_replyingText - The text <span> that displays when a user is replying to a comment

    The comment section:
        .c-comment - All comment <div>s
        .c-reply - All reply <div>s (contained within parent comment <div>s)
        .c-replyContainer - The wrapper <div> for all replies
        .c-name - The name of the person submitting the comment/reply (an <h3> element)
        .c-timestamp - The timestamp of when the comment/reply was made (a <span> element)
        .c-site - The website linked at the top of the comment/reply (an <a> element)
        .c-text - The actual text body of the comment/reply (a <p> element)
        .c-replyButton - All reply <button>s
        .c-expandButton - The <button>s to reveal/hide replies (These only show if s_collapsedReplies is set to true in the JS)
        
        #c_pagination - The <div> wrapper for the pagination at the bottom (Only shows if there's more than one page)
        .c-paginationButton - Both left and right directional <button>s
        #c_leftButton - The left <button>
        #c_rightButton - The right <button>
*/

/* Main */
#c_widget {
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 10px;
    font-family: 'consolas';
    font-size: 16px;
    color: #4F1D43; /*color of text that says 'name and website' and 'no comments yet' */
}

#c_widget button, #c_widget input[type=submit] {
    padding: 3px;
    font-family: 'consolas';
    text-decoration: none;
	  text-align: center;
    text-transform: uppercase;
    background-color: #F87035;
    color: #4F1D43;
    border: 2px groove #4F1D43;
    border-radius: 2px;
    box-shadow: 1px 2px;
    
}
#c_widget button:hover, #c_widget input[type=submit]:hover {
    background-color: #FFA366; 
    color: #F87035;
    border: 2px groove #4F1D43;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: none;
}
#c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 0.6;}
#c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
    color: #FFA366;
    border: 2px solid #4F1D43;
}

/* Input section */
#c_inputDiv {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #FFA366; /*black bg of the main box to input comments*/
    border: 2px groove #F87035; /*border of the whole box*/
    border-radius: 2px; 
}

#c_widgetTitle {
    margin: -10px;
    margin-bottom: 10px;
    padding: 2px;
    text-transform: uppercase;
    text-align: left;
    background-color: #F87035;
    color: #FFEEBD;
    font-family: 'impact';
}

.c-inputWrapper {
    display: block;
    text-align: right;
}
.c-input {
    padding: 2px;
    margin: 2px;
    color: #4F1D43;
    border: 1px solid #4F1D43;
    border-radius: 2px; 
   	outline: none;
}
.c-input:focus {border: 2px solid #4F1D43;}

.c-textInput {
    width: calc(100% - 10px);
    max-width: 900px;
    resize: none;
}
#c_submitButton {
    display: block; 
    margin-left: auto; 
    margin-right: 0;
}
#c_replyingText {
    color: #FFEEBD;
    text-align: right;
}

/* Comment section */
.c-comment {
    margin-bottom: 15px;
    padding: 10px;
    border: 2px groove #F87035;
    border-radius: 2px;
    background-color: #F87035; 
}
.c-reply {
    display: block;
    width: 90%;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: 0;
    padding: 10px;
    border: 2px groove #F87035;
    border-radius: 2px;
    background-color: #F87035; 
}
.c-reply:last-child {margin-bottom: 0;}
.c-replyContainer {
    margin: -10px;
    margin-top: 10px;
    padding: 10px;
    background-color: #4F1D43;
}

.c-name {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    color: #FFEEBD;
    font-family: 'consolas';
}
.c-site {
    text-transform: uppercase;
    text-decoration: none;
    color: #FFEEBD;
}
.c-site:hover {color: white;}
.c-timestamp {
    float: right;
    opacity: 0.7;
}
.c-text {
    margin: 0;
    margin-left: -10px;
    margin-right: -10px;
    padding: 4px;
    font-family: Verdana;
    font-size: 14px;
    text-align: justify;
    color: #FFEEBD;
    background-color: #FFA366;  /*actual comment background for the text*/
}

/* Pagination */
#c_pagination {text-align: center;}
.c-replyButton {
    margin-top: 10px;
    margin-right: 4px;
}
.c-expandButton {
    margin-top: 10px;
    margin-left: 4px;
}
.c-paginationButton {
    margin-right: 4px;
    margin-left: 4px;
}