/* format clean up */ 
body { 
  margin: 0px; 
  padding: 0px; 
  height: 100vh; 
  overflow: hidden; 
  justify-content: center; 
  color: #20207f;
  
} 
pre {
  overflow: hidden; 
  max-width: 100%;
}


@font-face {
font-family: "FakeReceipt";
src: url(FakeReceipt.otf);
}

/* Parent container */ 
.container { 
  display: flex; 
  flex-direction: row; 
  width: 100vw; 
  height: 100vh;
  min-width: 0;
} 

/* Left panel for highlight photo*/ 
.leftpanel { 
  width: 50%; 
  overflow: hidden; 
  margin: 0;
} 
.leftpanel img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 

/* Right panel for content */ 
.rightpanel { 
  width: 50%; 
  height: 100%; 
  margin: 0px;
  padding: 40px;
  overflow-y: auto;  
  text-align: justify;
  box-sizing: border-box; 
  font-family: 'FakeRECEIPT', monospace;
  min-width: 0;
}

.rightpanel h1 {
  text-align: center;
  font-size: 10px;

}
.rightpanel h2 {
  text-align: left;
  font-size: 20px;
}
.rightpanel h3 {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
}
li {
  list-style-type: none;
  list-style: none;
}

a:link {
  color: #2f3d7b;
  text-decoration: none;

}
/* Mobile responsive adjustment*/
@media (max-width: 950px) {
  body {
    overflow: auto; 
  }
  pre {
    font-size: 10px;
  }
  .container { 
    flex-direction: column; 
    width: 100%;
    height: auto; 
  } 
  .leftpanel, .rightpanel { 
    width: 100%; 
  } 
  .leftpanel {
    height: 50vh; /* adjust highlight image height */
  }
  .rightpanel {
    height: auto; 
    overflow-y: visible; 
    overflow-x: hidden;
  }
}

/* marquee code*/
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  background: #2f3d7b;
  color: white;
  padding: 10px 0;
}
.marquee-content {
  display: flex;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}



/* Divider code */
.symbol-divider {
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: #2f3d7b;
  margin: 0;
  padding: 0;
}
.symbol-divider::after {
  content: "----------------------------------------------------------------------------------------------------";
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
}

/* split column classes */
.colcontainer { 
  display: flex; 
  flex-direction: row; 
  width: 100%; 
  margin: 0px;
  padding: 0px;
} 
.leftcol { 
  width: 50%; 
  margin: 0px;
  padding: 0px;
  overflow: hidden; 
  text-align: left;
} 
.leftcol li{
  text-align: left;
}
.rightcol { 
  width: 50%;  
  margin: 0px;
  padding: 0px;
  overflow-y: hidden;  
  text-align: right;
  box-sizing: border-box;
}