/* Use the border box in calculating all sizes for the content boxes.
   The root applies the box sizing to all pages by defining it in
   root. It is inherited from root by declaring inherit for all
   elements and pseudo-elements. In addition, standardize fonts and
   font size based off the view port.*/

:root {
    box-sizing: border-box;
    font-size: calc(0.5em + 1vw);
    --main-font: Helvetica, Arial, sans-serif;
}

*,
::before,
::after {
   box-sizing: inherit;
}

/* The following should be used for all pages in the application. */

body {
   background-color: PowderBlue ;
   font-family: var(--main-font);
}

/* The lobotomized owl to ensure each item is evenly spaced in the page.
 * In places where items are side-by-side, a top margin of zero may need
 * to be applied to ensure that an extra space does not appear on the
 * second item. */
body * + * {
   margin-top: 0.5em;
}

header {
   border-radius: .5em;
   margin-bottom: .5em;
   text-align: center;
}

/* Handle IE bug where main is defaulted to inline rather then block */
main {
    display: block;
}

/* Specify the max size of the container that holds the main content. Also,
 * auto left and righ margins will grow to fill the available space,
 * centering the element within the outer container.
 */
.container {
   margin: 0 auto;
}

/* Define the navigation menu for all the pages associated with this web
 * site.
 */

.site-nav {
   display: flex;
   flex-wrap: wrap;
   padding: .5em;
   background-color: #5f4b44;
   list-style-type: none;
   border-radius: .2em;
}

.site-nav > li {        /* all descendents of site-nave have top margin */
   margin-top: 0;
}

.site-nav > li > a {    /* the link is in the entire button */
   display: block;
   padding: .5em .5em;
   background-color: #fff9c4;
   color: black;
   text-decoration: none;
   margin-bottom: 0.25em;
}

.site-nav > li + li {   /* all but the left button has spaces */
   margin-left: 1em;
}

img {
   max-width: 100%;
}

.media {
   float: left;
   padding: 0.5em 1.5em;
   border-radius: 0.5em;
}

/* The clearfix for main handles the situation where floating items
 * misalign and drop to the next line rather then place side by side
 */
.clearfix::before,
.clearfix::after {
   display: table;
   content: " ";
}

.clearfix::after {
   clear: both;
}

.events {
    display: grid;
    grid-template-columns: auto auto;
    content: "";
    gap: 0.25rem;
}

.events > .event-date, .event-location{
    margin-top: 0;
}


.event-date, .event-location {
    padding: .5rem;
    border: solid 1px black;
}

footer {
   display: block;
}

.footer > p{
   text-align: center;
   font-size: 0.75rem;
   font-style: italic;
}