/* Glogals */
:root
{
  --color-theme:#00A867;
  --color-normal:#000000;
  --color-muted:#6b7280;
  --color-hover:#8a2be2;
  --color-bg:#ffffff;
  --color-bg-block:#d3d3d3;
}
*
{
  margin:0px; 
  padding:0px; 
  border:0px; 
  box-sizing:border-box
}
html, body
{
  height:100%
}
body
{
  font-family: "Segoe UI", "Helvetica", Arial, Helvetica, sans-serif, system-ui;
  font-size: 15px;
  color:var(--color-normal);
  background:var(--color-bg);
}
a
{
  color:var(--color-theme);
  text-decoration:none;
}
/* Main */
main
{
  width: 100%;
  height:auto;
  margin:auto;
  padding: 0px 10px 0px 10px;
  color: var(--color-normal);
  background:var(--color-bg);
}
/* Commons */
.cards
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1em;
  margin-top: 1em;
}
.card
{
  background: var(--color-bg-block);
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(18,35,60,0)
}
.card h3
{
  margin:0 0 1em 0
}

/* index.html */
#home-about
{
  text-align:center;
  padding:3em 1em;
  background:var(--color-bg-block);
  border-radius: 8px;
}
#home-about h1
{
  margin: 15px 0;
}
#home-about p
{
  margin: 15px 0;
  color:var(--color-muted);
}
#home-about a
{
  margin: 15px 0;
}
.home-section
{
  padding: 2em 0 0 0;
}
.caption
{
  text-align:center;
  padding: 1em;
}
.caption p
{
  color:var(--color-muted);
}

 /* aboutus.html */
div.aboutus-capt
{
  margin: 12px 12px 0px 12px;
  padding: 12px;
  color: var(--color-bg);
  background: #385723;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(18,35,60,.06)
}
div.aboutus-capt h1
{
  text-align: center;
}
div.aboutus-capt p
{
  text-align: center;
  margin: 5px;
}
div.aboutus-imgs
{
  width: 100%; 
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  gap: 12px; 
}
div.aboutus-imgs img
{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}