/* Use Arial, a sans-serif font, for all HTML elements
   throughout the web site */
* {
  font-family: Arial;
}

/* Use CSS grid technique to create a responsive page layout
   Not supported by legacy IE users */
.container {
  display: inline-grid;
    grid-template-areas:
        'header'
        'featured'
        'content'
        'right-sidebar'
        'footer';
}

.container > * {
    padding:1rem;
}

/* assign columns to grid areas */
.container > .header {
    grid-area:header;
    //background:#f97171;
}

.container > .featured {
    grid-area:featured;
    background:#fff;
}
.container > .content {
    grid-area:content;
    background:#fff;
}
.container > .right-sidebar {
    grid-area:right-sidebar;
    //background:#f5d55f;
    background:#f97171;
}
.container > .footer {
    grid-area:footer;
    background:#72c2f1;
}

/* tablet breakpoint, forces right side bar to bottom
   of the layout on devices like phones with narrow screens */
@media (min-width:768px) {
    .container {
        grid-template-columns:repeat(3, 1fr);
        grid-template-areas:
            'header header header'
            'featured featured right-sidebar'
            'content content right-sidebar'
            'footer footer footer';
    }
}

.header {
   background-image: url("/assets/pope-leo-header.jpg");
   background-position: center center;
   display: flex; 
  justify-content: space-between;
  color: white;
}

#rss-links > ul {
   list-style-type: none;
   opacity: 0.7;
   background-color: #f97171;
}

#rss-links > ul > li {
   padding: 0.3em;
}

/* ensure any images we use and any images that appear in
   RSS syndicated content are displayed within the desired width
   of the grid layout element */
img, figure {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

/* featured: a <section> above the regular page content used
   to display highlights or special notices */
.featured {
  display: flex;
  flex-wrap: no-wrap;
}

.featured-node {
  padding: 0.2em;
  flex-grow: 1;
}

/* the entry-* classes are used for displaying each entry received
   from an RSS feed */
.entry-node {
  background: #81cfdc;
}

.entry-node > * {
  padding: 0.5em;
}

.entry-author {
  background: #ff0000;
  font-weight: bold;
}

.entry-title {
  font-size: 200%;
}

.entry-author > a {
  color: white;
}

/* the blocks in the sidebar at the right/bottom of the grid */
.sidebar-item {
  padding: 1em;
}

/* the language names, displayed as a grid in the sidebar */
#languages {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#languages > * {
  padding: 0.3rem;
}

/* the footer at the bottom of the page */
.footer {
  text-align: center;
}

/* for HLS and the jekyll-hlsjs video player plugin */
.video-player {
  width: 100%;
  height: auto;
}