/* site wide /

/*General Site typography*/

.header-image {
    align-content: center;
    width: 100%;
    text-align: center;
}

.header-image img {
    align-content: center;
    width: 30%;
}

/*styles and colors of commons elements*/

h1 {
    text-align: center;
}

/*
#0444bf
#0584f2
#0AAFF1
#EDF259
#A79674*/
/*this makes the footer stick */
body {
    /* this is for body strucutre to allow footer to work*/
    display: flex;
    flex-direction: column;
    height: 100vh; /* C Coyier uses this to Avoid the IE 10-11 `min-height` bug. */
    /*this is for the actual content of the body */
}

body, main {
    margin-left: 10px;
}

html {
    height: 100%;
}

.sitecontent {
    flex: 1 0 auto;
    padding: 20px;
}

/*I only wanted links to be blue when it wasn't the footer or navbar. Therefore I put in the main section of html5 layout*/

main > a {
    color: #005c7d
}

/*
p {
	font-family: 'Roboto';
	/*I decided to assign font color in vw as opposed to px to allow for responsive text styling. It will now be more accesible to people who need larger font*/
/*
	font-size: 1.5vw;
	
}



h2 {
	color: #7E6A94;
	font-family: 'Maitree';
	text-align: center;
}
.accent {
	background-color: #9A8A6D
}
*/


.subtitle {
    text-align: center;
    font-style: italic;
}

/* I chose greens and slate grays as they represent harmony and freshness and also resemble the colors of a family tree*/

/* before 5 sept .navbar{background-color: #8ea6b8; position: static; color: white;}*/

/*site navigation*/

/*topnav
.navbar {
	background-color: #9cbe30;
color:#9cbe30;
position: static;

}

.navbar a{color: #ffc107;}

.nav-link:active {
	color: antiquewhite;
}
/* I changed toggle color using  code from https://www.codeply.com/go/4FdZGlPMNV. It was amazing to see how SVGs tie in*/
/*
.custom-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-light .navbar-toggler-icon {
	background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}
.custom-toggler.navbar-toggler {
	border-color: rgb(255,
	255,
	255);
	border-top-width: medium;
	border-bottom-width: medium;
	border-right-width: medium;
	border-left-width: medium;
}
.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	content: "";
	background: no-repeat center center;
	background-size: 100% 100%;
}
*/
/*footer*/
/*The footer wouldn't stick to the bottom! Fortunately, CSS tricks had an article on it. As I didn't want to give my footer a height, i chose their flexbox option https://css-tricks.com/couple-takes-sticky-footer/

I used the class .site-footer to do with the positioning of the foooter and the class .footer-container to deal with the actual site footer styling (Colors, text color, text alignment etc. therefore there are 2 classes). The other div I made was .footer-section which divided the footer into 3 columns for me - each with the id of the content i put in it. */

footer {
}

.site-footer {
    flex-shrink: 0;
}

.footer-container {
    background-color: #474d54;
    color: white;
    bottom: 0;
    text-align: center;
    color: white;
}

.footer-container:after {
    content: "";
    display: table;
    clear: both;
}

.footer-section {
    float: left;
}

#copyright {
    width: 25%
}

#about {
    width: 25%
}

/*the footer wasn't stickin ghte bttom. luckily people online helped! https://css-tricks.com/couple-takes-sticky-footer/ */

/*images have difficulty centering in css- this is on eof the opton W3C suggested */
.centreImage {
    text-align: center;
    display: block;
    max-width: 75%;
}