body, html {
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%; /* Ensure body and html take full viewport height */
  
/* center the view port */
  display: flex;
  justify-content: center;  
  
  background-color: #dbe9f4;

}

.container {
  display: flex;
  flex-direction: column; /* Stack header, main, and footer vertically */
  max-height: 97vh; /* Ensure container takes full viewport height */
  max-width: 550px;
  background-color: grey;  /* This will show up as borders for the sections */
}

/* extend container style for screens wider than 768px (e.g., tablets and desktops) */
@media screen and (min-width: 601px) {

    .container {
    
      height: 97vh;
      width:97vh;   
    
    }

}



header {
  background-color: #f0f0f0;
  padding: 5px;
  text-align: center;
  border: 2px solid black; 
  height: 7vh;
}

footer {
  background-color: #f0f0f0;
  padding: 2px;
  text-align: left;
  border: 2px solid black;
  margin: 2px; /* Optional: Add margin for space outside the border */  
  height: 3vh;
}


/* source: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_right */ 
.topnav {
  position: relative;    
  overflow: hidden;
  background-color: black;   /* original value: #333; */
  height: 10vh;
  min-height: 50px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: black;
  color: white;
}

.topnav-right {
  float: right;
}


.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




main {
  display: flex; /* Make main a flex container for its sections */
  flex-grow: 1; /* Allow main to expand and fill available space */
  overflow: hidden;
  flex-direction: column;  
  height: 80vh;  
}

.main-section-one,
.main-section-two {
  /* max-width: 50%;  */  /* Limits the section's width to 50% of the flex container */
  /* max-height: 50%; */  /* Limits the section's height to 50% of the flex container */
  
  max-width: 100%;  
  height: 36vh;
  flex: 1; /* Make both sections take equal space within main */
  padding: 10px 20px;
  border: 2px solid black;
  box-sizing: border-box; /* Include padding and border in element's total width/height */
}


.main-section-one {
  background-color: black;
  overflow: hidden;   
  border: 2px #FFC000;
  padding: 2px; /* Optional: Add padding for space between content and border */
  margin: 2px; /* Optional: Add margin for space outside the border */  
}

.main-section-two {
  background-color: black;
  overflow: hidden;   
  border: 2px #FFC000;
  padding: 2px; /* Optional: Add padding for space between content and border */
  margin: 2px; /* Optional: Add margin for space outside the border */  
}

.main-section-one-text {

  width: 100%;
  height: 100%;
  overflow: hidden;
  flex: 1; 
} 

.main-section-one img {

  width: 100%;
  height: 100%;
  overflow: hidden;    /* original value: none */
  object-fit: fill; 
} 

.poem {
  /* max-width: 50%;  */  /* Limits the section's width to 50% of the flex container */
  /* max-height: 50%; */  /* Limits the section's height to 50% of the flex container */

  max-width: 100%;  
  height: 36vh;
  flex: 1; /* Make both sections take equal space within main */
  padding: 10px 20px;
  border: 2px solid black;
  box-sizing: border-box; /* Include padding and border in element's total width/height */
}


.poem {
  background-color: black;
  /*overflow: auto; */  
  overflow-y: scroll;
  border: 2px #FFC000;
  padding: 2px; /* Optional: Add padding for space between content and border */
  margin: 2px; /* Optional: Add margin for space outside the border */  
}


.faq {

  max-width: 100%;  
  height: 36vh;
  flex: 1; /* Make both sections take equal space within main */
  border: 2px solid black;
  box-sizing: border-box; /* Include padding and border in element's total width/height */
  background-color: black;
  overflow-y: scroll;
  
  
 /* padding: 2px; */     /* Optional: Add padding for space between content and border */
 /* margin: 2px;  */     /* Optional: Add margin for space outside the border */  
  color: #D4AF37;        /* #FFDF00; */
}



.faq-list {
    list-style: none; /* Remove default numbering */
    counter-reset: my-list-counter; /* Initialize the counter */
    padding-left: 0; /* Remove default padding */
}

.faq-listitem {
    counter-increment: my-list-counter; /* Increment the counter for each list item */
    margin-bottom: 0.5em; /* Add some space between list items */
    position: relative; /* For positioning the number */
    padding-left: 2.5em; /* Create space for the number */
    font-size: 18px;
}

.faq-listitem::before {
    content: counter(my-list-counter) "."; /* Display the counter value */
    display: block; /* Make the number a block-level element */
    position: absolute; /* Position the number independently */
    top: 0; /* Align to the top of the list item */
    left: 0; /* Align to the left of the list item */
    font-weight: bold; /* Make the number stand out */
    width: 2em; /* Give the number a fixed width */
    text-align: right; /* Align the number to the right within its width */
    margin-right: 0.5em; /* Space between number and content */
}
  
.faq-listitem-text {
  padding-left: 2.5em; /* Create space for the number */
  display: inline-block; 
  font-size: 18px;    
}
  
.regular-list {
  list-style-type: disc; /* Remove default bullet */
}

.regular-listitem {
  position: relative; /* Needed for positioning the custom bullet */
  margin-left: 5px; /* Adjust this value for desired spacing */
}
    
    
.table_component {
  overflow: auto;
  width: 100%;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 75%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: center;
}

.table_component caption {
    caption-side: top;
    text-align: center;
    color: #D4AF37;
}

.table_component th {
    border: 1px solid #dededf;
    background-color: #000000;
    color: #D4AF37;
    padding: 5px;
    font-size: 18px;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #000000;
    color: #D4AF37;
    padding: 5px;
    font-size: 18px;
}
    

  
  hr {
        border: none;
        border-top: 1px solid grey; /* Styles the horizontal line */
  }


.rainbow-text {
    font-family: Arial Black, Gadget, sans-serif;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}
.rainbow-text .block-line > span {
    display: inline-block;
}



/* source: https://www.subframe.com/tips/css-glow-text-effect-examples */
/* This class is used for golden text */ 

        /* usage: postulates : section-2; inferences : section-1 */
        .goldenhue {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            font-size: 5.0vh;
            margin-bottom: 20px;
            letter-spacing: 4px;
            line-height: 1.1;
            position: relative;
            color: transparent;
            background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(248,233,192,1), rgba(212,175,55,0.8));
            -webkit-background-clip: text;
            background-clip: text;
            /* Glow effect */
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
            animation: titleGlow 8s infinite alternate;
        }

        @keyframes titleGlow {
            0%, 100% {
                text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
            }
            50% {
                text-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 0 40px rgba(212, 175, 55, 0.1);
            }
        }
        
        
        /* usage: Home : section-1 */
        .goldenhue-large {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            font-size: 7.0vh;
            margin-bottom: 20px;
            letter-spacing: 4px;
            line-height: 1.1;
            position: relative;
            color: transparent;
            background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(248,233,192,1), rgba(212,175,55,0.8));
            -webkit-background-clip: text;
            background-clip: text;
            /* Glow effect */
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
            animation: titleGlow 8s infinite alternate;
        }        
        
        
        /* usage: inferences : section-2 */
        .goldenhue-medium {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            font-size: 3.6vh;
            margin-bottom: 20px;
            letter-spacing: 4px;
            line-height: 1.1;
            position: relative;
            color: transparent;
            background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(248,233,192,1), rgba(212,175,55,0.8));
            -webkit-background-clip: text;
            background-clip: text;
            /* Glow effect */
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
            animation: titleGlow 8s infinite alternate;
        }        
        
        
        
        
        /* usage: poems body : section-2 */        
        .goldenhue-small {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            font-size: 2.0vh;
            margin-bottom: 5px;
            letter-spacing: 2px;
            line-height: 1.1;
            position: relative;
            color: transparent;
            background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(248,233,192,1), rgba(212,175,55,0.8));
            -webkit-background-clip: text;
            background-clip: text;
            /* Glow effect */
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
            animation: titleGlow 8s infinite alternate;
        }        

        /* usage: poems : section-1 - author name */      
        .goldenhue-tiny {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            font-size: 1.5vh;
            margin-bottom: 5px;
            letter-spacing: 2px;
            line-height: 1.1;
            position: relative;
            color: transparent;
            background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(248,233,192,1), rgba(212,175,55,0.8));
            -webkit-background-clip: text;
            background-clip: text;
            /* Glow effect */
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
            animation: titleGlow 8s infinite alternate;
        }