body {
  background-color: #cccccc;
  color: black;
  font-family: "Times New Roman", Times, serif;
}

.background-box {
    background-image: url('moshe.jpg');
    background-repeat: no-repeat;
    background-size: contain; /* Scale the image to fit within the element */
    background-position: center;
    width: 900px; /* Set width for the element */
    height: 1100px; /* Set height for the element */
}

.sidebar-layout {
      display: flex;
      min-height: 100vh;
    }
    .sidebar {
      width: 240px;
      background: #222;
      color: #fff;
      padding: 2rem 1rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      transition: transform 0.3s;
    }
    .sidebar h2 {
      margin: 0 0 1.5rem 0;
      font-size: 1.3rem;
      letter-spacing: 1px;
    }
    .sidebar nav a {
      color: #fff;
      text-decoration: none;
      padding: 0.7rem 1rem;
      border-radius: 4px;
      transition: background 0.2s;
      display: block;
    }
    .sidebar nav a:hover {
      background: #0078d7;
    }
    .sidebar-toggle {
      display: none;
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: #0078d7;
      color: #fff;
      border: none;
      font-size: 2rem;
      border-radius: 4px;
      padding: 0.2rem 0.7rem;
      cursor: pointer;
      z-index: 1001;
    }
    .main-content {
      flex: 1;
      padding: 2rem;
      background: #fff;
      min-width: 0;
    }
    @media (max-width: 800px) {
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 1000;
        box-shadow: 2px 0 16px rgba(0,0,0,0.08);
      }
      .sidebar.open {
        transform: translateX(0);
      }
      .sidebar-toggle {
        display: block;
      }
      .main-content {
        padding: 2rem 1rem;
      }
      body.sidebar-open {
        overflow: hidden;
      }
    }
    @media (min-width: 801px) {
      .sidebar-toggle {
        display: none !important;
      }
    }
    
    
    /*CONTAINER -------------------------------------------------------------------- */
    
#container {

      width: 900px;

      margin: 10px;

      margin-left: auto;

      margin-right: auto;

      padding: 10px;

      font-family: Geneva, Arial, Helvetica, sans-serif;

      font-size: .9em; 

}

#banner {

      padding: 5px;

      background-color: #D5DBE1;

      font-size: 1.1em;

}

#content {

      padding: 10px 10px 10px 170px; /* TRBL; this keeps the text from flowing around the sidebar */

      margin-left: 0px;

      background-color: #EBEBEB; 

}

 

#nav {

      float: left;

      width: 150px;

      margin: 0px;

      padding: 5px;

      background-color: gray;

      font-size: .9em;

}

 

#nav a {

      display: block; /* this makes the link look like a block element - we could give it margins, etc. */

      text-decoration: none;

      color: #FFFFFF;

      background-color: gray;

      margin: 0px;

      padding: 5px;

      width: 140px;

}

 

#nav a:hover {

      background-color: #6699FF;

}

 

#urhere a, #urhere a:hover {

      background-color: #990033;

}

 

#footer {

      clear: both;

      padding: 5px;

      background-color: rgb(213, 219, 225);

      font-size: .7em;

      text-align: center;

}