@charset "utf-8";

#headerContainer {
  display: flex;
  justify-content: flex-start; /* Ensure items are aligned to the start (left) */
}

#siteLogo{
  max-width: 100%; /* Adjust the maximum width */
  max-height: 100%; /* Adjust the maximum height */
}

#siteName {
  padding-left: 20px; /* Adjust the padding as needed */
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 2;
}

/* Media query for tablet*/
@media screen and (min-width: 485px) and (max-width: 959px) {
    #headerContainer {
        flex-direction: row;
        align-items: center;
        padding: 5px;
    }
    #siteLogo {
        width: 50px; /* Set the width to 50px */
        height: 50px; /* Set the height to 50px */
    }
    #siteName p {
        display: none;
    }
}


/* Media query for phones */
@media screen and (max-width: 485px) {
    #headerContainer {
        flex-direction: row;
        align-items: center;
        padding: 5px;
    }
    #siteLogo {
        width: 50px; /* Set the width to 50px */
        height: 50px; /* Set the height to 50px */
        margin-right: 10px; 
    }
    #siteName {
      padding-left: 0px;
    }
    #siteName p {
        display: none;
    }
    #siteName h4 {
        font-size: 0.8rem;
    }
}