body {
    font-family: Arial, sans-serif;
    color: #333333;
    background-image: url(../asset/home_bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-family: "Aptos Display", sans-serif;
}

header {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(10px); 
    backdrop-filter: blur(10px);
    color: #0F4761;
    margin-left: 16em;
    height: 3em;
    position: fixed;
    width: calc(100vw - 17rem);
    margin-top: 1em;
    z-index: 3;
    border-radius: 10px;
    margin-right: 200px;
    text-align: left;
}

main {
    padding: 4em;
    margin-left: 16em;
    font-size: small;
}

/*------bulletins----------*/
ol{
    color: #000000;
    text-align: justify;
    font-size: 1em;
    margin-left: 3em;
    margin-right: 2em;
    line-height: 2em;
    margin-bottom: 1em;
}
li{
    margin: .5em;
}
/*------bulletins----------*/

.container {
    position: fixed;
    top: 5rem;
    left: 16rem;
    width: calc(100vw - 17rem); /* sidebar width diff */
    height: calc(100vh - 7rem);
    overflow-y: auto; /* content with the box */
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

h1 {
    font-size: 1.5em;
    margin: .25em;
    margin-left: .5em;
}

h2 {
    font-size: 1.25em;
    color: #0F4761;
    margin-top: 15px;
    background: rgb(229, 228, 228);
    border-radius: 5px;
    padding: 5px;
    border: 2px #ffffff;
}

h3 {
    font-size: 1em;
    color: #0F4761;
    margin-top: 15px;
    background: rgb(229, 228, 228);
    border-radius: 5px;
    padding: 5px;
    border: 2px #ffffff;
}

h4 {
    font-size: 1em;
    color: #0F4761;
    margin-top: 15px;
    background: rgb(229, 228, 228);
    border-radius: 5px;
    padding: 5px;
    border: 2px #ffffff;
}

p{
    color: #000000;
    margin-top: 4pt;
    margin-bottom: 4pt;
    text-align: justify;
    font-size: 15px;
    font-family: "Aptos Display", sans-serif;
    margin-left: .5em;
}

.tag{
    color: #0F4761;
    text-align: center;
    margin-left: 7em;
    margin-right: 7em;
}

/*-------1.1 - abbrevation-----*/
.two-column-list {
    column-count: 2; 
    column-gap: 3em; 
    text-align: left;
}

.entry {
    break-inside: avoid; /* don't change */
    margin-bottom: 10px; 
}

.abbreviation{
    display: inline-block; /* abrevation in signle line*/
    font-weight: bold; 
    width: 5em;
    margin-right: 10px;
}
/*------1.1 - abbrevation end-----*/

/*--------table----------*/
table {
    width: 100%; 
    border-collapse: collapse;
    margin-top: 20px; 
    font: .9em sans-serif;
}

tbody{
    text-align: center;
}

th, td {
    border: 1px solid #ffffff;
    padding: 8px; 
    text-align: center; 
    border-collapse:separate;
}

td:nth-child(2){
    text-align: left;
}

/* color for alternative row */
tr:nth-child(odd) {
    background-color: #fff; 
}

tr:nth-child(even) {
    background-color: rgb(15, 71, 97, 0.1)
}

th {
    font-size: 1.1em;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #0F4761;
    color: white;
}

tr:hover{
    background-color: rgba(160, 158, 95, 0.2);
}
/*--------table----------*/

/*-----------popup------------*/
.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 20%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 1000;
}
/*----------popup------------*/

float{
    box-sizing: border-box;
  }
  
/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
  
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
  
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        }
}