@import url("https://fonts.googleapis.com/css?family=Bowlby+One+SC");
@import url("https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap");

html, body {
    height: 100%; width: 100%;
    padding: 0; margin: 0;
}

body
{
	background-color:#ffffff /* lighter variant: #f9e5e7 */;
	background-image:url('../img/wheat.svg'), url('../img/sun.svg'), url('../img/meadow.svg'), url('../img/meadow.svg');/*,, url('../img/reeds2.svg'), url('../img/wheat.svg');*/
	background-position: 20% bottom, top right, 40% bottom;
	background-size: 200px, 250px, 1000px;
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-family:CochinRegular, "Copperplate Gothic Bold", Tahoma, sans-serif;
	font-size:12px;
	word-wrap:break-word;	/* IE */
}

/* For small phone screens, remove the fancy background clutter */
@media only screen and (max-width: 600px) {
	body {
    	background:none;
	}
	h1, h2 {
		margin-top: 0px !important;
	}
}

/* The grass overlay */
.overlayCSS{
	position: fixed;
	background-image: url('../img/grass.svg');
	pointer-events: none;
	z-index: 99;
	background-position: 20% bottom, bottom center;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

#header {
	background-color:#ffffff;
	max-width: 600px;
	margin: auto;
	border-radius: 25px;
	padding: 10px;
	flex: 0 0 100%;
	/* default fallback */
	background: rgb(255, 255, 255) transparent;
	/* nice browsers */
	background: rgba(255, 255, 255, 0);
}

#content-main {
	/* text-align:center; */
	max-width: 600px;
	padding-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 40px;
	margin-bottom: 30px;
	background-color:#ffffff;
	border:6px solid black;
	border-radius:15px;
	-moz-border-radius:15px; /* Firefox 3.6 */
	-webkit-border-radius:15px; /* Safari and Chrome */
	/* for IE */
	filter:alpha(opacity=98);
	/* CSS3 standard opacity: 0.98; creates a new stacking context
	which messes with the highlight effect */
	/* background-color: rgba(255, 255, 255, 0.98); */
	position:relative;
}

@media only screen and (max-width: 600px) {
	#content-main {
		border:0;
		padding-top: 0px;
		padding-bottom: 20px;
		/* border: 1px solid; */
	}
}

.left
{
	text-align:left;
}

h1, h2 {
	font-family: "Bowlby One SC", "Copperplate Gothic Bold", Tahoma, sans-serif;
	white-space:nowrap;
    overflow:hidden;
	text-overflow:ellipsis;
	/* bootstrap CSS adds equivilent margin to bottom,
	   important ensures we override bootstrap */
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.head
{
	text-align:center;
}

h3, h4, h5, h6
{
	font-family: "Kirang Haerang", "Bowlby One SC", system-ui;
	font-weight: 400;
	font-style: normal;
	white-space:nowrap;
    overflow:hidden;
	text-overflow:ellipsis;
}
.clear 
{ /* generic container (i.e. div) for floating buttons */
    overflow:hidden;
    width:100%;
}

/* For lists */
ol, ul {
	font-family: "Bowlby One SC";
	list-style-type: decimal-leading-zero;
	position: relative;
	padding: 20;
	margin: 0;
	z-index: 1; /* Ensure the list is above the highlight bar */
}

:root {
	/* Define the selection background color as a var so js highlight script can access it */
	--selection-bg-color: #F66987;
}

/* Change the highlight color when text is selected */
::selection {
	background-color: var(--selection-bg-color); /* Highlight background color */
	color: #2A2D30; /* Optional: Change text color */
}

#content-main a:link
{
	color:#F1C06A;
	text-decoration:none;
}

#content-main a:hover
{
	color:#000000;
}

/* The following stuff is currently unused */
input.button
{
	margin-left:3px;
	background-color:#FFFFFF;
    color:#444;
	font:normal 12px palatino linotype, serif;
	padding:3px 20px;
	border-radius:50px;
	-moz-border-radius:50px; /* Firefox 3.6 */
	background:-webkit-gradient(linear, 0 30%, 0 150%, from(white), to(silver));
	background:-moz-linear-gradient(top, white 35%, silver 125%);
	border-style:solid;
	border-width:1px;
	border-color:#808080;
}

.err
{
	color:#FF9900;
}

/* div>p:first-letter
{
	font-size:15px;
} */

#wrapper
{
	max-width: 600px;
	margin-left:auto;
	margin-right:auto;
    justify-content: center;
    align-content: center;
}

#navbar
{
    justify-content: center;
	display:flex;
	width:600px;
}

#navbar>a
{
	margin-left: auto;
	margin-right: auto;
	color:#50305A;
	font-size:25px;
}

#content:after
{
    content:url('../img/vinyl.svg');
}

#footer
{
	font-size:8px;
	background-color:#FFF6D9;
	-moz-border-radius:50px; /* Firefox 3.6 */
    border-radius:50px;
	width:700px;
}

#content
{
	width:700px;
	border-bottom:2px dotted silver;
}

blockquote.stylized
{ 
	background-image:url('/imgs/opening_quote.png'), url('/imgs/closing_quote.png');
	background-position:top left, bottom right;
	background-repeat:no-repeat;
	margin:5px;
	padding:3px 15px 3px 5px;
	text-indent:22px;
	position:absolute;
	bottom:0px;
	right:0px;
	font-size:110%;
}

blockquote.stylized:first-letter
{ 
	font-size:130%;
}

.blocktext
{
    margin-left:auto;
    margin-right:auto;
}

@font-face 
{
    font-family:'CochinRegular';
    src:url('cochin-webfont.eot');
    src:url('cochin-webfont.eot?#iefix') format('embedded-opentype'),
        url('cochin-webfont.woff') format('woff'),
        url('cochin-webfont.ttf') format('truetype'),
        url('cochin-webfont.svg#CochinRegular') format('svg');
    font-style:normal;
}