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

body {
	
  font: 12px/1.6 Verdana, Helvetica, sans-serif;
  color: black;
  background: white url('img/blue.jpg') no-repeat;
 background-size: cover;
}

a {
  text-decoration: none;
  color: #2d9000;
}

a:hover {
  color: #1e6300;
}

/* Container */
div#container { 
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 auto;
 
}

/* Left column */
div#left {
  width: 200px;
  background: #5ecb1f;
}

/* Header */
div#header {
  background: #5ecb1f;
}

div#header a {
  display: block;
  line-height: 0;
}

div#header img {
  width: 100%;
  display: block;
}

/* Navigation */
div#navigation {
  background: #5ecb1f;
}

div#navigation a {
  color: black;
  display: block;
  padding: 4px 10px;
}

div#navigation a:hover {
  background: #3db800;
  color: white;
}

div#navigation p {
  background: #a8f060;
  color: black;
  line-height: 1.3;
  padding: 4px 10px;
  margin: 0;
  border-top: 1px solid #4db810;
}

div#navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

div#navigation ul li {
  background: #a8f060;
  border-bottom: 1px solid #5ecb1f;
}

div#navigation ul li ul {
  display: none;
  background: #3db800;
}

div#navigation ul li:hover ul {
  display: block;
}

div#navigation ul li ul li {
  background: #3db800;
  border-bottom: 1px solid #2d9000;
}

div#navigation ul li ul li a {
  padding: 3px 10px 3px 22px;
  color: white;
}

div#navigation ul li ul li a:hover {
  background: #2d9000;
  color: white;
}

/* Content */
div#content {
  flex: 1;
  background: #ffffff;
  padding: 12px 16px;
  min-width: 0;
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif;
  color: black;
  min-height: 650px;
  
  
}

div#content p {
  line-height: 1.4;
  margin-top: 0;
}

div#content p img {
  object-fit: contain;
}

div#content table {
  line-height: 1.6;
  border-collapse: collapse;
}

div#content ul {
  list-style-type: none;
  padding-left: 0;
}

/* Footer */
div#footer {
  width: 100%;
  flex-basis: 100%;
  align-self: flex-end;
  text-align: center;
  background: #5ecb1f;
  border-top: 2px solid #4db810;
  padding: 12px 0;
  color: black;
  font-size: 70%;
}

div#footer p {
  font-style: italic;
  margin: 0;
}

div#footer a {
  color: #d0faaa;
}

div#footer a:hover {
  color: white;
}

/* Blog article list */
.blog-heading {
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  color: black;
  margin: 0 0 12px 0;
  border-bottom: 2px solid #a8f060;
  padding-bottom: 6px;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-item {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
}

.article-item:last-child {
  border-bottom: none;
}

.article-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.article-date {
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif;
  color: #777;
  white-space: nowrap;
}

.article-title {
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  color: black;
}

.article-title:hover {
  color: #2d9000;
}

.article-preview {
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif;
  color: black;
  margin: 0;
  line-height: 1.5;
}

.blog-scroll {
  overflow-y: auto;
  max-height: 480px;
  border: 1px solid #e0e0e0;
  padding: 0 10px;
}

#blog-pagination {
  margin-top: 10px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.page-btn {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif;
 
}



/* Blogger */
div#blogger {
  float: left;
  width: 350px;
}


.scrollbar2 {
  overflow: auto;
  width: 300px;
  height: 200px;
  background: #d0faaa;
  border: 1px solid #a8f060;
  border-radius: 4px;
}

.scrollbar2 p:hover {
  background: #a8f060;
}

/* Links */
.links img {
  width: 50%;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Mobile */
@media (max-width: 640px) {
  div#container {
    flex-direction: column;
  }

  div#left {
    width: 100%;
  }

  div#header img {
    width: 100%;
  }

  /* Horizontal nav row */
  div#navigation ul {
    display: flex;
    flex-direction: row;
  }

  div#navigation ul li {
    flex: 1;
    border-bottom: none;
    border-right: 1px solid #5ecb1f;
    text-align: center;
  }

  div#navigation ul li:last-child {
    border-right: none;
  }

  div#navigation ul li a {
    padding: 10px 4px;
    font-size: 11px;
  }

  /* Hide submenus and hover effects on mobile */
  div#navigation ul li ul {
    display: none !important;
  }

  div#navigation a:hover,
  div#navigation ul li ul li a:hover {
    background: none;
    color: black;
  }

  div#content {
    padding: 12px;
    height: auto;
    
  }

  .scrollbar,
  .scrollbar2 {
    width: 100%;
    box-sizing: border-box;
  }

  .links img {
    width: 100%;
  }

  div#footer {
    order: 999;
    flex-basis: 100%;
    width: 100%;
  }
}