/* Header/logo Title */
.header {
  padding: 50px;
  text-align: center;
  background: #24262b;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background: #24262b;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
}

/* Style the navigation bar links */
.navbar a {
  display: inline-block;
  border: 1px solid red;
  color: white;
  padding: 4px 10px;
  margin: 10px;
  text-decoration: none;
  cursor:pointer;
margin-inline: 10px;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
  background-color: gray;
 
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  float: right;
  background-color: #ff9900;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    color:#eee;
    background-color: #24262b;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 100px;
}
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width: 100%;
    outline: none;
    transition: 0.3s;
}
.sidenav a:hover {
    color: #f1f1f1;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: -100px;
    font-size: 50px;
    margin-left: -100px; 
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;
}
 }

/* Add class to the dropdown button */
.dropdown-btn  {
    display: block;
    font-size: 20px;
    padding: 6px 8px 6px 16px;
    color: #eee;
    text-decoration: none;
    text-align: left;
    border: none;
    background: none;
    transition: 0.3s;
}
/* Add an active class to the active dropdown button */
.dropdown-btn .active {
    background-color: #ff9900;
    color: #eee;
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    display: block;
    border: none;
    width: 100%;
    transition: 0.3s;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    background-color: #686e7d;
    display: none;
}
.dropdown-container a {
    color: #ff9900;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-container a:hover {
    color: #eee;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
    padding: 6px 8px 6px 16px;
}