
.styled-line{
    border: none;
    height: 2px;
    background: black;
    margin: 5px;
    opacity: 2;
}
.styled-line2{
    border: none;
    height: 2px;
    background: grey;
    margin: 5px;
    opacity: .25;
}
.text-box{

    width: 600px;
    max-width: 80%;
    margin: auto;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;


}
h1{

    font-size: 4em;


}

h2{
    font-style: bold;
        font-size: 2em;

}
h3{
    font-style: bold;
        font-size: 1.5em;

}

.text-box p{
    text-align: left;
    font-size: 1.2em;
}



.text-box .question{
    text-align: left;
    font-size: 1.2em; 
}

ul{
    text-align: left;
    font-size: 1.3em; 
}

.img-container{
  position: relative ;
  display: flex;
  justify-content: center;
  align-items:center;
}
img{
  max-width: 100%;
  height: 60%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  z-index: 0;
  opacity: .8;
  margin-top: 10%;
}

@media (max-width:768px){
    .img-container{
        width:100vw;
        height: 100vh;
        max-width: 800x;
    }
}


.hidden-box{
    opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* prevents interaction when hidden */
  background: rgba(0,0,30,0.07);
  border: 1px solid rgba(0,0,60,0.12);
  padding: 5%;
  border-radius: 14px;
  margin-top: 8x;
  font-size: 16px;
  color: #222; 
}

.hidden-box.show {
  opacity: 1;
  transform: translateY(0);
  max-height:100%;
  padding:14px;
  pointer-events: auto; /* re-enable interaction when shown */

}


.long_info{
    font-size:.6em ;
}
/*  Prevent extra spacing around MathJax math elements */
.MathJax {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  
}

/*  Remove spacing inside MathJax number and fraction render boxes */
mjx-container {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/*  Fix list-item spacing from interfering with MathJax */
li mjx-container {
  display: inline !important;
}
ul.dashed {
    list-style: none; 
    padding-left: 0;  
}
ul.dashed li {
    position: relative;
    padding-left: 1.2em;
}
ul.dashed li::before {
    content: "–"; 
    position: absolute;
    left: 0;
    color: #333; 
}