:root {
    /* Background and text color */
    --background:#e8e3d6;
    --color:#212c2c;
    
    /* "Table" borders */
   /* --borderstyle: 2px solid var(--bordercolor);
    --bordercolor:#FFF;  /*
    
    /* Container */
    --container:#e8e3d6;
    
    /* Header */
    /* --header:#dac4ff; */
    --headercolor:#212c2c;
    --headerhover:#3c6d70;
    
    /* Sidebar */
    /*--sidebar:#ffceea;*/
    --sidebarlink:#804E00;
    --sidebarlinkhover:#3c6d70;
    
    /* Main content */
    /*--main:#defadf;*/
    --link:#804E00;
    --linkhover:#3c6d70;
   /* --linkvisited:#804E00;*/
    
    /* Footer */
   /* --footer:#dac4ff;*/
    --footercolor:#212c2c;
    --footerlink:#804E00;
    --footerlinkhover:#3c6d70;

        /* Extra */

    --formbg:#f4f1e9;
	--formcolor:#212c2c;
	
	--accentbg:#e0d9c6;
	--hr: #bb9860;

}


@media (prefers-color-scheme: dark) {
	:root {
		--color:#DCD7C9;
		--background:#2C3639;

		--headercolor:#DCD7C9;
        --headerhover:#3c6d70;

        --sidebarlink:#9bc4c7;
        --sidebarlinkhover:#cca376;
        
		--link:#9bc4c7;
		--linkhover:#cca376;
		
		--formbg:#232c2f;
		--formcolor:#DCD7C9;
		
		--accentbg:#232c2f;
		--hr: #5b7e81;
	}

}



@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');


* { margin:0; padding:0; }

img {
    max-width:95%;
}

figure {
  display: flex;
  align-items: center;
  flex-flow: column;
  padding: 5px;
  max-width:80%;
  margin: auto;
}

figure img {
  max-width:95%;
  border-style: double;
}



figcaption {
  font: italic smaller monospace;
  color: var(--color);
  padding: 3px;
  text-align: center;
}

body { 
	color:var(--color);
	background:var(--background);
	font-weight: 400;
    font:1.10rem "Inconsolata", monospace;
    line-height:1.4;
}

/* Skip to content link - do not remove */

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--main);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}


/* Dark Mode Toggle */
#toggle {
    position:absolute;
    display: block;
    right:0px;
    top:0px;
    overflow:hidden;
     z-index:1000;
    padding:5px;
     float: left;
}
 

/* Styling */

img { margin:5px; max-width:100%; }

main {
	padding:20px;
	width:90%;
	max-width:800px;
	margin:auto;
}

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

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

li a {
	text-decoration:none;
}

p {
	margin:10px 0px 10px 0px;
	line-height:1.5;
}

main h1 {
	margin:5px 0 5px 0;
}

main h2 {
	margin:10px 0 10px 0;
}

main h3 {
	margin:5px 0 5px 0;
}

main h4 {
	font-style:italic;
	margin:5px 0 5px 0;
}

main input, textarea, select, button { 
	background: var(--formbg);  
	color: var(--formcolor);
	font: 12pt sans-serif; 
	border: 1px solid var(--hr); 
	padding: 5px; 
	margin: 5px;
	border-radius:5px;
}

main textarea {
	width:90%;
}

input[type="submit"], input[type="reset"] {
	font-size:13pt;
	background:var(--accentbg);
}

input[type="submit"]:hover, input[type="reset"]:hover {
	background:var(--hr);
	cursor:pointer;
}

/* EXTERNAL LINK STYLING */

main a[href^="http"]:not(:has(img))::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  content: "↗";
 /* background-size: 75%;
 background-repeat: no-repeat;
  background-color:var(--main);
  background-position: center;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M354.4 83.8C359.4 71.8 371.1 64 384 64L544 64C561.7 64 576 78.3 576 96L576 256C576 268.9 568.2 280.6 556.2 285.6C544.2 290.6 530.5 287.8 521.3 278.7L464 221.3L310.6 374.6C298.1 387.1 277.8 387.1 265.3 374.6C252.8 362.1 252.8 341.8 265.3 329.3L418.7 176L361.4 118.6C352.2 109.4 349.5 95.7 354.5 83.7zM64 240C64 195.8 99.8 160 144 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L144 224C135.2 224 128 231.2 128 240L128 496C128 504.8 135.2 512 144 512L400 512C408.8 512 416 504.8 416 496L416 416C416 398.3 430.3 384 448 384C465.7 384 480 398.3 480 416L480 496C480 540.2 444.2 576 400 576L144 576C99.8 576 64 540.2 64 496L64 240z"/></svg>');
*/
}

main table {
	margin:10px auto 10px auto;
	padding:5px;
	width:100%;
	border-collapse:collapse;
}

main th {
	border-bottom:1px solid var(--hr);
	padding:5px;
	text-align:left;
}

main td {
	padding:3px;
}

main tr:nth-child(2n) {
	background:var(--accentbg);
}

main ul, ol { 
	list-style-position: outside;
	margin: 8px 0 8px 20px;
}

main li {
	margin:5px 0 5px 0;
	line-height:1.5;
}

main ul li ul, main ol li ol {
	margin-left:15px;
}

main blockquote {
	padding:10px;
	border-left:10px solid var(--hr);
	background:var(--accentbg);
}

main blockquote cite {
	font-size:11pt;
	position:relative;
	right:0;
}

main summary {
	cursor:pointer;
	margin: 5px 0px 5px 0px;
}

main details {
	padding:10px;
	background:var(--accentbg);
	margin:5px 0 5px 0;
    border-radius:5px;
}

main hr {
	border:0.5px solid var(--hr);
    margin:20px auto 20px auto;
}

main pre {
	padding:10px;
	background:var(--accentbg);
	margin:10px auto 10px auto;
	border-radius:5px;
	overflow:auto;
}

main footer {
	text-align:center;
	border-top: 0.5px solid var(--hr);
	margin-top:10px;
	padding:10px;
}


/* Container */

#container {
	max-width:1000px;
    width: 90%;
	background:var(--background);
	border:var(--borderstyle);
	margin:20px auto;
    display:flex;
    flex-wrap:wrap;
}

/* Header */

header {
    flex: 1 1 calc(100% - 6px);
    border: var(--borderstyle);
    text-align:center;
    margin:3px;
    background:var(--header);
    font-size:1.8em;
}


header a, header a:visited {
    color:var(--headercolor);
}

header a:hover, header a:focus {
    color:var(--headerhover);
}

/* Footer */


    /* Statuscafe */

  #statuscafe {
    max-height: 100px;
    overflow-y: visible;
    font-size: smaller;
    opacity: 0.7;
    background: var(--accentbg);
    text-align: center;
    padding: 0.5em;
}

#statuscafe-username, #statuscafe-time, #statuscafe-content {
    display:inline-block;
}


#statuscafe-username {
  font-style: normal;
  font-weight: bold;
  color: var(--hr);
  
}

#statuscafe-username a{
background: transparent;
color: var(--link);
}


#statuscafe-content {
  margin-left: 0.2em;
  font-style:italic;
  padding:0.2em;
}


footer {
    flex: 1 1 calc(100% - 26px);
    border: var(--borderstyle);
    padding:5px;
    margin:3px;
    text-align:center;
    color:var(--color);
    /*background:var(--footer);*/
}

footer a, footer a:visited {
    color:var(--link);
}

footer a:hover, footer a:focus {
    color:var(--linkhover);
}

/* Sidebar/menu */

 
#menu {
	padding:10px;
    border: var(--borderstyle);
    flex: 1 1 calc(20% - 23px);
    background:var(--sidebar);
    margin:0 0 0 3px;

}

#menu ul {
    list-style:none;
    font-size:1.2em;
    line-height:1.2;
}

#menu li {
    display:block;
    margin:.2em;
}

#menu li a, #menu li a:visited {
    color:var(--sidebarlink);
}

#menu li a:hover, #menu li a:focus {
    color:var(--sidebarlinkhover);
}

/* Content */

main {
	padding:2px;
    flex: 1 1 calc(80% - 40px);
    border: var(--borderstyle);
    margin: 0 3px;
    background: var(--main);
}

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

/*main a:visited {
    color:var(--linkvisited);
}*/

main a:hover, main a:focus {
    color:var(--linkhover);
}

main h1 {
    font-size:2em;
}

main h2 {
    font-size:1.7em;
}

main h3 {
    font-size:1.4em;
}

main h4 {
    font-size:1.1em;
}

main ul {
    margin-left:30px;
}

main ul li {
    margin: 0;
    padding-left: 1.5em;
    position: relative;
    list-style: none;
    
    &:after {
      content: '';
      height: .4em;
      width: .4em;
      background: var(--linkhover);
      display: block;
      position: absolute;
      transform: rotate(45deg);
      top: .6em;
      left: 0;
    }
}


p {
	margin:0.5em 0px 0.5em 0px;
}

main input, textarea, select, button {
    background: var(--main);
    color: var(--color);
    border:1px solid;
    font:1em monospace;
    padding:5px;
}

main input[type="submit"]:hover, main input[type="submit"]:focus, main button:hover, main button:focus {
    color: var(--linkhover);
}



/* Mobile styling */

@media screen and (max-width:768px) {
    #menu {
        flex: 1 1 calc(100% - 20px);
        text-align:center;
        margin: 0 3px 3px 3px;
    }
    
      
    #menu ul {
    list-style:none;
    font-size:1em;
    line-height:1.2;
}


    #menu li {
        display:inline-block;
    }

    body { 
    font:1rem "Inconsolata", monospace;
    line-height:1;
}
    
    #content {
        flex: 1 1 calc(100% - 20px);
    }
}


/* COMMENT BOX */
/*
    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: hidden;
    padding: 5px;
    /* background-image: url('sparkle-bg.gif'); F2U background provided by https://sadgrl.online/webmastery/downloads/tiledbgs */
    /* background-attachment: fixed; */
    color: var(--color);
}

#c_widget button, #c_widget input[type=submit] {
    padding: 4px;
    font-family: 'Inconsolata', monospace;
    text-decoration: none;
	text-align: center;
    text-transform: uppercase;
    background-color: var(--hr);
    color: var(--accentbg);
    border: 1px solid var(--hr);
}
#c_widget button:hover, #c_widget input[type=submit]:hover {
    color: var(--color);
    border: 1px solid var(--hr);
}
#c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 60%;}
#c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
    color: var(--accentbg);
    border: 1px solid var(--hr);
}

/* Input section */
#c_inputDiv {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px dotted var(--hr);
    margin-right:10px;
}

#c_widgetTitle {
    margin: -10px;
    margin-bottom: 10px;
    padding: 5px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
    text-align: right;
    background-color: var(--hr);
}

.c-inputWrapper {
    display: block;
    text-align: left;
    margin-top: 5px;
}
.c-input {
    padding: 4px;
    color: var(--color);
    border: 1px solid var(--hr);
	outline: none;
    background-color: var(--formbg);
    font-family: 'Inconsolata', monospace;
}
.c-input:focus {border: 1px solid var(--link);}


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

/* Comment section */
.c-comment {
    margin-bottom: 15px;
    padding: 10px;

}
.c-reply {
    display: block;
    width: 90%;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: 0;
    padding: 10px;
    background-color: var(--accentbg); 
        border-bottom: 1px solid var(--hr);
}
.c-reply:last-child {margin-bottom: 0;}
.c-replyContainer {
    margin: -10px;
    margin-top: 10px;
    padding: 10px;
    /* background-color: var(--hr); */
}

.c-name {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
        border-bottom: 1px solid var(--hr);
}
.c-site {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--link);
}

.c-timestamp {
    float: right;
    opacity: 75%;
}
.c-text {
    margin: 0;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    font-size: 14px;
    text-align: justify;
}

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

/* Flexbox */

.button {
  width: 95%;
  display: flex;
  justify-content: center;
  flex: 2 500%;
}