@media (max-width: 850px) {
  
  main {
    width: 100%;
  }
  .grid-container {
    grid-template-columns: 1fr;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --navy-900: #1b3a5c; /* Section header background and section header font color*/
  --warm-100: #faf8f5; /* page background */
  --warm-200: #f0ece5; /* card background */
  --warm-300: #e8e6e2; /* section background */ 
  --warm-400: #e0dcd3;
  --warm-border: #ddd5c7; /* border color */
  --ink-900: #2b2620; /* Main font color */  

  --color-bg-page: var(--warm-200);
  --color-bg-card: var(--warm-100);
  --color-bg-header: var(--navy-900);
  --color-bg-section: var(--warm-300);
  --color-bg-hover: var(--warm-400);

  --color-text-body: var(--ink-900);
  --color-text-header-dark: var(--navy-900);
  --color-text-header-light: var(--warm-200);

  --color-border: var(--warm-border);

  --font-main: Arial, sans-serif;
}

body {
  background: var(--color-bg-page);
  font-family: var(--font-main);
}

main, header, footer {
  width: 100%;
}

main {
  max-width: 210mm;
  margin: 0 auto;
  background: var(--color-bg-card);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

/*******************************
  Header and Footer
*******************************/
header {
  background-color: var(--color-bg-section);
  /* position: sticky;
  top: 0; */
}
footer {
  padding: 10px;
  text-align: center;
  background-color: var(--color-bg-section);
}

/*******************************
  Navbar
*******************************/
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* justify-content: right; */
  justify-content: center;
}

nav ul li a {
  display: block;
  padding: 14px 16px;
  /* border: 1px solid var(--color-border); */
  text-decoration: none;
  color: var(--color-text-header-dark);
}
nav ul li a:hover {
  background-color: var(--color-bg-hover);
}

/*******************************
  Container
*******************************/
.container {
  margin: 20px 0 20px 0;
}

#project-name-container {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: var(--color-bg-card);
  color: var(--color-text-header-dark);
}
/*******************************
  Grid
*******************************/
.grid-container {
  display: grid;
  grid-template-columns: 32% 68%;
}

/*******************************
  Left section
*******************************/
#section-left {
  background-color: var(--color-bg-section);
}

.section-left-header {
  color: var(--color-text-header-dark);
  padding: 5px;
}
.section-left-entry-header {
  font-weight: bold;
}
.section-left-entry-content {
  padding: 5px;
}
.section-left-entry-content-sub {
  margin-bottom: 5px;
}

/*******************************
  Right section
*******************************/
.section-right-header {
  background-color: var(--color-bg-header);
  text-align: center;
  color: var(--color-text-header-light);
  padding: 5px;
}

.section-right-entry-header {
  background-color: var(--color-bg-section);
  padding: 3px;
}

.section-right-entry-content {
  padding: 5px;
  background-color: var(--color-bg-card);
  text-align: justify;
  text-justify: inter-word;
}

.section-right-entry-content ul {
  padding: 5px 5px 5px 20px;
}

.section-right-entry-content p {
  margin-bottom: 3px;
}

/*******************************
  Visitor Counter
*******************************/
/* #visitor-counter-container {
} */