* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: #d9dcd6;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* CSS variable for font colors */
:root {
  --dark: #2a607c;
  --light: lightcyan;

}

.header {
    display: flex;
    justify-content:space-between;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 15px;
    margin-bottom: 0px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: var(--dark);
}

/* create container text block to place over image or background section */
.container {
    display: flex;
    justify-content:space-between;
}

.text-block {
    position:relative;
    background-color: var(--light);
    margin-left: 0px;
    padding-left: 50px;
    padding-right: 10px;
}
h1 {
    color: #2a607c;
    font-size: 46px;
}

.header nav {
    display: flex;
    justify-content: right;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    color: var(--light);
}

.header nav ol {
    list-style-type: none;
}

.header nav ol li {
    display: inline-flex;
    justify-content: right;
    padding-bottom: 5px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    margin-left: 25px;
    color: var(--light);
}

a {
    color: var(--light);
    text-decoration: none;
}

/* use pseudoclass hover over links in menu */
nav a:hover {
  color: #fff;
}

p {
    display: inline-flexbox;
    flex-wrap: wrap;
    font-size: 16px;
    color: var(--dark);
}

.hero {
    height: 200px;
    width: 100%;
    margin-bottom: 25px;
    background-image: url("../images/blurdots.jpg");
    background-size: cover;
    background-position: center;
}


.container-2 {
  position: relative;
}

.text-block-2 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: var(--light);
    padding-left: 30px;
    padding-right: 5px;
}

h2 {
    color: var(--dark);
    font-size: 32px;
}

main {
    /* Turns this element into a flexbox */
    display:flex;
    flex-wrap: wrap;
}

.content {
    flex: 4;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
    padding: 20px;
    margin: 1% auto;
}


.card {
    display: flex;  
    flex-direction: column;
    justify-content:space-evenly; 
    padding: 10px;
}


h3 {
  float: left;
  color: var(--dark);
  font-size: 44px;
  justify-content: right;
}

.container-3 {
  position: relative;
}

/* position titles under images */
.text-block-3 {
    position: static;
    background-color: var(--light);
    padding-left: 2px;
    
}

h4 {
    color: var(--dark);
    font-size: 30px;
}

.nature {
    height: 300px;
    width: 100%;
    border-style: solid;
    border-width: 5px;
    border-color: var(--light);
}

/* use pseudoclass hover effect over an image-link */
a:hover nature {
    fill-opacity: 50%;
}

img {
    float: left;
    height: 150px;
    width: 100%;
    object-fit: cover;
    border-style: solid;
    border-color: var(--light);
    border-width: 5px;
    margin-left: 1%;
    margin-right: 1%;
    opacity: 1;
	  -webkit-transition: .3s ease-in-out;
	  transition: .3s ease-in-out;
  }

/* use pseudoclass hover effect over images */
img:hover {
    opacity: .5;
  }

.row {
    display: flex;
    flex-wrap: wrap;
  }
  
.column {
    flex: 50%;
    padding: 5px;
  }
  
/* to create a vertical line, use a left border */
.vertical-line {
    border-left: 3px solid var(--dark);
    padding-left: 10px;
    margin-left: 330px;
  }

.footer-nav {
  display: flex; 
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 25px;
}

/* formatting for profile picture */
#profile {
    float: left;
    height: 150px;
    width: 150px;
    object-fit: cover; 
    border-style: solid;
    border-color: var(--light);
    border-width: 5px;
}

.footer nav ol {
    list-style-type: none;
}

/* aligning links to the right of photo */
.footer-nav-ol {
  display: inline-flex;
  justify-content: right;
  padding-top: 115px;
  padding-bottom: 5px;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  margin-left: 25px;
  padding-left: 10px;
  color: var(--dark);
  padding-right: 10px; 
  }

/* used mobile-friendly first to adjust for small screen */
@media only screen and (max-width: 600px) {
    .body {
    flex-direction: column
    width: 100%;
    }
}

/* The page is sizing ok for larger screens so I left these commented out */
/* Cards are stacked on top of each other at 768px or smaller */
/* @media screen and (max-width: 768px) {
  .card {
    width: 100%;
  }
  main, nav {
  flex-direction: column;
  }
}

/* 
/* Cards are split into two columns at 992px or smaller */
@media screen and (max-width: 992px) {
    .card {
      /* width: 50%; */
    }
  } */
   */