/*nice body-border color combos

antiquewhite - burlywood
peachpuff - tomato
lightpink - crimson
lightblue - cornflowerblue
palegreen - lightseagreen

fonts
bungeeshade
allerta
*/

:root {
  --border-color: tomato;
}

/*Main Stuff*/
body {
  font-size:16px;
  font-family: sans-serif;
  color: maroon;
}
  
  a {
    color: #1B4C8A;
  }

* {
  box-sizing: border-box;
}

#content {
      margin: 2em auto;
      max-width: 80%;
      margin-bottom: 0;
    }

.card{

        border: 2px solid var(--border-color);
        box-shadow:1em 1em 0 #d2d1c8;
        background-color: #fff09d;
        max-width: 600px;
        margin-bottom: 2em;
        flex: auto;
        margin:  0 3em 3em 0;
        align-self: start;

      }

  .card{
    background-color: peachpuff;
  }


  .card:nth-child(even){
    transform: rotate(-1deg);
  }

  .card:nth-child(odd){
    transform: rotate(1deg);
  }

  .card:nth-child(5){
    transform: rotate(2deg);
  }


  .video.box{
    margin-top:3em;
  }

  .bar{
        border: 2px solid var(--border-color);
        box-shadow: 0.6em 0.6em 0 #d2d1c8;
        margin-bottom: 2em;
        margin-top:3em;
        display: inline-block;
        background-color: #fff09d;
      }

.h-feed{
  display: flex;
  flex-flow: row wrap;
  width: 100%;
 
}

/* base header & menu */

#top-menu{
  transform: rotate(-3deg);
  margin-left: 2em;
}

.logo {
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.logo a {
  text-decoration: none;
}

.menu {
  border-top: 2px solid var(--border-color);
  margin: 0px;
  padding: 0px;

}

.menu ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-nav-item {
  border-right: 2px solid var(--border-color);
  padding: 0.5em;
}

/*Article Summary Cards*/

.h-entry{
}

.h-entry header {
  display: flex;
  border-bottom: 2px solid var(--border-color);
}

.h-entry header h2{
  padding: 0.2em;
  margin: 0;
  padding-right: 0.3em;
  padding-left: 0.3em;
  border-right: 2px solid var(--border-color);
}

.h-entry header h2:hover{
    box-shadow: inset 4px 4px 0px tomato;
    cursor: pointer;
}

.h-entry header h2 a {
  text-decoration: none;
  color: var(--border-color);
}


.h-entry header .header-metadata{
  margin: 0;
  padding: 0.5em;
  display: flex;
  flex-flow: column wrap;
  font-size: 0.9em;
  align-content: flex-end;
}

.p-summary.truncated.image {
  display: flex;
  flex-direction: row-reverse;
}

.p-summary.truncated {
  display: flex;
  flex-direction: column;
}

.summary-text {
  flex: 1;
  padding: 1em;
  max-height: 300px;
  min-width: 20ch;
  text-overflow: ellipsis;
  overflow: hidden;
}

.summary-image > img {
    height: 100%;
    object-fit: cover;
    max-width: 100%;

}

.summary-image{
  border-right: 2px solid var(--border-color);
}

footer.post-footer {
  display: flex;
  flex-flow: row-reverse;
}

.footer-filler{
  border-top:  2px solid var(--border-color);
  flex-grow: 1;
}
.read-more {
  border-top: 2px solid var(--border-color);
  border-left: 2px solid var(--border-color);
  align-content: flex-end;
  padding: 0.2em 1em 0.2em 1em;
  font-size: 0.9rem;
}

/* footer */

footer.bar {
  margin-top:0;
}