@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");



@import url("https://fonts.googleapis.com/css2?family=Life+Savers&display=swap");






* {
  box-sizing: border-box;
}

main {
  z-index: -1;
  display: block;
  min-height: 100vh;
}

body {
 
  font-family: 'Life Savers', cursive;
  font-weight: normal;
  font-size: medium;
  width: 100%;
  margin: 0px;
  position: relative;

  background: mintcream;
}

.header_max_width_holder {
  width: 100%;
  max-width: 60rem;
  margin: 0px;
  padding: 0px;
  display: block;
  margin: auto;
}

.main-header {
  font-family: 'Indie Flower', cursive;
  font-weight: bold;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 100%;

  position: relative;
  padding-top: 5px;
  top: 0;
  left: 0;
  background: rgb(71, 71, 71);
  z-index: 2;
  /* browser computed as block by default in web browser since <header> tag is block*/
}

.header_contact_column {
  width: 100%;
  text-align: center;
  display: block;
}

.header_logo_column {
  display: inline-block;
  width: 100%;
}

.header-contact-methods {
  vertical-align: top;
  width: 50%;
  margin: auto;
}

.header-contact-method {
  vertical-align: top;
  width: 100%;

  text-align: left;
}

#header-contact-method__phone {
  font-family: "Times New Roman", Times, serif, Courier, monospace;
  font-weight: bold;
  color: white;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

#header-sds-logo {
  text-align: center;
  padding: 0px;
}

.menu-button {
  display: none;
  background: transparent;
  border: none;
  /* cursor: pointer; */
  vertical-align: middle;
  /* <button> automatically browser computed as in-line block so doesnt
     start new line in block */
}

.header-contact-image {
  vertical-align: middle;
  min-height: 2rem;
}

.header-contact-image_phone {
  vertical-align: middle;
  min-height: 2rem;
  padding-top: 5px;
}

.header-image {
  vertical-align: middle;
  display: inline-block;
  /* can define child as in-line block and the centre image using vertical align */
}
.main-nav__items,
#main-footer__links {
  display: inline-block;
  width: 100%;
  padding: 0px;

  text-align: center;
  text-decoration: none;

  margin: auto;
}

.main-nav__item,
.main-footer__link {
  display: inline-block;
  color: white;
  vertical-align: middle;
  /*note to remove preceding bullet, text decoration has to target <li> tag rather
   than child <a> tag */
}

.main-nav-text {
  color: white;
  text-decoration: none;
  padding-left: 0.3rem;
  padding-right: 0.3rem;

  /* text color has to be defined in child tag containing text (in this case <a> tag,
     not parent <li> */
}

.main-nav-text:hover,
.main-nav-text:active,
.main-footer-text:hover,
.main-footer-text:active,
.menu_select:hover,
.menu_select:active {
  color: rgb(224, 191, 80);
  border-bottom: 5px solid rgb(224, 191, 80);
}

.header-contact-text {
  color: white;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  line-height: 2 rem;
}

.header-contact-text:hover,
.header-contact-text:active {
  color: rgb(224, 191, 80);
}

.main-footer {
  position: absolute;
  width: 100%;
  height: 3rem;
  vertical-align: middle;
  background: rgb(71, 71, 71);
  margin: auto;
  z-index: 3;
}

.main-footer-text {
  color: white;
  font-family: 'Indie Flower', cursive;
  font-weight: bold;
  text-decoration: none;
  padding-left: 0.6rem;
  padding-right: 0.6rem;

  /* text color has to be defined in child tag containing text (in this case <a> tag,
     not parent <li> */
}

.main-footer__links {
  width: 100%;
  min-height: 3rem;
}
.main-footer__link {
  margin: auto;
}

@media (min-width: 40rem) {
  .header_contact_column {
    width: 35%;
    display: inline-block;
    vertical-align: top;
    padding-top: 1rem;
     }

  .header_logo_column {
    display: inline-block;
    width: 60%;
  }

  #header-sds-logo {
    float: right;
  }

  .top_filler {
    height: 0rem ;
  }

  @media (max-height: 40rem) {
    .main-header {
      position: relative;
    }
  }
  .top_filler {
    height: 0rem;
  }

  @media (min-height: 40rem) {
    .main-header {
      position: fixed;
    }

    .top_filler {
      height: 11rem !important;
    }
  }

  @media (max-width: 40rem) {
    .main-header {
      position: relative;
    }

    .top_filler {
      height: 10rem;
    }
  }
}