* {
	box-sizing: border-box;
}

/*  background-size: 100% 100%; */
body {
  background-color: CadetBlue;
  background-image: url("Assets/bg/dev room.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
}

@media only screen and (max-width: 600px) {
 	body {
 		background-color: CadetBlue;
 		background-image: none;}
 	.headerbox {
 		width: 100%;}
 	.mainbody {
 		width: 100%}
 	.logmaincontainer {
 		grid-template-areas: 
 			auto
 			auto;
 	}
 	
}

h1 {
	font-family: 'dreamorphans', Georgia;
}

h2 {
	font-family: 'dreamorphans', Georgia;
}

h3 {
	font-family: 'dreamorphans', Georgia;
	font-size: 20px;
}

/* Font face settings. */
@font-face {
	font-family: terminus;
	src: url('Fonts/TerminusTTF.ttf') format('truetype');
}

@font-face{
	font-family: plante;
	src: url('Fonts/Plante.ttf') format('truetype');
}

@font-face{
	font-family: dreamorphans;
	src: url('Fonts/Dream Orphans.otf') format('opentype')
}

@font-face{
	font-family: linlibertine
	src: url('Fonts/LinLibertine_R.ttf')
}


/* CSS for common pages. */
/* The Kaleyard Studio header*/
.headerbox {
	background-color: #252C28;
	width: 79%;
	padding: 5px 20px;
	border-bottom: 3px double #557A5B;
	
	overflow: hidden;
	position: fixed;
	top: 0px;
	left:10.5%;
	z-index: 2;
}

.headericon {
	position: relative;
	left: 20px;
	top: 3px;
}

.headertext {
	position: relative;
	right: 5px;
	bottom: 10px;
	font-size: 50px;
	
	color: #ECDDED;
	font-family: 'plante', Georgia
		}
	
.headerbox a{
	float: right;
	color: #ECDDED;
	font-size: 25px;
	font-family: 'dreamorphans', Georgia;
	text-align: center;
	padding: 5px 10px;
	text-decoration: none;
	
}

.headerbox a:hover {
	background-color: #3D463D;
	 	}
	

/* The main part of the common pages. */	
/* */
.mainbody {
	color: #FFFFFF;	
	font-family: 'linlibertine', Times New Roman;
	font-size: 20px;
	
	background-color: #494643;
	width: 80%;
	height: 100%;
	padding: 20px 50px;
	margin: 9% auto 0;
	overflow: hidden;
}

.mainbody a{
	color: #EBFF81;
	font-weight: bold;
}

.indent {
	text-indent: 1em;
}

.centre {
	margin: 5px auto;
}

.horirule {
	display: block;
	margin: 30px auto 30px auto;
	max-width: 100%;
	height: auto;
}

.bulletpoint {
	float: left; 
	height: 40px;
	width: 40px;
	margin-right: 10px;
	}	

/* Test build: The two grids in change log.*/
.logmaincontainer {
	display: grid;
	grid-template-columns: auto auto;
	gap: 3%;
	
}

/* For the two grid in change logs. */
.twohorigrid {
	float: left;
	width: 50%;
}

.clearfix ::after {
  content: "";
  clear: both;
  display: table;
}

/*old width: 400px;*/
.changelog {
	height: 100px;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	overflow: scroll;
	color: #242319;
	background-color: #ACAC93;
	border: 3px inset #697B5A;
	}
	
.worktitle {
	clear: both;
	margin: 20px 0px 5px;
}	
	
.worktopic {
	height: 150px;
	width: 90%;
	padding: 5px 10px;
	margin: 0px auto 10px auto;
	overflow: scroll;
	color: #242319;
	background-color: #ACAC93;
	border: 3px inset #697B5A;
}	
	
/* The gallery. */
.thumbnail {
	border: 4px inset #557A5B;
	background-color: #ACAC93;
	width: 18%;
	height: 18%;
	object-fit: contain;
	float: left;
	margin: 10px;
}	

	/* The footer of  each page */
.footer {
	background-color: 	#252C28;
	width: 80%;
	height: 20px;
	margin-right: auto;
	margin-left: auto;
	border-top: 3px double #557A5B;

	color: #ECDDED;
	text-align: center;
	font-family: 'linlibertine', Times New Roman;
	font-size: 15px;
	}
	
.footerbg {
	background-image: url("Assets/bg/bg_growth.png");
	background-repeat: no-repeat;
	background-position: 120%}	
	
.footer::after {
	content: "© 2026 Brassica Oracle";	
	}