/* -------css demo stylesheet-------- */
 
/*
VIVID COLORS
#103464 - darkest blue
#1B57A6 - darker blue
#2A7ABF - medium blue
#365902 - dark earthy green
#F21905 - fire red
#8C0E03 - dark blood red

MUTED COLORS
#E3DFF2 - light gray blue
#9093E2 - periwinkle

*/

:root {
  --body-text: #00008B;
  --body-text-inverse: #e6e5e0;
  --light-bg: #E3DFF2;
  --dark-bg: #103464;
  --dark-bg-opacity: rgba(2, 30, 1, 0.7);
  --standard-padding: 30px;
  --border: #9093E2;
  --light-button: #E3DFF2;
  ---dark-button: #365902;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  img {
    max-width: 100%;
  }

  /*----------Utility Classes------------------*/

  .container {
    padding: 40px;
    margin:auto;
  }

  body {
    background-color: var(--dark-bg);
    font-family: "Lexend Exa", sans-serif;
    color: var(--body-text);
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  main {
    background-color: #fff;
    width:80vw;
    margin: 40px auto;
    border: 10px solid var(--border);
    border-radius:20px;
  }

  header.primary {
    padding: 20px;
    background-image: url("../img/magnolia-blossoms-early-spring.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    border-bottom:3px solid var(--border);
    background-color: var(--border);
    background-blend-mode:hard-light;
  }

  header.primary h1, header.primary h2 {
    margin: 0;
  }
  
  header.primary h1 a {
    color: #fff;
    text-decoration: none;
    font-size: 2.5rem;
    text-shadow: 2px 2px #103464;
  }

  header.primary h2 {
    color:#fff;
    text-shadow: 2px 2px #103464;
    font-size: 1.1rem;
    margin-top: 10px;
  }

  header.primary div.hgroup {
    width: 70%;
  }

  header.primary nav {
    width: 30%;
  }

  header.primary nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }

  header.primary nav ul li {
    margin-bottom: 15px;
  }

  header.primary nav ul li a {
    border:1px solid var(--border);
    border-right:var(--border) solid 10px;
    border-radius: 20px 0;
    color: #fff;
    display: block;
    background-color: var(---dark-button);
    transition: .5s;
    font-size:.9rem;
    text-align: right;
    padding: 10px 10px 10px 0px;
    text-decoration: none;
  }

  header.primary nav a:hover {
    background-color: rgba(54, 89, 2, .7);
  }

 #content {
  line-height:1.2rem;
 }

 #content h2, #content h3, article.widget h2 {
  color: #365902;
  border-left: 7.5px solid #103464;
  padding: 7.5px;
  border-radius: 15px 0px;
 }

 #blog {
  background: #103464;
  padding: 20px 0;
  border-top: 6px double var(--border);
  border-bottom: 6px double var(--border);
 }

 #blog article.post {
  background-color: #fff;
  margin: 20px;
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "figure header"
    "figure post-content"
    "figure footer"
  ;
 }

 #blog article figure {
  grid-area: figure;
  margin: 0 20px 0 0;
 }

 #blog article header {
  grid-area: header;
 }
 
 #blog article.post-content {
  grid-area: post-content;
 }

 #blog article.post-meta {
  grid-area: footer;
 }

 #blog > h2 {
  color: var(--body-text-inverse);
  text-shadow: 0, 0, 0, .8;
  font-size: 2.2rem;
  margin-left
 }

 /*------descendant selector example-----*/

aside .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

#colophon {
  text-align: center;
  background-color: var(--dark-bg);
  background-image: url("../img/magnolia-blossoms-early-spring.jpg");
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 20px;
  text-align: left;
}

#colophon a {
  font-size: .7rem;
  color: var(--body-text-inverse);
}