body {
background:url("https://files.catbox.moe/c0n80x.png"); 
background-repeat: repeat; 
background-size: 800px;
background-color: #EDD0EE;
font-family: 'pixelmplus10';
color: #4932C9;
font-size:18px;
cursor: url(https://files.catbox.moe/feido7.png), progress;}
a:hover { cursor: url(https://files.catbox.moe/feido7.png), progress;
}
@font-face {
font-family: 'pixelmplus10';
src: url('https://files.catbox.moe/mm0m5f.ttf') format('TrueType');
font-weight: normal;
font-style: normal;
} 
::selection {
color: white;
background: #ea9fe7;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: white; 
}
::-webkit-scrollbar-thumb {
background: #ea9fe7; 
border: 1px solid white;
}
b {
font-weight: 1;
text-shadow: 2px 2px rgba(80, 20, 255, 0.2);
}
h1 {
font-size: 24px;
color: #ea9fe7;
font-weight: bold;
text-shadow: 0 0px 1px;
}
h2 {
font-size: 22px;
color: #94F1E1;
font-weight: bold;
text-shadow: 0 0px 1px;
}
h3 {
font-size: 20px;
color: #EDD0EE;
font-weight: bold;
text-shadow: 0 0px 1px;
}
a {
color:#4932C9; text-decoration:underline 1px dashed #4932C9;
}
a:hover{ 
text-decoration:underline 1px #4932C9;
}
li {
list-style: none;
}
li::before {
content: '';
display: inline-block;
margin-right: 6px;
height: 10px;
width: 10px;
background-image: url(
"heart.png");
background-size: 10px 10px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #EDD0EE;
}
table td, table th {
border:2px dashed #4932C9;
padding: 5px;
}
table th {
text-align: left;
background-color: #94F1E1;
font-weight: 1;
}
.textbox {
display:inline-block;
resize: none;
height:31px;
width:88px;
border:2px solid #4932C9;
outline:none;
padding:2px; 
background-color: #EDD0EE;
cursor: url(https://files.catbox.moe/feido7.png), progress; 
font-family:pixelmplus10; 
color: #4932C9;
}
#everything {
display: flex;
}
.window {
position: absolute;
border: 2px solid #4932C9;
background: #94F1E1;
z-index: 1000;
padding: 2px;
box-shadow: 4px 4px rgba(80, 20, 255, 0.1);
max-width: 890px;
height: 533px;
}
.windowHeader {
text-align: right;
padding: 2px;
height: 28px;
margin: 2px;
margin-bottom: 5px;
background-color: #EDD0EE;
border: 2px solid #4932C9;
}
.wincontent {
height: 462px;
background-color: white;
padding: 10px;
border: 2px solid #4932C9;
margin: 2px;
overflow-y: scroll;
}
.windowHeader > img {
padding: 2px 2px;
position: relative;
overflow: hidden;
width: 21px;
}
.windowHeader > strong {
float: left;
margin: 1px 0 10px;
padding-left: 3px;
font-size: 17px;
}
.container {  
display: grid;
grid-template-areas:
'kangel main navi'
'updates main button';
gap: 10px;
grid-auto-flow: row;
}
#kangel {
grid-area: kangel; 
border: 2px solid #4932C9;
height: 200px;
}
#navi {
grid-area: navi; 
margin-top:3px;
width: 200px;
text-align: center;
}
#button {
grid-area: button; 
width: 200px;
height: 10px;
text-align: center;
}
.button {
border: 2px solid;
border-color: white #4932C9 #4932C9 white;
color: #4932C9;
background-color: #EDD0EE;
text-align: center;
padding: 2px;
margin-bottom: 7px;
}
.button a {
text-decoration: none;
}
.button:hover {
border-color: #4932C9 white white #4932C9;
}
#main {
grid-area: main; 
text-align: center;
overflow-y: scroll;
height: 460px;
padding: 5px;
padding-bottom: 0px;}
#updates {
grid-area: updates; 
width: 200px;
height: 240px;
overflow-y: scroll;
text-align: center;}
.inline-div {
display:inline-block;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
height: 65px;
background-image:url("https://files.catbox.moe/utlbcd.png");
background-repeat: no-repeat;
background-size: 99%;
color: #4932C9;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 999;
bottom: 100%;
left: -60%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
html { text-size-adjust: 100%; }
/* this is for mobile phones in vertical view */
@media screen and (min-width: 1px) and (orientation: portrait){
#everything { 
transform: rotate(90deg);
position: absolute;
left:595px; top:-60px;
zoom: 160%; 
}
.window { 
width: 800px;
}
}
/* this is for mobile phones in horizontal view */
@media screen and (max-width: 1000px) and (orientation: landscape){
#everything {
zoom: 80%; 
left: -20px;
top: -5px;
position: absolute;
}
.window { 
min-width: 900px;
}
}