/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  
header {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px 10px 8px;
      background: #a899ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    header h1 {
      color: #bff5ff;
      margin: 0;
      font-size: 3em;
    }
    header p {
      color: #e6f3fa;
      margin-top: 0px;
    }
	a {
		text-decoration: none;
		color: #db8307;
		}
	a:visited {
		color: #c5d0fc;
		}
	a:hover {
		color: #f2b257;
		}
body {
      font-family: Arial, sans-serif;
      line-height: 1.5;
      max-width: 900px;
      margin: 20px auto;
      padding: 0 10px;
      color: #333;
      background: #f9f9f9;
    }
	.post-body {
      font-family: "Roboto", "Noto Sans Myanmar", sans-serif;
      line-height: 1.6;
      max-width: 720px;
      margin: auto;
      padding: 20px;
      padding-bottom: 10px;
      color: #222;
      background: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
	h1 {
            color: #1a73e8;
        }
        ul {
            padding-left: 1.2em;
        }
        li {
            margin-bottom: 0.5em;
        }
        .myanmar {
            margin-top: 2em;
            font-weight: bold;
            color: #333;
        }
	.grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 10px;
      padding: 30px;
      max-width: 1200px;
      margin: auto;
    }
    .card {
      max-width: 300px;
      height: 300px;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s;
	  position: relative; /* required for overlay positioning */
    }
    .card:hover {
      transform: scale(1.02);
    }
    .card img {
      width: 100%;
      height: 100%;
	  object-fit: cover;
      display: block;
    }
    .card-body {
      padding: 15px;
      text-align: center;
    }
    .card-body h3 {
      margin: 0;
      font-size: 1.1em;
    }
    .card-body a {
      display: inline-block;
      margin-top: 10px;
      padding: 8px 12px;      
      color: white;
      border-radius: 4px;
      text-decoration: none;
      font-size: 0.9em;
    }
	.overlay {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.5); /* 50% transparent black */
		color: white;
		text-align: center;
		padding: 10px;
	}

	.overlay h3 {
		margin: 0;
		font-size: 1em;
	}
	.overlay h4 {
		margin: 0;
		font-size: 0.8em;
	}
	.button {
    background-color: #046785;
    border: 1px solid #069ecc;
	border-radius: 5px;
    color: #ffffff;
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
	margin: 5px 5px;
    cursor: pointer;
	transition-duration: 0.4s;
	}
	.button:hover {
	background-color: #86c3c4;
	color: #3e5454;
	}
	.button1 {
		background-color: #ffffff;
    border: 1px solid #4CAF50;
	border-radius: 4px;
    color: #2649fb;
    padding: 5px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
	transition-duration: 0.4s;
}
.button1:hover {
	background-color: #4CAF50;
	color: #ffffff;
  }
    
    footer {
      text-align: center;
      padding: 15px;
      background: #333;
      color: white;
      font-size: 0.9em;
    }
    footer a {
      color: #069ecc;
      margin: 0 10px;
      text-decoration: none;
    }