/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #616161 #000000;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #000000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #616161;
    border-radius: 10px;
    border: 3px dotted #ffffff;
  }



/* ========= STATUSCAFE ======= */
.statuscafe-post:first-of-type {
  margin-top: 0;
}

.statuscafe-post:last-of-type {
  margin-bottom: 0;
}

.statuscafe-post {
  padding: 10px;
  border: 1px solid var(--foreground);
  margin: 10px 0;
  background:#ffffff20;
  box-shadow: 0 0 3px;
}


/* ===== TEXT ====== */

/* SPARKLEHORSE by GOODMODE */
/* http://goodmode.neocities.org/ */


/* NAVIGATION MENU */
/* This is the menu box with the pagetitle and links in it,
	as well as a picture of Princess Celestia from MLP:FiM.
	You can remove/replace her in the HTML file! */
	
	body {
	background-color: #000000;
	font-family: Georgia;
}

div.nav {
	float: right;
	width: 300px;
	margin: 10px 20px 10px 10px;
	background-color: #077e27;
	border-radius: 50px;
	border: 5px solid #000000;
	text-align: center;
}
/* MAIN CONTENT */
/* This is where all your site text and content goes.
	This is a very simple layout intended for small sites,
	so there's not much flashy about this - just a styled
	paragraph, header, and links. */

div.content {
	padding: 5px 10px 10px 10px;
	background-color: #000000;
	margin: 10px 10px 10px 10px;
}

h1 {
	font-family: Bookman Old Style;
	color: #ffffff;
	font-size: 25px;
	letter-spacing: 3px;
	-webkit-margin-after: 0px;
	-webkit-margin-end: 0px;
	background: -webkit-linear-gradient(#faff00, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

div.content p {
	text-indent: 1em;
	color: #318150;
}

/* GENERAL LINKS */
/* This bit styles the links on your site so that they show up nicely in a body of text. */

a:link, a:active, a:visited {
	color: #ffffff;
	text-decoration: none;
}

a:hover {
	color: #ddff00;
	background-image: url('sparkle.gif')
}

/* NAVIGATION MENU LINKS */
/* This bit styles the links on your menu so they look different to regular text links. */

div.nav ul {
	list-style-type: none;
	text-shadow:
		1px 1px 0 #c7a03a,
		1px 1px 0 #c7a03a,
		1px 1px 0 #c7a03a,
		1px 1px 0 #c7a03a;
	width: auto;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

div.nav li {
	height: 20px;
	background-color: rgba(25, 47, 0, 0.65);
	border-radius: 10px;
	text-align: center;
}


/* FOOTER */
/* This is a bar that shows up at the bottom. I use mine for credits and contact info, but
	you could probably use it for affiliates or something else.
	Feel free to move the linkback to GOODMODE, but please do link back
	SOMEWHERE that people can find... I learned to code from freebies like this,
	and I want to pay it forward! */
	
div.footer {
    background-color: rgba(255,	255,	255, 0.6);
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
	font-size: 0.8em;
	text-align: center;
}

/* some colour codes in case you want to continue the princess horse theme */
/* crown: #e5c87b   gems: #9f58b3     hairgreen: #69c7a2   hairblue: #4ab3ce   hairpurple: #6295e2   hairpink: #d4a2e3  */
/* sunorange: #d4a2e3    sunyellow: #e1d38b */

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url("hand.cur"), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url("cursor_1.png") 4 12,
  auto;
cursor:
  url("cursor_2.png") 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url("cursor_1.svg") 4 5,
  url("cursor_2.svg"),
  /* …, */ url("cursor_n.cur") 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;
 /* ==== image corner === */
div.fixed {
  position: fixed;
  bottom: 10;
  right: 10;
  width: 300px;
  border: 3px solid #73AD21;
}