html, body {
	margin: 0;
	padding: 0;
}

html {
  scroll-behavior: smooth;
}

:root {
  --titlebar-h: env(titlebar-area-height, 32px);
}

body, body p, a, font, table { font-size: 18px; }

body a:link, body a:visited { color: #0000FF; }
body a:hover { color: #FFA500; }

a:focus:not(:focus-visible) {
    outline: none;
}

a, a img, button, [role="button"] {
	outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

img {
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none;
    -webkit-user-drag: none;
}

#main-wrapper {
	display: block;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
}

#app-titlebar {
	display: none;
	background-color: #8B4000;
}

p, font { 
  text-align: justify;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 2;
	hyphenate-limit-last: always;
	overflow-wrap: break-word;
	text-justify: distribute;
	word-spacing: -0.05em;
}

mark {
  background-color: #ffeb3b;
  padding: 0 1px;
  border-radius: 2px;
}

ul li::marker {
	color: #FFA500;
}

H2, H2 * { font-size: 20px !important; font-weight: bold; }

H3, H3 * { font-size: 18px !important; font-weight: bold; }

H4, H4 * { font-size: 16px !important; font-weight: bold; }


.hidden {
    display: none;
}

/* Fix link to anchor offset */
:target {
  scroll-margin-top: 50px; /* Adjust this value to the height of your fixed header */
}

/* Alternatively, apply to the root element for all links */
html {
  scroll-padding-top: 50px; /* Adjust to match your header height */
}

#main-menu {
	visibility: hidden; /* hidden by default */
	position: sticky; /* Make the element sticky */
	top: 0; /* Stick to the top of the viewport */
	z-index: 9999;
	text-align: center;
	font-weight: bold;
	line-height: 1.5;
	padding: 10px 0;
	background-color: #FAF0DD;
	font-family: Roboto, Helvetica, Arial;
	font-size: 18px;
	border-bottom: 1px solid #ccc;
}

#main-menu #favicon {
	background-image: url('/includes/img/home-icon.png');
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    width: 15px;
    height: 15px;
    display: inline-block;
}

#main-menu #homepage {
	font-family: 'Palatino Linotype', 'Times New Roman';
	word-spacing: 1px;
	color: #FFA500; 
	font-size: 20px;
	text-decoration: none;
}

#main-menu a {
	color: #A52A2A;
	text-decoration: underline;
}

#main-menu a:hover {
	color: #FFA500;
}

#main-menu .separator {
	color: #E35335;
	font-size: 16px;
}
#main-menu .current_page {
	color: #7f007f;
}

#title_menu {
	position: sticky; /* Make the element sticky */
  	top: 0; /* Stick to the top of the viewport */
	z-index: 9999;
	background-color: #800000;
	padding: 5px;
	text-align: center;
	font-size: 20px;
	color: #ffec00;

	font-family: Roboto, Helvetica, Arial;
	font-weight: bold;
	line-height: 2;
}

#title_menu span {
	font-size: 14px;
}

#title_menu a {
	color: #ff9900;
	font-size: 16px;
}

#title_menu a:hover {
	color: #FFFFFF;
}

span.section_title {
	display: inline-block; background-color: #800000; color: #FFFFE0; 
	font-size: 19px; font-weight: bold; padding: 4px; 
	font-family: Roboto, Helvetica, Arial;
	border-radius: 5px;
	padding: 5px 10px;
}
hr.section_title {
	border: 1px solid #800000;
	margin-top: -15px; width: 90%;
}

ul.section_item {
	font-family: Roboto, Helvetica, Arial;
	font-size: 16px;
	color: #353935;
}

ul.section_item a {
	font-family: Roboto, Helvetica, Arial;
	font-size: 18px;
}

.section_title_article {
	background-color: #FAF0DD; padding: 5px 10px; color: #800000; font-weight: bold; font-style: italic; margin-top: 30px;
}

td.button {
	background-color: #A34C00;
  padding: 6px; 
  border-radius: 6px;
  line-height: 1.5;
	font-weight: bold;

  text-align: center;
  vertical-align: middle;

  word-break: normal !important; 
  overflow-wrap: break-word;
    
  box-sizing: border-box;
	
	color: #FFFF33; 
	font-size: 16px; font-weight: bold; 
	font-family: 'Verdana'; text-decoration: none;
	
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

td.button:hover {
  background-color: #D36300 !important; 
  transition: background-color 0.2s ease;
  transform: scale(1.01); 
}

.centerdiv {
	margin: 0 auto;
}

.container {
  display: flex; /* Makes the children flex items */
  flex-wrap: wrap; /* Allows columns to wrap to a new line if needed */
  gap: 0px 20px; /* Adds space between columns */
  margin: 0 auto;
}

.column {
  /* On desktop (wide screens), make each column take roughly 50% of the width */
  flex: 1 1 calc(50% - 10px); /* flex-grow, flex-shrink, flex-basis */
}

.column.full-width {
  flex: 1 1 100%;
  padding-top: 5px;
  font-style: normal;
	opacity: 1 !important;
  transition: none !important;
}

.col2 {
  flex: 1 1 calc(50% - 10px);
}

.buddha-sasana {
	margin: 0 auto;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #3D3635;
}
.buddha-sasana em { color: #A34C00; }

.container.dhammapada {
	border-radius: 8px;
	margin: 50px auto;
	text-align: center;
	padding: 15px;
	border: 1px solid #E0D5CD;
	background-color: #FFF5EE;
	color: #3D3635;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	line-height: 1.5;
	opacity: 0.9;
}

.column:not(.full-width) {
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.column:not(.full-width).fade-low {
    opacity: 0;
}

.dhammapada .column:not(.full-width) {
    padding-bottom: 10px;
}

.home-footer {
	text-align:center; padding: 20px 0; color: #808080; font-size: 13px; font-weight: bold; letter-spacing: 0.1em;
}

.page-footer {
	text-align: center; font-size: 12px; font-weight: bold; color: #424242; letter-spacing: -0.01em; margin-top: 30px; margin-bottom: 10px; 
}
.page-footer hr {
  border: 0;
  border-top: 1px solid #424242; 
  width: 45%;
	margin: 0 auto 10px auto;
  opacity: 0.4;
}


a.extlink {
  word-wrap: break-word;
  word-break: break-all;
}


hr.solid-line {
	border: 1px solid rgb(128, 128, 128);
}


BLOCKQUOTE { margin-left: 20px; margin-right: 20px; }
DIR { padding-left: 10px; padding-right: 10px; }

/* Styles for screens smaller than, for example, 600px */
@media only screen and (max-width: 600px) {

  .hide-on-mobile  { display: none; }

  /* Make the main container fluid */
  .container {
    width: calc(100% - 20px) !important; /* Use 95% width for padding on small screens */
    padding: 10px;
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    float: none !important; /* Remove any desktop-specific floats */
    margin: auto !important; /* Center the container */
  }
  
 .column {
    /* On mobile, make each column take up the full width, causing them to stack */
    flex: 1 1 100%;
  }
 
 .col2, .col2 span {
		font-size: 12.5px !important;
 }

 .centerdiv {
		width: 100% !important;
		margin: 0 auto;
 }

  /* Make images responsive */
  img {
    max-width: 100%; /* Ensures images don't overflow their containers */
    height: auto; /* Maintains aspect ratio */
  }

  /* Adjust typography for readability */
  body {
    font-size: 18px;
    line-height: 1.5;
		text-align: left;
  }
  

  /* Ensure buttons and links are large enough to tap */
  button, a.button {
    padding: 10px 15px;
    font-size: 1em;
  }

  table {
    max-width: 100% !important;
    width: 100% !important;

    table-layout: fixed !important; 
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  td {
    word-break: keep-all; 
    max-width: 100%;
		line-height: 1.5;
  }

  hr {
    max-width: 100% !important;
    box-sizing: border-box; 
    margin-left: auto;
    margin-right: auto;
  }

}
/* END MOBILE STYLE */


@media (display-mode: window-controls-overlay) {

	#app-titlebar {
	  display: flex !important;
	  align-items: center;
	  height: var(--titlebar-h);
	  width: 100%;
	  background-color: #8B4000;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 2147483645;
	  -webkit-app-region: drag;
	  user-select: none;
	  cursor: default;
	}
	
	.titlebar-content {
    display: flex;
    flex-direction: row; 
    align-items: center;
    padding-left: 10px;
    flex-shrink: 0;
	  pointer-events: none;
	}
	
	.app-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px; 
    margin: 0;
    padding: 0;
  }

	.app-name {
	  padding-left: 8px;
	  font-size: 13.5px;
	  color: #fff;
	  font-family: system-ui, Helvetica;
	}
	
	/* re-position content down */
	#main-wrapper {
	  margin-top: var(--titlebar-h) !important;
	}

	#title_menu, #main-menu {
		top: var(--titlebar-h) !important;
	}
}

	
ul {
 	padding-left: 20px; 
}

ul li {
	line-height: 1.5;
	padding-left: 3px;
	margin: 10px;
}