/*CSS reset*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*defining variables*/
:root {
  --background-color-header: rgb(52, 58, 64, 0);
  --background-color-hover: rgba(238, 120, 66, 0.822);
  --background-color-sections: rgba(238, 120, 66, 0.822);

  --text-color-main: black;
  --text-color-header: black;

  --text-font: Roboto, Arial;
}

/* Style the navigation menu */
.topnav-wrapper {
    width:100%;
    background-color: var(--background-color-header,rgb(52, 58, 64));
    overflow: hidden;
    display:flex;
    align-items: center;
    justify-content: center;

    /*position:fixed; always keeping the header on top of the page*/
}

.topnav {
    overflow: hidden;
    position: relative; /*we need to set postion as relative to be able to position things in absolute inside it*/
    width:100%;
    padding:4px;
    margin:6px;
}
  
  /* Hide the links inside the navigation menu (except for logo/home) - for mobile */
.topnav #myLinks {
    display: none;
}
  
  /* Style navigation menu links - ALL the links inside the .topnav div, including the main title */
.topnav a {
    color: var(--text-color-header, white);
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}
  
  /* Style the hamburger menu */
.topnav a.icon {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;

    border: var(--text-color-header) solid 1px;
    border-radius:2px;
}
  
  /* Add a grey background color on mouse-over */
.topnav a:hover {
    background-color:var(--background-color-hover);
    color: var(--text-color-main);
}
  
  /* Style the active link (or home/logo) */
.topnav h1.active > a {
    font-size: 20px;
    color: var(--text-color-header);
    width: min-content;
    white-space: nowrap;  
}

.topnav h1.active > a:hover {
  color: var(--text-color-main);
}


/* Specific breakpoint for the burger menu */
@media only screen and (min-width: 570px) {
    /*changing the burger menu*/
    .topnav #myLinks {
      display : flex ;
    }
  
    .topnav a.icon {
      display:none;
    }
  
   .topnav {
     display: flex ;
     justify-content: space-between;
   }
  }