/*fonts*/
@font-face { font-family: 'CC'; src: url("https://realnightstalkerofficial.neocities.org/fonts/CastleCrashers.ttf") format("truetype"); }
@font-face { font-family: 'baloo2'; src: url("https://realnightstalkerofficial.neocities.org/fonts/Baloo2-Regular.ttf") format("truetype"); }
@font-face { font-family: 'baloo2m'; src: url("https://realnightstalkerofficial.neocities.org/fonts/Baloo2-Medium.ttf") format("truetype"); }
@font-face { font-family: 'baloo2b'; src: url("https://realnightstalkerofficial.neocities.org/fonts/Baloo2-Bold.ttf") format("truetype"); }

/*Main theme*/
:root{
--bg-color:#231916;
--innerbox-color1:#231916;
--innerbox-color2:#4B352E;
--accentbox-color:#4B352E;
-accentbox-border:#BF745D;

--title-color: #1f020b27248F;
--text-color: #D35F3C;
--light-text: #FFFFFF; /* White text on dark backgrounds */
--link-color: #3d1c10;
--link-hover: #FF00FF;
--link-visited: #AF65D3;
--text-shadow: #5040ae; /* Text color with opacity */
--primary-font: 'CC', 'CC';
--secondary-font: 'baloo2', 'CC';


/* Boxes */
--shadow-color1:  #f9b325 ; /* This webbed site can fit so many box shadows*/
--shadow-color2:  #f9b325 ;
--border-color1: #F2710F;
--border-color2: #F2710F;


/* Misc */
--bg-img: url("https://realnightstalkerofficial.neocities.org/puter%20scree.png");
--cursor-main: url(https://ne0nbandit.neocities.org/assets/cursors/HotlineBlack.png), auto;
--cursor-pointer: url(https://orangecoff33.neocities.org/assets/cursors/pointer%202.png), auto;
--selection-bg: #873a35;
--selection-text: #c9765d;
--btn-hover: #372d67; /* Buttons use bg-color */
--box-gradient1: linear-gradient(180deg, #FF00FF26, #00FFFF26); /* 25% Opacity */
--box-gradient2: linear-gradient(#FF00FF40 0%, #00FFFF40 100%); /* 15% Opacity */
--coolbox-gradient: linear-gradient(transparent 50%, #FF00FF40 100%, #00FFFF40 100%);
--h4-gradient: -webkit-linear-gradient(#f9b325 ,  #f9b325 );
--decorhue: hue-rotate(0deg);

}

/*Body and structure*/

body{
background: var(--bg-img) no-repeat fixed;
background-color: var(--bg-color);
background-size: cover;
font-family: var(--primary-font);
color: var(--text-color);
margin: 0px; /* Keeps the navbar and footer sticking on the edges */
line-height: 17px;
cursor: var(--cursor-main);
}

/* === TEXT THINGS === */
p { font-size: 20px; margin: 14px 0px; line-height: 24px}

a {
  text-decoration: underline dotted 1px;
  font-family: var(--secondary-font);
  color: var(--link-color);
  font-weight: 100;
  font-size: 15px;
}

a:visited { color: var(--link-visited) }
a:hover{ cursor: var(--cursor-pointer); color: var(--link-hover); transition: 0.2s; }

b {
  font-family: var(--secondary-font);
  letter-spacing: 0.5px;
  font-weight: 100;
  font-size: 25px;  
}

h1 {
  font-family: var(--secondary-font);
  color: var(--title-color);
  margin: 15px 10px;
  letter-spacing: 0.5px;
  font-weight: 100;
  padding: 5px;  
}

h2 {
  background: -webkit-linear-gradient(var(--border-color1) 20%, var(--border-color2));
  font-family: 'CC', monospace;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  padding-bottom: 4px; /* Don't delete this, this is so letters don't get cropped */
  margin-bottom: 10px;
  letter-spacing: 1px;
  padding-top: 4px;
  margin-top: 6px;
  font-size: 25px;
}
  
h3 {
  text-shadow: 2px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  font-family: var(--primary-font);
  color: var(--title-color);
  line-height: 20px;
  font-weight: 100;
  font-size: 23px;
  margin: 5px;  
}

h4 {
  -webkit-text-fill-color: transparent;
  font-family: var(--secondary-font);
  background: var(--h4-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 100;
  font-size: 17px;
  margin: 8px 0px;
}

/* === Misc Basic tags === */
hr { border-top: 1px dotted var(--border-color2); border-bottom: 1px dotted var(--border-color1); }

button {
  box-shadow: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  text-shadow: 0px 1px var(--border-color1), 0px -1px var(--border-color2);
  font-family: var(--secondary-font);
  border: var(--bg-color) solid 2px;
  cursor: var(--cursor-pointer);
  background: var(--bg-color);
  color: var(--light-text);
  padding: 5px 10px 3px;
  border-radius: 3px;
  font-size: 17px;
  margin: 2px;
}

button:hover {
  border: var(--btn-hover) solid 2px;
  background: var(--btn-hover);
  letter-spacing:0.5px;
  transition: 0.2s;
}

.backbtn {
  text-shadow: 0px 1px var(--border-color1), 0px -1px var(--border-color2);
  box-shadow: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  font-family: var(--secondary-font);
  border: var(--bg-color) solid 2px;
  cursor: var(--cursor-pointer);
  background: var(--bg-color);
  color: white!important; /* Important is to to override the a:visited since I can't be bothered to fix it rn lol*/  
  text-decoration: none;
  padding: 5px 7px 3px;
  border-radius: 10px;
  font-size: 15px; 
}

.backbtn:hover {
  border: var(--btn-hover) solid 2px;
  background: var(--btn-hover);
  transition: 0.2s;
}

/* === TABLES === */
td { vertical-align: top; padding: 3px; }
.fiftywidthtd { width: 50%; }
.eightywidthtd { width: 80%; }


/* ===== CONTENT BAR THINGS ===== */
.sidebar-group { align-items: flex-start; display: flex; margin: auto; width: 100%; }

.sidebar-content {
  box-shadow: 5px 5px var(--border-color1);
  background-color: var(--innerbox-color1);
  border: 4px double var(--border-color1);
  padding: 10px 10px 10px 10px;
  margin: 10px 10px;  
}

.solobar-content /*Use this for fics and other solo content bar thingies so they appear expanded on mobile*/ {
  box-shadow: 5px 5px var(--border-color1);
  background-color: var(--innerbox-color1);
  border: 4px solid var(--border-color1);
  padding: 15px 10px 15px 10px;
  margin: 25px 10px;
}

.innerbox {
  box-shadow: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  background-color: var(--innerbox-color2);
  border: 2px var(--border-color1);
  text-align: center;
  margin: 10px 0px;
  overflow: auto;
  padding: 20px;
  height: 100%; /* For WebGarden */
}

.soloinnerbox /*USE TOGETHER WITH SOLOBAR-CONTENT*/ {
  box-shadow: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  background-color: var(--innerbox-color2);
  border: 2px var(--border-color1);
  border-radius: 1.3rem;
  text-align: center;
  margin: 10px 0px;
  overflow: auto;
  padding: 20px;  
}

.solo-sidebar { margin: 25px auto; width: 50%; min-width: 900px;}
#center-sidebar{ width: 50%; }
#left-sidebar{ width: 25%; margin-left: 50px; }
#right-sidebar{ width: 25%; margin-right: 60px; }

/* ===== CONTENT BAR CONTENT ===== */
  /* Images */
.zoom { transition: transform .5s; }
.zoom:hover { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.imgcontainer { display: flex; align-items: center; flex-direction: column; }
.imgcontainer img { max-width: 100%; object-fit: contain; }
.imgdecor { position: relative; }
.hueshift { filter: var(--decorhue); } /* For pink and blue gifs to change colours during Christmas and Halloween themes. Disabled by default. */
.imgframe { border-radius: 5px; box-shadow: 1px 1px var(--shadow-color1), -1px -1px var(--shadow-color2); }

.dividergif {
  box-shadow: 1px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  filter: var(--decorhue);
  border-radius: 5px;
  height: 50px;
  width: 100%;
}

.cardecor {
  box-shadow: 1px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  filter: var(--decorhue) contrast(1.5);
  border-radius: 1.3rem;
  height: 150px;  
}
/* LAYOUT JUNK */ 
#center-sidebar { width: 75%; }
#left-sidebar { margin:2%; margin-left: auto; width: 25%; }
#right-sidebar { margin:2%; margin-right: auto; width: 25%; }
.solo-sidebar { width: 80%; min-width: 665px; }
.solobar-content { width: 100%; padding: 0px; margin: 0px; }
.soloinnerbox { padding: 20px 15px; }
.ScrollBoxGroup { width: 100% }
.storypreview tr { width: 100%; height: auto; margin: 2px auto;}
.storypreview td { width: auto; }
.sidebar-group { gap: 10px; }