/* Assembled from Nero Villagallos O'Reilly's website guide and Kaylee Rowena's gallery template. */

/* Nero Villagallos O'Reilly, The Quick 'n' Dirty Guide to Making a Website (2022): https://blog.itsnero.com/webguide */

/* Kaylee Rowena, "a super simple portfolio template" (2025): https://kayleerowena.com/blog/2025/code-template/ */

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
img{vertical-align:middle}a{color:inherit}
/* End extract */


/******** BASE STYLING ********/

:root{
   /* misc styling */
    --max-width: 950px;
    --spacing: 15px;
    --border-radius: 15px;
    --underline: solid;

    /* calculations */
    --halfspacing: calc(var(--spacing) / 2);
    --doublespacing: calc(var(--spacing) * 2)   
}

[data-theme="dark"] {
    --border: solid, #cbe3e1, .1rem;
    --altborder: dashed, #cbe3e1, .1rem;
    --bg-img: url(/assets/css/img_css/bg_block3.png);
	  --color-bg: #040404;
    --color-cbg: #0e0e0f;
    --color-fg: #50c5c9;
    --color-head: #80e4e8;
    --color-accent: #00f7ff;
    --color-hover: #c8fdff;
    --toggle-img: url(/images/00_UI/tolight_button.png);
    --color-border: #cbe3e1
}

[data-theme="light"] {
    --border: solid, #362100ff, .1rem;
    --altborder: dashed, #362100ff, .1rem;
    --bg-img: url(/assets/css/img_css/bg_block4.png);
	  --color-bg: #f5efe6;
    --color-cbg: #e7ded0;
    --color-fg: #160d08;
    --color-head: #26150c;
    --color-accent: #b57c00;
    --color-hover: #f4cf2a;
    --toggle-img: url(/images/00_UI/todark_button.png);
    --color-border: #362100
}

/******** MAIN CONTENT TEXT SETTINGS ********/

body {
  position: relative;
  margin: 0 auto;
  max-width: 950px;
  width: 85%;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

#bannerimage{
  width: 40%;
  height: auto;
  display: block;
  max-width: 80%;
}

.subbanner {
  display: flex;
  align-items: center;
  justify-content: center;
}

#subbannerimage {
  width: 40%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

/* TEXT STYLING */

a:link {
  color: var(--color-accent)}
a:hover {
  color:var(--color-hover)} 
a:visited {
  color: var(--color-accent)}

html,body {
  font-family: "inconsolata", sans-serif;
  background-image: var(--bg-img);
  background-attachment: fixed;
  width: 100%;
	color: var(--color-fg);
  font-size: 1rem;
  padding-top: 2rem;
	}

h1,h2,h3,h4,h5,h6 {
	font-family: "Courier Prime", serif;
  color: var(--color-head)}
h1 {
	font-size: 85px;
	line-height: 80%;	}
h2 {
	font-size: 65px;
	line-height: 80%;	}
h3 {
	font-size: 48px;	}
h4 {
	font-size: 30px;	}
h5 {
	font-size: 24px;	}
h6 {
	font-size: 18px;	}

.content {
  margin-top: 70px;
  margin-bottom: 30px;
  margin-right: 10%;
  margin-left: 10%;
}

.center {
	display: block;
	margin-left: 20%;
	margin-right: 20%;
}

/* JS SPECIFIC SETTINGS + WIDGETS */

.displaytoggle {
  padding: 1px;
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  transition: all var(--global-transition-time) ease-in-out;
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  size: .8rem;
  image-rendering: pixelated;
  text-align:center;
}

.comicview {
  padding: 1px;
  transition: all var(--global-transition-time) ease-in-out;
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  size: .8rem;
  image-rendering: pixelated;
  text-align:center;
}


/******** ALL BOXES ********/

/* STANDARD BOX */
  * {
      box-sizing: border-box;
      max-width: 100%;
      -ms-overflow-style: auto;
      box-decoration-break:clone
  }

  .box {
      padding: var(--spacing);
      border: var(--border);
      margin: var(--spacing) auto;
      border-radius: var(--border-radius);
      break-inside:avoid;
  }
  
  .bigbox{
      display: flex;
      flex-flow: column wrap;
      gap: var(--halfspacing) var(--spacing);
      margin: var(--spacing) auto;
      max-height: 90%;
      width: 85%;
      max-width: 950px;
      padding: 1.5rem;
      background-color: var(--color-bg);
      break-inside:avoid;
      border-radius: 15px;
  }
  
  .scrollbox {
      padding: var(--spacing);
      border: var(--border);
      margin: var(--spacing) auto;
      border-radius: var(--border-radius);
      break-inside:avoid;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--color-head);
      scrollbar-gutter:var(--border-radius);
  }

  .center {
    text-align: center;  
  }

  footer {
    background-color: var(--color-bg);
    padding: var(--spacing);
    border: var(--border);
    margin: var(--spacing) auto;
    width: 85%;
    max-width: 950px;
    border-radius: 15px;
    display: block;
    text-align: center;
    font-size: .8rem;
    margin: var(--spacing) auto;
  }

  .whisper {
    border: var(--altborder);
    text-align: center;
    justify-content: center;
  }

  .commentbox {
    background-color: var(--color-bg);
    padding: var(--spacing);
    border: var(--border);
    margin: var(--spacing) auto;
    width: 85%;
    max-width: 950px;
    border-radius: 15px;
    display: block;
    text-align: center;
    font-size: 1rem;
    margin: var(--spacing) auto;
  }
  #statuscafe {
      padding: .5em;
      background-color: hsl(0, 0%, 50%, 0.5);
      color: var(--color-fg);
      border: var(--border);
  }
  #statuscafe-username {
      margin-bottom: .5em;
  }
  #statuscafe-content {
      margin: 0 1em 0.5em 1em;
  }

  /* FLEX BOXES */
  .flex {
      display: flex;
      flex-flow: row wrap;
      gap: var(--halfspacing) var(--spacing)
  }

  .flex > * {
      flex: 1 2 200px;
      margin:0 auto;
      text-align: center;
  }

  .flexcomic {
      justify-content: center;
      display: inline-flex;
      flex-flow: var(--flexflowcomic);
      gap: 0.5rem;
      width:100%;
      padding: var(--spacing);
      break-inside: avoid;
      margin: auto;
  }

  .comicimage {
      justify-content: center;  
      display: block;
      overflow: hidden;
      padding: 0;
      margin: var(--spacing) auto;
      border: var(--border);
      border-radius: 15px;
  }

  .comicdesc {
      justify-content: center;
      background-color: var(--color-bg);
      padding: var(--spacing);
      border: var(--border);
      border-radius: 15px;
      margin: var(--spacing) auto;    
      max-width: 550px;
      flex:1;
  }

 /* Comic display box on indiv page */

   [data-scroll="horizontal"] {
    --comic-imagehi: 700px;
    --comic-containerhi: fit-content;
    --comic-alignment: left;
    --comic-flexflow: row;
    --comic-width: 1050px;
   }

  [data-scroll="vertical"] {
    --comic-imagehi: 800px;
    --comic-containerhi: 800px;
    --comic-alignment: start;
    --comic-flexflow: column;
    --comic-width: fit-content;
  }

  .comiccontainer {
      display: flex;
      flex-flow: var(--comic-flexflow);
      justify-content: var(--comic-alignment);
      width: var(--comic-width);
      height: var(--comic-containerhi);
      margin: var(--spacing) auto;
      overflow: scroll;
      scrollbar-width: thin;
      scrollbar-color: var(--color-fg);
      scrollbar-gutter:var(--border-radius);
      background-color: var(--color-bg);
      padding: var(--spacing);
      border: var(--border);
      border-radius: 10px;
      gap: 0.5rem;
  }

  .comiccontainer1 {
      white-space: var(--comic-whitesp);
      width: 50%;
      max-width: 450px; 
      margin: var(--spacing) auto;
      overflow: scroll;
      scrollbar-width: thin;
      scrollbar-color: var(--color-fg);
      scrollbar-gutter:var(--border-radius);
      background-color: var(--color-bg);
      padding: var(--spacing);
      border: var(--border);
      border-radius: 10px;
      gap: 0.5rem;
  }

  .comiccontainer img {
      width: fit-content;
      margin: auto;
      max-width: 850px;
      height: var(--comic-imagehi);
      padding: 5px
  }

/******** ADJUSTING FOR MOBILE ********/

  @media screen and (max-width: 767px) {
    .content {margin-top: 15px;
      margin-bottom: 10px;}
    html,body {padding-top:1rem}
    .comicview {margin-left: 5%;}
    .comiccontainer {max-width: 95%; 
      max-height: 500px;}
    .comiccontainer img {max-height: 450px; 
      width: auto; 
      margin: 1px; 
      object-fit: cover;}
    .comiccontainer1 img {max-height: 450px;}   
    .comiccontainer1 {width: 95%;}
    .flexcomic {align-items: center}
    .comicimage img {width:100px}
    .bigbox {width: 95%}
    footer {width: 95%}
    .content {margin-right:5%;
      margin-left:5%}
    h1 {font-size: 48pt;}
    .body {width: 100%}
    .flex {display: block;
	    margin-left: 5%;
	    margin-right: 5%;}
    .center {display: block;
	    margin-left: 5%;
      margin-right: 5%;} 
  }

/******** COMMENT WIDGET ********/
    #c_widget {
      box-sizing: border-box;
      height: 100%;
      padding: 15px;
      overflow: none;
      background-image: url('guestbook_bg.png');
      background-attachment: fixed;
      font-family: 'Trebuchet MS';
      font-size: small;
      color: var(--color-fg);
  }

  #c_widget button, #c_widget input[type=submit] {
      padding: 4px;
      text-decoration: none;
    text-transform: lowercase;
    text-align: center;
      background-color: var(--color-cbg);
      color: var(--color-fg);
      border: var(--border);
      border-radius: 5px;
  }
  #c_widget button:hover, #c_widget input[type=submit]:hover {
      background-color: var(--color-accent);
      color: var(--color-border);
      border: 1px solid var(--color-hover);
  }
  #c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 60%;}
  #c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
      background-color: var(--color-head);
      color: var(--color-border);
      border: 1px solid var(--color-border);
  }

  /* Input section */
  #c_inputDiv {
      padding: 20px;
      text-transform: lowercase;
      background-color: var(--color-cbg);
      border: 1px dashed var(--color-border);
      border-radius: 5px;
  }
  #c_container {margin-top: 10px;}

  #c_widgetTitle {
      margin: 0;
      padding: 5px;
  }

  .c-inputWrapper {
      display: block;
      margin-top: 5px;
      margin-bottom: 5px;
  }
  .c-input {
      padding: 4px;
      color: var(--color-fg);
      border-radius: 4px;
      border: 1px solid var(--color-border);
      outline: none;
  }
  .c-input:focus {border: 1px solid var(--color-hover);}

  .c-textInput {
      width: calc(100% - 10px);
      max-width: 900px;
      resize: none;
  }
  #c_submitButton {display: block;}
  #c_replyingText {color: var(--color-fg);}

  .c-comment {
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 10px;
      background-color: var(--color-cbg);
      border: 1px dashed var(--color-border);
      border-radius: 4px;
  }
  .c-reply {
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 10px;
      background-color: var(--color-cbg);
      border: 1px dashed var(--color-border);
      border-radius: 4px;
  }
  .c-reply:last-child {margin-bottom: 0;}

  .c-name {
      display: inline-block;
      margin: 0;
      margin-right: 10px;
      padding: 0;
      text-decoration: underline;
  }
  .c-site {
      text-transform: lowercase;
      color: var(--color-accent);
  }
  .c-site:hover {color: var(--color-hover);}
  .c-timestamp {
      float: right;
      opacity: 60%;
  }
  .c-text {
      margin: 0;
      margin-top: 10px;
      padding: 0;
      text-align: justify;
      color: var(--color-fg);
  }

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