.body 
{


}
.container{
padding: 2rem;
}
.flex-container{
display: flex ;
flex-wrap: wrap;
flex-direction: column;
align-items: center;


}
.bt{
border: solid 1px;
border-radius: 0.5em;
background-color: rgb(200,200,200);
padding: 0.5rem;
text-align: center;
}
.group{
display: flex;
flex-direction: row;
flex-basis: 100%;
flex-wrap: wrap;
/*background-color: rgb(240,240,240);*/
border-radius: 1em;
box-shadow: 0px 0px 5px 10px rgb(240, 240, 240); 
padding: 10px;
align-items: center;
text-align: center;
}
.list-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-radius: 1em;
box-shadow: 0px 0px 5px 10px rgb(240, 240, 240); 
padding: 10px;
font-size: large;
}



h1,h2,h3
{
    flex-basis: 100%;
    text-align: center;
}
p
{
    text-indent: 1.5em;
}
table, th, td {
    border: 1px solid;
    text-align: center;
  }
  /* tr:nth-child(even) {background-color: #f2f2f2;} */
  table
  {
    width: 80%;
    margin: auto;
    background-color: rgb(200, 222, 224);
  }
  .mark-green::marker {
    font-weight: bold;
    color: chartreuse;
    font-size: xx-large;
  }
  .mark-orange::marker {
    font-weight: bold;
    color: orange;
    font-size: xx-large;
  }
  .mark-red::marker {
    font-weight: bold;
    color: red;
    font-size: xx-large;
  }
  .mark-yellow::marker {
    font-weight: bold;
    color:yellow;
    font-size: xx-large;
  }
  .red
  {
    color: red;
  }
  .underline {
    text-decoration: underline;
  }
  .bg-green{
    background-color: green;
  }
  span{
    /*display: block;*/
  }
  .mark-green {
    font-weight: bold;
    color: green;
    font-size: x-large;
  }
   .mark-blue {
    font-weight: bold;
    color: blue;
    font-size: x-large;
  }
  .mark-red {
    font-weight: bold;
    color: red;
    font-size: x-large;
  }
  .mark-orange{
    font-weight: bold;
    color: orange;
    font-size: x-large;
  }
  .red {
    
    color: red;
    
  }
  button {
margin: 0.5em;
  }
  li {
     font-size: 2.5rem 
  }
  }