body {
	background: url('../img/bg-checkers.png');
	background-size: 68px;
}

/* DECOR */
body>img {
	position: absolute;
	z-index: -5;
}


.middle {
	overflow: auto;
}


summary.sub:hover {
	color: red;
	text-shadow: 0 0 10px red;
}

section.interest {
	display: grid;
	grid-template-columns: 35% 65%;
	grid-template-rows: 310px;
	text-align: right;
}

#frame {
	width: 100%;height: 230px;
	background: url('../img/other/icon_cecilion.jpg');
	background-size: 100% 100%;
}
#frame>div {
	width: 100%; height: 100%;
	position: relative;
	background: url('../img/decor/floating-hearts.gif');
	background-size: 50%;
}
#frame>div::before {
	content: '';
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;left: 0;
	width: 100%;height: 100%;

	opacity: 0;
	transition: opacity 1s ease-in-out;
}
#frame>div::after {
	content: 'get CUCKED lover boy';
	position: absolute;
	position: absotlute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	text-align: center;
	border: 2px dotted white;
	padding: 2px 3px;

	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
#frame>div:hover::before,
#frame>div:hover::after {
	opacity: 1;
}


#home-misc-1-a {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 15px;
	margin-top: 1rem;
}
#home-misc-1 p{
	margin: 0;
	margin-top: 1rem;
}
#home-misc-1 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1.8em 300px;
	grid-gap: 15px;
	margin: 1rem auto;
	margin-top: 0;
}
#home-misc-1>div { 
	margin: 0 auto;
	width: 100%;
	border: 2px #0d0d0d solid;
}
#webrings-home {
	overflow: auto;

	grid-column: 1/2;
	grid-row: 2/3;
}

#title-gifts {
	grid-column: 2/3;
	grid-row: 1/2;
}
#gifts {
	text-align: center;
	overflow: auto;
}


/*
	SIDEBAR
*/

#log>div{
	height: 450px;
}
#stats {
	height: 130px;
}
#stats>div{
	height: 100%;
	overflow: auto;
}

.chromebar {
	scrollbar-width: thin;
  scrollbar-color: #9e0000 #000;
}

.chromebar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.chromebar::-webkit-scrollbar-track {
  background: black;
}
 
.chromebar::-webkit-scrollbar-thumb {
  background: #9e0000; 
}



#stats table {
	text-align: center;
	border-collapse: collapse;
	height: 100%;
	width: 100%;
	font-size: 14px;
}
#stats tr th:nth-child(even), 
#stats tr td:nth-child(even),
#stats tr td:last-child {
	border-right-width: 0 !important;
}
#stats th {
	/*width: 77px;*/
	border: var(--border-gray) solid;
	border-width: 0 2px 2px 0;
}
#stats td {
	/*width: 143px;*/
	border: var(--border-gray) solid;
	border-width: 0 2px 2px 0;
}
#stats tr:last-of-type td,
#stats tr:last-of-type th {
	border: var(--border-gray) solid;
	border-width: 0 2px 0 0;
}



#about {
	font-size: 12px;
}
#about img {
	max-width: 100%;
	/*float: left;*/
}
#about>div {
	/*display: flex;
	align-items: center;*/
	display: grid;
	grid-template-columns: 55% 45%;
}
#about ul {
	margin: 0;padding: 0;
	list-style-type: none;
	word-wrap: break-word;
	word-break: break-all;
}
#about li {
	text-decoration: underline;
}
#about li:nth-child(even) {
	font-size: 1.17em;
	text-decoration: none;
	margin-bottom: 2px;
}


#pages {
	text-align: left;
	flex-grow: 100;

	display: flex;
	flex-direction: column;
}
#pages ul {
	margin: 0;padding: 0;
	list-style-type: none;
	line-height: 1.5;
}
#pages>div {
	padding: 5px;
}

#jumpy {
	flex-grow: 10;
	max-height: 100%;
	overflow: auto;
	text-align-last: center !important;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
}
#jumpy a {
	max-width: 85%;
	text-align: center;
	padding: 3px;
}
#jumpy a:hover {
	background: none;
	color: yellow;
	font-weight: bold;
	border: 2px white dotted;
}

#sitemap-list {
	list-style-type: '×' !important;
	padding-left: 10px !important;
}
#sitemap-list li {
	padding-left: 5px;
}

#gb a {
	color: #fff;
	font-family: 'oe5', var(--gen-serif);
	text-decoration: none;
	font-weight: normal;
}
#gb a:hover {
	background: none;
	text-decoration: underline;
	text-shadow: 0 0 10px #fff;
}

#cb {
	/*height: 402px;*/
	/*height: 100%;*/
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
#cb>div {
	flex-grow: 1;
}

#butt {
	text-align: center;
}
#butt div {
	padding: 5px;
}
#butt a { text-decoration: none; }
#butt a:hover { background: none; }


#linkme div {
	height: 135px;
	overflow: auto;
	scrollbar-width: thin;
  scrollbar-color: #9e0000 #000;
  text-align: center;
  border-bottom-width: 0;
} 
#linkme p {
	margin: 5px 0;
	font-size: 14px;
}
#linkme textarea {
	height: 30px; width: 50px;
}



/*
=================
	MEDIA QUERIES
=================
*/