:root {
    /* Images */
    
    /*Put your entire header background image CSS here */
    --header-background: url(/images/ursidayheader.png) center no-repeat; 
    
    /*Hamburger menu icons*/
    --burgericon:url(/images/burger.svg); /* Path to burger vector */
    --closeicon:url(/images/close.svg); /* Path to close vector */
    
    /*Fonts*/
    --body-font: Georgia, serif; /* Body text font */
    --header-font: Georgia, serif; /* Font for headers */
    
    /* Colors */
    /* If you want a transparent background for any element, set the value to none */
    
    --background: rgb(248, 246, 243); /*Main background color*/
    --textcolor: rgb(83, 83, 83); /*Body text color*/
    
    --mainbg: none; /*Content background color*/
    --mainlink: cornflowerblue; /*Content link color*/
    --mainlinkhover: none; /*Content link hover color*/
    
    /*Header text colors*/
    --h1color: #444;
    --h2color: #444;
    --h3color: #444;
    --h4color: #7c2900;
    
    --navbg: ; /*Sidebar background color*/
    --navheader: #444; /*Sidebar header color*/
    --navborder: gray; /*If you don't want a border under the headers in the menu, change this to none*/
    
    --navlink: #8780a8; /*Sidebar link color*/
    --navlinkbg: rgb(248, 246, 243); /*Sidebar link background*/
    --navlinkhover: red; /*Sidebar link hover color*/
    --navlinkbghover: rgb(248, 246, 243); /*Sidebar link hover background*/
    --navcolor: red; /*Color of hamburger menu icon*/
    
    --formbg: #f5f5f5; /*Form element background*/
    --formtext:#666; /*Form element text color*/
    
    --overlay:rgba(255, 255, 255, 0.75); /*Overlay when hamburger menu is open*/
    
}

* { margin: 0; padding: 0; }

body { 
    background: var(--background); 
    color: var(--textcolor);
    font: 1rem var(--body-font); 
}

html {
  scrollbar-gutter: stable;
}

#container { 
    max-width: 1100px;
    padding: 0px;
    margin: auto;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.container content {
    width: 100%;
}

#main-header {
    height: 200px; 
    margin-top: 19px;
    flex:1 0 100%;
    background: var(--header-background);
    background-size: contain;
}

main { 
    padding:15px;
    padding-left:30px;
    background:var(--mainbg);
    flex:1 1 calc(80% - 45px);
    border-left: 1px dashed var(--navborder);
}

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

main a:hover, main a:focus { 
    color: var(--mainlinkhover); 
}

main p {
    margin:.5em 0px .5em 0px;
    line-height:1.5;
}

main h1 {
    font: 2em var(--header-font); 
    color: var(--h1color);
    padding-bottom: 20px;
}

main h2 { 
    font: 1.7em var(--header-font);
    color: var(--h2color);
    padding-bottom: 20px;
}

main h3 { 
    font: 1.4em var(--header-font); 
    color: var(--h3color);
}

main h4 {
    font:0.9em var(--header-font);
    font-style:italic;
    padding-top: 10px;
    padding-bottom: 10px;
}

main img { 
    margin: 0px; 
    max-width:100%;
}

main ul { 
    list-style: inside; 
    list-style-type: none;
}

main ul li ul {
    margin-left:15px;
}

main input, textarea, select { 
    background: var(--formbg); 
    color: var(--formtext); 
    border: 1px solid; 
    font: 1em var(--body-font);
    padding: 5px; 
    margin: 5px;
}

#sidebar {
    flex:1 1 10%;
    position: sticky;
    top: 20px;
    left: 20px;
    height: 100%;

}

.item {
    padding:15px;
    background:var(--navbg);
    margin-bottom:15px;
}

.menu h2 { 
    font: 1.2rem var(--header-font); 
    border-bottom: 1px solid var(--navborder);
    color:var(--navheader);
}

.menu ul {
    list-style:none;
    display:inline;
    margin:0;
}

.menu ul li {
    display:block;
}

.menu a { 
    display: block; 
    text-decoration: none; 
    padding:5px;
    color: var(--navlink);
    background:var(--navlinkbg);
}

.menu a:hover, .menu a:focus { 
    color: var(--navlinkhover);
    background: var(--navlinkbghover);
}

footer {
    background:var(--mainbg);
    padding:15px;
    text-align:center;
    flex: 1 0 calc(100% - 30px);
    font-size: 11px;
}

/* Burger menu styles */

#burger {
    display:none;
    width:100%;
    position:fixed;
    top:0;
}

#burger summary {
    list-style-type: none;
    cursor: pointer;
    display:flex;
    align-items:center;
    color:var(--background);
    padding:5px;
    background: none;
}

#burger summary::before, #burger[open]>summary::before {
    height:40px;
    width:40px;
    background:var(--navcolor);
}

#burger summary::-webkit-details-marker {
    display: none;
}

#burger summary::before {
    content: '';
    mask-image:var(--burgericon);
    -webkit-mask-image:var(--burgericon);
    mask-size:40px;
    -webkit-mask-size:40px;
}

#burger[open]>summary::before {
    content: '';
    mask-image:var(--closeicon);
    -webkit-mask-image:var(--closeicon);
    mask-size:40px;
    -webkit-mask-size:40px;
}

#burger[open] {
    position:fixed;
    background:var(--overlay);
}

.skip a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
}
 
.skip a:focus {
    position:static;
    width:auto;
    height:auto;
}

#burger-menu {
    height:100vh;
    overflow:auto;
    z-index:1000;
    background:var(--navbg);
    width:200px;
}

#burger-menu .item {
    margin:0;
    padding:10px;
}

/* Skip to content button */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--mainbg);
    color:var(--mainlink);
    z-index:1001;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media screen and (max-width:600px) {
    
    main {
        flex-basis:100%;
    }
    
    #sidebar {
        display:none;
    }
    
    #burger {
        display:block;
    }
    
    footer {
        margin-top:0px;
    }

}
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}

.image-gallery li img {
  object-fit: contain;
  width: 100%;
  height: 250px;
  vertical-align: middle;
}

.filterDiv {
  float: left;
  margin: 2px;
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  font: 0.8em var(--body-font);
  border: none;
  outline: 1px solid #8780a8;
  padding: 5px 7px;
  background-color: #d3d0e0;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #fff;
}

/* Add a dark background to the active button */
.btn:active {
  background-color: #8780a8;
  color: white;
}
.btn:focus {
  background-color: #8780a8;
  color: white;
}

#image {
    width: 100%;
}
#image:hover {
    transform: scale(1.75);
}


details summary {
  font: 1.4em var(--header-font); 
  color: var(--h3color);
  padding-top: 10px;
  padding-bottom: 10px;
}

hr {
    background-color: gray;
    border: none;
    height: 1px;
}