body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   box-sizing: border-box;
}
.container {
   position: fixed;
   display: flex;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
   font-family: 'Inter Thin', sans-serif;
}
.sidebar {
   position: fixed;
   top: 0px;
   left: 0px;
   display: flex;
   justify-content: center;
   width: 300px;            
   background-color: lightgray;
   color: black;
   height: calc(100vh - 28px); /* Full viewport height */
   box-sizing: border-box;
   flex-shrink: 0; /* Prevents resizing */
   z-index: 1;
}
.logo {
   position: absolute;
   top: 20px;
   width: 240px; /*80%;*/
   left: 30px;
   height: auto;
   z-index: 2;
}
.sidebar-list {
   position: absolute;
   top: 100px;
   line-height: normal;
   list-style-type: none;
   display: block;
   width: 90%;
   overflow: auto;
}
.sidebar-list li {
   margin-bottom: 20px;
}
.button {
   position: absolute;
   background-color: black;
   color: white;
   padding: 10px 10px;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   width: 70%;
   height: auto;
   display: block;
   bottom: 30px;
   cursor: pointer;
}
.button:hover {
   font-weight: bold;
}
.content {
   position: fixed;
   left: 300px;
   top: 0;
   background-color:white;
   overflow-y: auto; /* Makes this part scrollable */
   width: calc(100% - 300px); 
   height: calc(100vh - 28px); /* Full height minus footer */
   box-sizing: border-box;
   padding-left: 16%;
   padding-right: 16%;   
   padding-bottom: 10%; 
   padding-bottom: 10%; 
}
.popupDialog {
   position: fixed;
   top: 50%;
   left: 50%;
   height: auto;
   width: 50%;
   transform: translate(-50%, -50%);
   background-color: white;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   z-index: 100;
   display: none;
}
.popupDialog-content {
   position: relative;
   top: 20px;
   left: 0;
   width: 100%;
   height: calc(100% - 20px);
   display: block;
   margin: 0 auto;
   padding-bottom: 20px;
   text-align: center;
}
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: lightgrey;
   z-index: 99;
   }
.xSychedPitch {
   font-size: 20px;
   line-height: normal;
   overflow: auto;
}
.heading {
   font-size: 24px;
   line-height: normal;
   overflow: auto;
}
.heading-2 {
   font-size: 20px;
   line-height: normal;
   overflow: auto;
}
.footer {
   position: fixed;
   left: 0px;
   width: 100%; /* Full width minus sidebar */
   height: 28px;
   background-color: lightgray;
   color: white;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 20px;
   text-align: center;
   box-sizing: border-box;
   bottom: 0;
   left: 0;
}
.copyright {
   position: absolute;
   font-size: 12px;            
   line-height: normal;
   top: 5px;
   left: 20px;
   color: black;
}
.privacy {
   position: absolute;
   font-size: 12px;            
   line-height: normal;
   top: 5px;
   right: 20px;
}
.main-list {
   list-style-type: none;
   display: block;
   line-height: normal;
   width: 90%;
   overflow: auto;
   margin-bottom: 20px;
}        
.main-list li {
   margin-bottom: 20px;
}
a {
   color: black;
   background-color: transparent;
   text-decoration: none;
   text-emphasis: none;
}
a:hover {
   color: black;
   background-color: transparent;
   text-decoration: none;
   font-weight: bold;
   cursor: pointer
}
/*
.main-list-item {
   line-height: normal;
}
*/

@media (max-width: 768px) {
   body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      box-sizing: border-box;
  }
  .container {
      position: fixed;
      display: flex;
      height: 100%;
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: 'Inter Thin', sans-serif;
  }
  .sidebar {
      position: fixed;
      top: 0px;
      left: 0px;
      display: flex;
      justify-content: center;
      width: 180px;            
      background-color: lightgray;
      color: black;
      height: calc(100vh - 28px); /* Full viewport height */
      box-sizing: border-box;
      flex-shrink: 0; /* Prevents resizing */
      z-index: 1;
  }
  .logo {
      position: absolute;
      top: 10px;
      left: 18px;
      width: 144px; /*80%;*/
      height: auto;
      z-index: 2;
  }
  .sidebar-list {
      position: absolute;
      top: 100px;
      left: 10px;
      padding-left: 0px;
      line-height: normal;
      list-style-type: none;
      display: block;
      width: 90%;
      overflow: auto;
  }
  .sidebar-list li {
      margin-bottom: 20px;
      left: 0px;
      padding-left: 0px;
  }
  .button {
      position: absolute;
      bottom: 20px;
      left: 10px;
      background-color: black;
      color: white;
      padding: 10px 10px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      width: 80%;
      height: auto;
      display: block;
      cursor: pointer;
   }
   .button:hover {
      font-weight: bold;
   }
  .content {
      position: fixed;
      left: 180px;
      top: 0;
      background-color:white;
      overflow-y: auto; /* Makes this part scrollable */
      width: calc(100% - 200px); 
      height: calc(100vh - 28px); /* Full height minus footer */
      box-sizing: border-box;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 5%; 
      padding-bottom: 5%; 
  }
  .popupDialog {
      position: fixed;
      top: 50%;
      left: 50%;
      height: auto;
      width: 80%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      z-index: 100;
      display: none;
   }
   .popupDialog-content {
      position: relative;
      top: 30px;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
      padding-bottom: 20px;
      text-align: center;
   }
   .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: lightgrey;
      z-index: 99;
      }
  .xSychedPitch {
      font-size: 20px;
      line-height: normal;
      overflow: auto;
  }
  .heading {
      font-size: 24px;
      line-height: normal;
      overflow: auto;
  }
  .heading-2 {
      font-size: 20px;
      line-height: normal;
      overflow: auto;
  }
  .footer {
      position: fixed;
      left: 0px;
      width: 100%; /* Full width minus sidebar */
      height: 28px;
      background-color: lightgray;
      color: white;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 20px;
      text-align: center;
      box-sizing: border-box;
      bottom: 0;
      left: 0;
  }
  .copyright {
      position: absolute;
      font-size: 12px;            
      line-height: normal;
      top: 5px;
      left: 20px;
      color: black;
   }
   .privacy {
      position: absolute;
      font-size: 12px;            
      line-height: normal;
      top: 5px;
      right: 20px
   }
  .main-list {
      list-style-type: none;
      display: block;
      line-height: normal;
      width: 90%;
      overflow: auto;
      margin-bottom: 20px;
  }        
  .main-list li {
      margin-bottom: 20px;
  }
  a {
      color: black;
      background-color: transparent;
      text-decoration: none;
      text-emphasis: none;
   }
   a:hover {
      color: black;
      background-color: transparent;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer
   }
  /*
  .main-list-item {
      line-height: normal;
  }
  */
}