/*
    Website.css

    Styles used on all pages in the site
*/


body {
    font-family: var(--text-font-family);
    line-height: 1.5;
}

/*
    List of common website banner sizes https://www.freewebheaders.com/website-header-sizes/
    Forum post on setting the padding to the ratio of the height to the width of the image
    https://generatepress.com/forums/topic/header-same-height-of-background-image/
*/

/*  Using a 1 cell grid to overlap the background image and the header text
*/

header {
    --background-colour: hsl(  var(--colour-1-hue), 
                               var(--colour-1-saturation), 
                               calc( var(--colour-1-lightness) + 12% ) );

    
    padding: 0;
    /* not actually used but needed for Accessiblity checking */
    background-color: var(--background-colour);

    font-family: var(--header-font-family);
}

h1, h2, h3, h4 {
    font-family: var(--header-font-family);
}

#HeaderBackground {
    background-color: var(--background-colour);

    /* Picture was taken by Becky Blue and used with permission */
    background-image: url("../Images/MacLab-1280x267.jpg");
    background-size: cover;
    padding-top: 21%;

    background-blend-mode: multiply;
    /* position: relative; */
    
    
}

#HeaderText {
    color: white;
    padding: 2em;
}


nav {
    text-align: center;
    padding: .8em;
}

nav {
    --navbar-background: var(--colour-4);
    --navbar-text: black;
  
    --navbar-active-background: hsl( var(--colour-4-hue), 
                                    calc( var(--colour-4-saturation) - 40%),
                                    var(--colour-4-lightness) );
    
    --navbar-hover-background: hsl( var(--colour-4-hue), 
                                    calc( var(--colour-4-saturation) - 50%),
                                    calc( var(--colour-4-lightness) - 20%) );
    --navbar-hover-color: white;

    background-color: var(--navbar-background, #333 );

}

  /* Style the links inside the navigation bar */
nav a {
    color: var(--navbar-text, #f2f2f2);
    padding: 0.85em;
    text-align: center;
    text-decoration: none;
    font-size: 1.1em;
}

 /* Add an active class to highlight the current page */
.active {
    background-color: var( --navbar-active-background, #04AA6D );
    color: black;
}

a {
    color: black;
}

footer {
    padding: 2em;

}