:root {
  --bg: #0b2447;
  --panel: #1f3050;
  --muted: #cfd8e3;
  --accent: #ff6fa3;
  --max-width: 1100px;
  --gap: 18px;
  --font-sans: "Roboto", Arial, "Helvetica Neue", sans-serif;
}

body {
  margin: 1%;
  font-family: var(--font-sans);
  font-size: 18px;
  color: #333333;
  -webkit-font-smoothing: antialiased;
}

#main{
  padding: 1%;  
}


#mobileHeader{
  background-color: #040219;
}

#main-contents{
  background-color: #ffffff;
}

#breadcrumb{
  padding: 10px;
  background-color: gray;
  font-size: 20px;
  text-decoration: none;
}

#breadcrumb a {
  color: #ffffff;           /* link color */
  text-decoration: none;
}

@media screen and (min-width: 769px) {

  #mobileHeader{
    display:none;
  }

  .fixed-header {
    position: fixed;      /* makes it stay in place */
    top: 0;               /* stick to the top */
    left: 0;
    width: 95%;
    background: #ffffff;  /* background color */
    z-index: 1000;        /* stay above other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px 20px;
  }

  .main-box{
    margin-top: 400px; /* adjust to your header height */
  }

  #section01, #section02, #section03, #section04, #section05, #section06, #section07, #section08, #section09, #section10,
  #section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20,
  #section21, #section22, #section23, #section24, #section25, #section26, #section27, #section28, #section29, #section30,
  #section31, #section32, #section33, #section34, #section35, #section36, #section37, #section38, #section39, #section40    
  {
    scroll-margin-top: 450px; /* height of your fixed header */
  }
}

@media screen and (max-width: 768px) {
  #menu{
    display: none;
  }

  #mobileHeader{
    padding: 10px;
  }

  .fixed-header {
    position: fixed;      /* makes it stay in place */
    top: 0;               /* stick to the top */
    left: 0;
    width: 90%;
    background: #faf7f2;  /* background color */
    z-index: 1000;        /* stay above other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 20px;
  }

  .main-box{
    margin-top: 150px; /* adjust to your header height */
  }

  #section01, #section02, #section03, #section04, #section05, #section06, #section07, #section08, #section09, #section10,
  #section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20,
  #section21, #section22, #section23, #section24, #section25, #section26, #section27, #section28, #section29, #section30,
  #section31, #section32, #section33, #section34, #section35, #section36, #section37, #section38, #section39, #section40    
  {
    scroll-margin-top: 190px; /* height of your fixed header */
  }

  h1{
    font-size: 24px;
  }

}