﻿/* header styles */

.my-header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.my-header {
  position: sticky;
  top: 0;
}

main {
}
#logo {
  max-width: 142px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 10px;
}


.my-header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


.my-header nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}


.my-header nav ul li {
  margin: 0 10px;
}


.my-header nav ul li a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
  padding: 5px 10px;
  border-radius: 5px;
}


.my-header nav ul li a:hover {
  color: white;
  background-color: black;
}

/* media queries */
@media (max-width: 768px) {
  #logo {
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
  }
    @media only screen and (max-width: 767px) {
  .my-header .logo-container {
    float: center;
    width: 100%;
  }
        @media only screen and (max-width: 767px) {
  .my-header {
    display: flex;
    justify-content: space-between;
  }
  .logo-container {
    flex: 0 0 100px;
  }
  nav {
    flex: 1;
  }


 
.my-header nav {
    flex-direction: column;
  }

 
.my-header nav ul {
    flex-direction: column;
    align-items: center;
  }

 
.my-header nav ul li {
    margin: 10px 0;
  }

 
.my-header nav ul li a {
    padding: 10px;
  }

.my-header {
  page-break-after: always;
}

}
