*{
--black:#222;
--white:#ddd;
}

* {font-size:13pt;color:var(--white);font-family: "Verdana", sans;line-height:1.4em}
body {margin:0}
div.r b, div.rd b {color:#acf}
div.w b, div.wd b {color:#bca}
body {background:linear-gradient(90deg,#505050 0%, #404040 50%, #505050 100%);margin-top:0}
a {color:#bce}
a.r:hover {color:#9cf} a.r, a.rd:hover {color:#79e} a.rd {color:#67c}
a.w:hover {color:#cec} a.w, a.wd:hover {color:#aba} a.wd {color:#898}
a.rd, a.wd {text-decoration:line-through}
.button-row a, .buttons a {color:var(--white);text-decoration:none;margin:5px}
b:not(li b) {font-size:1.333em}
li b {font-size:1.167em}

.b {display:none} /*collapsibles*/

.table {display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
.table.three div {max-width:calc(33.3333% - 10px)}
.table.two div {max-width:calc(50% - 10px)}
.expandable,.shrink {display:none}
input, .button-row a, .buttons a {border-radius:10px;padding:5px}
	/*if you want inline buttons, set their line-height to calc(1em + 30px)*/
.button-row {padding-top:15px;padding-bottom:32px;margin-top:0;}
.button-row:not(.lite) {background:linear-gradient(180deg, #606060 0, #505050 54.2667px, var(--black) 54.2667px, var(--black) 56.2667px, #333 56.2667px, transparent 100%)}
.button-row.lite {float:right}

.profiles div:not(div.rels) {width:1000px;display:inline-block; /*so it stretches for the float*/
border-radius:20px;padding:10px;}
.profiles div:not(div.rels), input, .button-row a, .buttons a, .home {border:4px solid #191919;margin-bottom:20px;
background:radial-gradient(circle,transparent 0, var(--black) 100%),linear-gradient(90deg, var(--black) 0, #2a2a2a 12.5%, #333 50%, #2a2a2a 87.5%, var(--black) 100%)}
	.profiles div.w, .profiles div.wd {background:linear-gradient(180deg, #454 0, #4544 60px, transparent 100px, transparent 50%),radial-gradient(circle,transparent 0, var(--black) 100%),linear-gradient(90deg, var(--black) 0, #2a2a2a 12.5%, #333 50%, #2a2a2a 87.5%, var(--black) 100%)!important} /*cats of wind*/
	.profiles div.r, .profiles div.rd {background:linear-gradient(180deg, #235 0, #2354 60px, transparent 100px, transparent 50%),radial-gradient(circle,transparent 0, var(--black) 100%),linear-gradient(90deg, var(--black) 0, #2a2a2a 12.5%, #333 50%, #2a2a2a 87.5%, var(--black) 100%)!important} /*cats of river*/
input, .buttons a {margin-bottom:5px}


.profiles img:not(img[id]) {float:right}
	.profiles img.one-t {max-width:250px;height:auto}
	.profiles img.one-s {max-width:300px;height:auto}
	.profiles img.one {max-width:350px;height:auto}
	.profiles img.two-s {max-height:220px} .profiles img.two {max-height:230px}
	.profiles img.two-s, .profiles img.two {width:auto;margin-top:-8px;margin-bottom:-8px}
	.profiles img.four-s {max-width:450px;height:auto}
	.profiles img.four {max-width:500px;height:auto}
	.profiles img:not(img[class]):not(img[id]) {max-width:400px;height:auto}

div.top {width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:50px solid var(--white);border-top:10px solid transparent;position:fixed;bottom:10px;right:10px}
div.top a {position:fixed;bottom:16px;right:25px;color:var(--black);text-decoration:none}
div.top a:hover {color:#444} div.top:hover {border-bottom: 50px solid #aaa}
ul{padding-left:13pt}

.home {display:block;position:absolute;left:50%;
width:30px;height:20px;margin-top:10px;
clip-path:polygon(50% 0%, 100% 60%, 80% 60%, 80% 100%, 20% 100%, 20% 60%, 0% 60%)}

/*.home div:nth-of-type(1) {width:30px;height:10px;border-radius:70% 70% 5px 5px;margin-top:10px;margin-bottom:-4px;margin-left:-7.5px}
.home div:nth-of-type(2) {width:15px;height:10px;}*/


ul li{margin:0;list-style-type:"- "}
ul li, ul li br {margin-bottom:7.5px}
/*also div.rels exists so .a is in the same container as .b and the collapse code works!*/

/* small stickout idea b4 i decided to make relationship lists collapsible=
div.rels {width:calc(vw100 - 30px)}
div.rels p {font-size:0.8em; margin:0}
div.rels p b {font-size:1em} /so it inherits the above/
div.rels br {margin-bottom:7.5px}
*/

div.jumpto {float:right;width:calc(100% - 1030px)}

@media (max-width:1240px) {
.home {left:620px}
}
/*due to pixel-based image cropping making responsive design next to impossible, medias below 1200px will not be made*/