body {
  width: 100%; font-family: sans-serif; position: relative;
  margin: 0; padding: 0; 
}

.navbar{
  background-color: #1a1a1a; color: #b0b0b0; border-top: 2px solid #6c6c6c;
  width: 100%; height: 70px; margin: 0; position: fixed; top: 0; left: 0; 
  right: 0; z-index: 1; display: flex; flex-direction: row;
}
#check{
  display: none; position: absolute;
}
.logo{
  position: absolute; width: 100px; height: 70px; right: 5px;
}
.brand-title{
  position: absolute; color: white; left: 90px; top: -15px; font-size: xx-large;
  font-family:'Courier New', Courier, monospace;
}
.toggle-button .bar {
  height: 4px; width: 100%; background-color: white; border-radius: 10px;
}
.toggle-button {
  position: absolute;  margin-top: 20px; margin-left: 2%; display: flex;
  flex-direction: column; justify-content: space-between; width: 35px;
  height: 25px; cursor: pointer;
}

#menu{
  width: 25%; height: 100vh; border: solid 1px;  top: 71px; 
  background-color: rgb(57, 62, 63);
  margin: 0; overflow-y: scroll; padding: 5px;  position: fixed; border: none;
}


::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


ul li {
  list-style: none; height: max-content; background-color: rgb(242, 247, 248); border-radius: 10px; margin-top: 3px;
  margin-left: 0; padding-left: 10px;
}
ul li:hover{
  background-color: rgb(176, 179, 179); 
}
ul li a {
  text-decoration: none; line-height: 25px; color: black; 
  padding: 3px; 
}
ul input {
  width: 96%; height: max-content; background-color: white; border-radius: 10px; margin: 0;
  padding-left: 10px; padding-top: 4px; font-size: large; border: none;
}
#check:checked ~ #menu{
  display: none;
}
.body-content{
  top: 71px; margin-left: 26%; padding: 0; text-align: justify; position: relative;
   width: 73%; background-color: white; line-height: 2rem; 
}
#forCanvas {
  width: 100%; height: 100%; margin-left: 0%; position: relative;
}

.abstract {
  width: 94%; font-size: smaller; height: max-content; padding: 2%;
}

.abstract h1 {
  text-align: center;
}
/* =========================================================
   Present promo banner (inline, before the H1)
   Only styles the banner classes — nothing else
   ========================================================= */

.promo-inline{
  display: block; text-decoration: none; background-color: #2c2c2c; color: #f5f5f5;
  border: 1px solid #6c6c6c;  border-radius: 12px;
  /* Thicker banner */
  padding: 16px 16px; margin: 10px 0 16px 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem; line-height: 1.35; text-align: center;
}

.promo-inline:hover{
  background-color: #1f1f1f;   /* slightly darker on hover */
}

.promo-inline-badge{
  display: inline-block; background-color: #1a1a1a; color: #ffffff;
  padding: 5px 12px; margin-right: 10px; border-radius: 999px;
  border: 1px solid #6c6c6c;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
}

.promo-inline-cta{
  display: inline-block; margin-left: 10px; color: #ffffff;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
h2 {
  text-align: center;
}

.abstract p i {
  font-weight: bold; line-height: 1.6;
}

.abstract ol li {
  line-height: 1.6;
}

.abstract p {
  line-height: 1.6;
}
/* ===== Plain centered footer ===== */
footer.bottom-bar{
  background-color: #1a1a1a; color: #b0b0b0; border-top: 2px solid #6c6c6c;
  text-align: center; padding: 18px 12px;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

footer.bottom-bar p{
  margin: 0 0 8px 0; font-size: 0.95rem;
}

footer.bottom-bar a{
  color: #f5f5f5; text-decoration: none; margin: 0 10px;
}

footer.bottom-bar a:hover{
  text-decoration: underline; color: #ffffff;
}

@media (max-width: 1200px){
  #menu{
    display: none;
  }
  #check:checked ~ #menu{
    display: block;
  }
  .body-content {
    width: 100%; margin-left: 0%;
  }
}