/* 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." */


table, .sf {
	display: none;
}
body {
	margin: 0;
	padding: 0;
	font-size: 9pt;
	font-family: Comic Sans MS;
	font-weight: normal;
	line-height: 180%;
	text-transform: lowercase;
	letter-spacing: 1px;
	color: #fff;
	background: url("https://i.imgur.com/uOtQn20.jpg") top fixed #f4f4f4;
}
h1 {
	font-size: 50pt;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px 2px 2px black;
}
h2, h4 {
	text-transform: uppercase;
	letter-spacing: 1px;
}
h2 {
	font-size: 22pt;
	font-family: impact;
	color: #f7b3e5;
	margin: 20px 0 0;
	font-weight: 300;
}
h2 img {
	width: 40px;
	top: 8px;
}
h3 {
	display: inline-block;
	top: -3em;
	margin: 0 0 -3em;
	padding: 5px 8px;
	text-transform: uppercase;
	font-size: 12pt;
	background: #ec3686;
	color: #fff;
	line-height: 1.25;
	clear: both;
}
h4 {
	font-size: 7pt;
	font-family: tahoma;
	background: #bff0eb;
	color: #fff;
	padding: 3px 5px;
	display: inline-block;
	margin: 10px auto;
	line-height: 1.25;
}
h5 {
	font-size: 7pt;
	font-family: verdana;
	background: #d7c9f6;
	color: #fff;
	padding: 3px 5px;
	display: inline-block;
	margin: 10px auto;
	line-height: 1.25;
	text-transform: uppercase;
}
h6 {
	display: inline-block;
	top: -3em;
	margin: 0 0 -3em;
	padding: 5px 8px;
	text-transform: uppercase;
	font-size: 12pt;
	background: #13b0c9;
	color: #fff;
	line-height: 1.25;
	clear: both;
}
h7 {
	display: inline-block;
	top: -3em;
	margin: 0 0 -3em;
	padding: 5px 8px;
	text-transform: uppercase;
	font-size: 12pt;
	background: #f5801e;
	color: #fff;
	line-height: 1.25;
	clear: both;
}
h8 {
	display: inline-block;
	top: -3em;
	margin: 0 0 -3em;
	padding: 5px 8px;
	text-transform: uppercase;
	font-size: 12pt;
	background: #b6d209;
	color: #fff;
	line-height: 1.25;
	clear: both;
}
h9 {
	display: inline-block;
	top: -3em;
	margin: 0 0 -3em;
	padding: 5px 8px;
	text-transform: uppercase;
	font-size: 12pt;
	background: #26d280;
	color: #fff;
	line-height: 1.25;
	clear: both;
}
p {
	text-align: justify;
}
a {
	text-decoration: none;
	color: #ffeb1b;
	font-size: 8pt;
	text-transform: lowercase;
	letter-spacing: 1px
	font-family: arial;
}
a:hover {
	color: #222;
}
b {
	color: #f7b3e5;
}
.nav a {
	color: #fff;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px black;
	font-size: 12pt;
	margin: 0 1em;
	font-weight: bold;
}
.nav a:hover {
	color: #f8b4e8;
}
.container {
	width: 1280px;
	margin: 0 auto;
}
.title, .footer {
	clear: both;
	width: 100%;
	text-align: center;
	margin: 4em 0 2em;
}
.footer {
	color: #222;
}
.box, .card, .cardfour {
	background: #7537a0;
	margin: 2%;
	padding: 3%;
	float: left;
	box-shadow: 10px 10px rgba(0,0,0,0.8);
}
.box {
	width: 90%;
}
.card {
	width: 23.33%;
}
.cardfour {
	width: 15%;
}
.overflow {
	display: block;
	width: 100%;
	height: 200px;
	overflow: hidden;
	border: 1px solid #ddd;
}
.overflow .pet {
	height: 350px;
	margin: -50px 0 0 -20px;
}
.overflow:hover {
	border-color: #222;
}
.clr {
	clear: both;
}
.item img, #closet img, .pp img {
	width: 50px;
	height: 50px;
	border: 1px solid #eee;
	padding: 5px;
	margin: 5px;
}
.item span {
	display: none;
	float: left;
	margin: 0;
	padding: 1em;
	background: #b185ff;
	color: #fff;
	font-weight: bold;
	width: 270px;
}
.item:hover img, #closet img:hover {
	border-color: #222;
}
.item:hover span {
	display: block;
}
.bookmarks {
	text-align: center;
}
.bookmarks a {
	display: inline-block;
	margin: 12px;
	border: 1px solid transparent;
}
.bookmarks a:hover {
	border: 1px solid #222;
}
.pp {
	line-height: 1.25;
}
.pp img {
	float: left;
	margin-left: 0;
	margin-right: 1em;
}
.pp b {
	display: block;
	padding-top: 20px;
}
.image {
	float: left;
}
#trio { height: 150px; } #pet { height: 480px; }
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 5px;
  background: #d5cff8;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #f7b3e5; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #bff0eb; 
}