@font-face {
	font-family: "Segoe UI";
/* 	font-display: swap; */
	src: url("../fonts/segoe.ttf");
}

body {
 	background: url("../images/SnowLeoServerDarkerBlur.jpg") no-repeat center fixed;
	background-size: cover;
/*  	background-color: #003333; */


	font-family: "Segoe UI", 'Lucida Grande', 'Roboto', 'Noto Sans', arial, sans-serif;
	text-align: center;
	color: #FFFFFF;
}

.cat {
	background: url("../images/kuro.png") no-repeat;
	transform: scale(2);
	width: 205px;
	height: 128px;
    margin-top: 125px;
	padding-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	filter: drop-shadow(3px 10px 4px #00000077);
}

.rainbow {
/* 	background: url("../images/rainbow.gif"); */
/* background: linear-gradient(to bottom, #555, #000); */
	background: #333;
	width: 25%;
	height: 2px;
	margin: auto;
	border-radius: 20px;
}

a {
	color: #00FFFF;
}

.selected {
	color: #008888;
}


p {
	width: 85%;
	margin: auto;
}

.container {
    width: 1000px;
    height: 100%;
    border: 2px solid black;
    box-sizing: border-box;
}

img {
	width: 600px;
}

li, ul {
	list-style: none;
	padding: 0;
}

.webring img {
	width: 88px;
	box-shadow: 2px 5px 3px #00000077;

	position: relative;
	top: 0;
	left: 0;
	transition: all ease 0.5s;
}

.webring img:hover {
	top: -5px;
	left: -5px;
	box-shadow: 7px 10px 3px #00000077; /* Make shadow stay in place */
	transform: scale(1.05);
}

span.line {
  color: red;
}

#content-box {
	background-color: #000;
	background: linear-gradient(to bottom, #333 0, #000 3%, #000 97%, #222);
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 768px;
	border-radius: 25px;
	box-shadow: 5px 15px 5px #00000077;
	border: 1px solid #222;
}

#title {
 	background: linear-gradient(to bottom, #444 0, #444 3%, #222);
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	padding-bottom: 10px;
	display: grid;
	margin-bottom: -15px;
}

#nav {
	/* background: linear-gradient(to bottom, #222, #111); */
	background: linear-gradient(to bottom, #888 0, #333 50%, #222 50%, #111);
 	padding-top: 10px;
	padding-bottom: 10px;
}

#nav a {
	text-decoration-line: none;
	padding: 0px 15px;
	height: 100%;
/* 	border-left: 1px solid #555; */
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFFFFF;
	transition: color ease 0.25s;
}

#nav a:hover {
	color: #8888CC;
}

#nav a.selected {
	color: #7777BB;
}

#nav a.last {
/* 	border-right: 1px solid #000; */
}

#footer {
	background: linear-gradient(to bottom, #222, #111);
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}


.minibox {
	background: linear-gradient(to bottom, #111 0, #111 3%, #222);
	width: 500px;
	margin: auto;
	border-radius: 10px;
	padding-bottom: 15px;
}

.minibox-head {
	background: linear-gradient(to bottom, #444 0, #444 3%, #222);
	padding: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
 	margin-bottom: -10px;
}

.small {
	font-size: 0.7em;
}

.left {
	float: left;
	padding: 10px;
}