*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Anaheim, Arial, Helvetica, sans-serif;
  text-decoration: none;
}
body{
  display: flex;
  flex-flow: column;
  min-height: 100vh; 
  /*this works together with setting main{flex:1;} to create the sticky footer*/
}
header{
  background: #544E7A; /*565473, alt colour #544E7A or 68668C*/
  color: #FFFFFF;
  display: flex; 
  align-items: center;
  justify-content: space-evenly;
  text-decoration: none;
  height: fit-content;
}
.navbar-namelogo-div{
  display: flex; /*figured out to make the div for logo+name text have class=header-logo then apply display: flex to the div as WELL as to the header, so the div is a flex item of the header and the img+h1 are flex items of the div flex container*/
  align-items: center;
  padding: 5px;
  padding-top: 10px;
}
.navbar-logo{
  padding-right: 0.2rem;
}
header a{
  color:#FFFFFF;
  font-size: 1.25rem;
}
/*header a:hover{
  background-color: #B0AED1;
}
/*links general*/
  a{
    color:#FFFFFF;
    /* play further another time
    border: 1px solid;
    border-radius: 3px;
    display: inline-block;
    margin: 10px;
    padding: 5px; */
  }
  a:focus{
    outline-style: dotted;
    outline-offset: 0.05rem;
    border-radius: 3px;
  }
  a:visited{

  }
main{
  flex: 1; /*this is what gives the main content flex item the viewport height to push the footer to the bottom if the page content is not longer than the viewport height*/
  display: flex; 
}
#site-under-construction{
  margin:auto;
}
footer{
  align-self: center;
}
/* OK WOOPS LOL I APPLIED THESE TO THE WRONG SELECTOR, but it did generate an interesting design result of displaying the menu on the left as a 1/3rd width column which DID look pretty cool and I'd like to experiment with that for a different design sometime
body{
  display: flex;
  align-self: center;
  min-height: 100vh; 
}*/