/*
 * Defaults
 */
body {
    /* remove all margins usually applied to body */
    margin: 0;

    /* for footer */
    min-height: 100vh;

    /* apply Open Sans to all elements */
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

body, html {
    height: 100%;
}

#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
  padding-bottom: 1.5rem;    /* Footer height */
}

/* adds an underline to an element using borders. */
.border-underline {
    /* remove all borders except the bottom one */
    border-top: 0;
    border-left: 0;
    border-right: 0;

    /* set the width of the bottom border to 1px as an "underline" */
    border-bottom: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}


/*
 * Navigation
 */
nav {
    /* use a flexbox to make sure the size of the nav
    resizes based on tthe size of the inner elements */
    display: flex;

    /* color styling */
    background-color: black;
}

nav a {
    /* make sure that each element tries to escape to the left
    of the screen */
    float: left;

    /* ensure text is center aligned */
    text-align: center;
    
    /* remove any form of text decoration */
    text-decoration: none;
 
    /* add 14px of padding to make each element look visually apart */
    padding: 14px;

    /* color styling */
    color: white;
}

/* these css rules only apply when "a" elements in
a nav are hovered */
nav a:hover {
    background-color: blue;
}


/*
 * Background
 */
.background {
    /* do not care about other elements position */
    position: relative;
}

.background h1 {
    /* Remove all margins from the element */
    margin: 0;

    /* Use absolute positioning,
    do not care about other elements position */
    position: absolute;

    /* "Center" the h1 to the outer div (background) */
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);

    /* Add text shadow to improve readability on top of bright images */
/* Code adapted from W3Schools, n.d. */
    text-shadow: 2px 2px 4px #000000;
/* End of adapted code */
}

#bg-image {
    /* location of the background image */
    background-image: url("../img/banner.jpg");

    /* applying the actual blur filter */
    filter: blur(4px);

    /* desired size, fill horizontal width and pad to specify height */
    padding-left: 100%;
    padding-bottom: 400px;

    /* center the image to the center of the display */
    background-position: center;

    /* avoid tiling */
    background-repeat: no-repeat;

    /* zoom the background in to cover the display */
    background-size: cover;

    /* disable overflow */
    overflow: hidden;
}


/*
 * Caption text
 */
.caption-text {
    /* set top margin to space out from the previous element */
    margin-top: 10px;

    /* center the text */
    text-align: center;

    /* font styling */
    font-weight: 1000;
    font-size: 40px;
}

.caption-text-underline {
    /* underline the text */
    border-style: solid;

}

.caption-text-white {
    /* white text color */
    color: white;
}

.caption-text-black {
    /* black text color */
    color: black;
}

/*
* Footer
*/
#footer {
/* Code adapted from Fraser, 2018. */
    position: absolute;

    /* For text vertical alignment */
    display: flex;
    align-items: center;

    /* Position at the absolute bottom */
    bottom: 0;

    /* Take up full width of the page */
    width: 100%;

    /* Height of footer, padding must match */
    height: 1.5rem;
/* End of adapted code. */

    /* Background color */
    background-color: black;
}

.footer-text {
    /* text color */
    color: white;

    /* text size */
    font-size: 15px;

    /* remove all margins */
    margin: 0;
}