* {
    box-sizing: border-box;
	/* cursor: url('cursor/keroDef.png	'), auto;  */
}

.header {
	display: grid;
	grid-area: header;
	position: relative;
	box-sizing: border-box;
}

.header img {
	/* background-image: url(pics/wew.png); */
	max-height: 250px;
	position: relative;
	border: 1px solid;
	object-fit: contain;
	display: grid;
	align-content: center;
	/* padding-bottom: 10px; */
	margin-left: auto;
	margin-right: auto;
}

body {
	background-color: #98abc5;
	font-family:
		ms gothic,
		sans-serif;
	padding: 10px;
	box-sizing: border-box;
	max-width: 765px;
	margin: auto;
	overflow: flex;
	flex-wrap: wrap;
	display: flex;
}

div {
	margin: 0;
}

a {
	text-decoration: underline;
	color: black;
	cursor: pointer;
	/* cursor: url('cursor/keroLink.png'), auto; */
}

a:hover{
	text-decoration: underline;
	color: blue;
	/* cursor: url('cursor/keroLink.png'), auto; */
}

p {
	overflow-y: auto;
}

#buttons {
    text-align: center;
    border: 1px solid;
    margin-top: -1px;
    padding-top: 1vh;
    max-width: 100%;
	grid-area: buttons;
	
}




#maintext {
	padding: 2px 5px 0px 5px;
	margin:  0 1px 2px 1px;
	outline: 1px solid;
	grid-area: main;
}

#blog-content{
	padding: 0 5px 0;
	margin:  0 1px 1px 1px;
	outline: 1px solid;
	grid-area: main;
	max-height: 350px;
	overflow: auto;
	scrollbar-width: none;
}



.navbar {
	outline: 1px solid;
	margin: 0 1px 1px;
	grid-area: navlinks;
	text-align: right;
	overflow: flex;
	padding: 5px;
}

#sidebox1 {
	padding: 0 0 0 0;
	margin:  -1px 1px 1.5px 1px;
	outline: 1px solid;
	grid-area: sidebox1;
	overflow: auto;
	max-height: 159px;
}

#sidebox2 {
	margin: -1px 0 0px 0;
	padding: 2px 5px 0;
	/* margin: 0 1px 1px 0; */
	outline: 1px solid;
	grid-area: sidebox2;
	overflow: auto;
	max-height: 159px;
}

.sidebar {
    grid-area: menu;
    border: 1px solid;
    padding: 0 0 1px 2vh;
    margin: -1px -1px 0.5px 0;
}

textarea{
	resize: none;
	width: 88px;
	height: 40px;
}

ul {
	list-style-type: "  ";
	padding: 0 5px 0;
}

li{
	padding: 5px;
}


#bass{
	transform: scaleX(-1);
}
.grid {
	display: grid;
	grid-template-areas:
		"header header header header header"
		"menu navlinks navlinks navlinks navlinks"
		"menu main main main main"
		"menu sidebox1 sidebox1 sidebox2 sidebox2"
		"footer footer footer footer footer"
		"buttons buttons buttons buttons buttons";

	background-color: white;
	justify-content: center;
	/* overflow-x: hidden; */
	/* max-width: 100%; */
    height: auto; /* Adjust height based on content */
}

.grid2 {
	display: grid;
	grid-template-areas:
	"header header header header header header header"
	"menu list main main main main main"
	"menu list main main main main main"
	"footer footer footer footer footer footer footer";

	background-color: white;
	justify-content: center;
	max-width: 100%;
    height: auto; /* Adjust height based on content */
}

#list{
	padding: 5px;
}

.header h1 {
	position: absolute;
	bottom: 1px;
	left: 5px;
}

.header a {
	position: absolute;
	bottom: 1px;
	right: 5px;
}

.btn{
	padding: 0 0 0 15px;
}

.header p {
	position: absolute;
	bottom: -15px;
	left: 10px;
	/* background-color: #cfd9e6; */
}

#footer {
	text-align: center;
	grid-area: footer;
	border: 1px solid;
	margin: -1.5px 0 0;
	padding: 7px 0 6px;
	font-size: 80%;
	
}

details > summary {
    list-style-type: "";
}

details[open] > summary {
    list-style-type: "";
}

.menuIcon{
	height: 16px;
	width: 16px;
	filter: grayscale(1) contrast(1);	
}

/* .menuIcon:hover{
	when hover image should have color...
} */

#aotm{
	width:150px;
	height:150px;
	border: 1px solid;
}

#sotm{
	width:50px;
	height:50px;
	border: 1px solid;
}

#list a{
	margin: 15px;
}

#statuscafe {
    padding: .5em .5em 0 .5em;
    /* background-color: azure; */
	/* border: 1px solid midnightblue; */
	text-wrap: balance;
    margin: 0  ;
	font-family: "MS PGothic", "Arial", sans-serif;
	font-size: small;

}
#statuscafe-username {
    margin-bottom: .5em;
	/* margin-left: .5em; */
}
#statuscafe-content {
    margin: 0 -1em 0.5em .5em;
}

.rss-feed-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	
}