body, html {
    height: 100%;
    margin: 0;
    display: flex;
    background-color: #f0f0f0; /* Light gray background */
  }
  .sidebar ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0;
  }
  .sidebar li {
    background-color: #d0d0d0; /* Even darker gray for list items */
    margin-bottom: 10px; /* Adds space between list items */
    padding: 10px;
    font-family: monospace; /* Gives the text a code-like appearance */
  }
  .container {
    flex-grow: 1; /* Takes up the remaining space justify-content: center;*/
    display: flex;
    max-width: 400px !important;
    width: 40vh;
    height: 100%;
    align-items: center;
    display:inline-block;
    padding: 20px;
    margin: 0px!important;
  }
.spanHead{
  font-weight: 900;
}
  .imgLogo {
      float: left;
  }

  
  /* Styles for devices with a screen width of 600px or less (small devices) */
 @media screen and (max-width: 1000px) {
  .sidebar {
    padding: 20px;
    background-color: #e8e8e8; /* Slightly darker gray for the sidebar */
    width: 100%; /* Full height of the viewport */
    display:inline-block;
  }
} 

@media screen and (min-width: 1000px) {
  .sidebar {
    padding: 20px;
    background-color: #e8e8e8; /* Slightly darker gray for the sidebar */
    height: 100%; /* Full height of the viewport */
    box-sizing: border-box; /* Includes padding in the element's total width and height */
    overflow-y: auto; /* Adds scroll to the sidebar if content exceeds screen height */
    display:inline-block;
  }
}