/************** Fonts **************/
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }
* {
   box-sizing: border-box;
   margin: 0;
 }

/************** Body **************/
body {
    background-color: #263238; /*original color was E0DED9*/
    color: #263238;
    font: normal 1em / 1.5 Poppins, arial, helvetica, sans-serif;
    margin: 0;
}

/************** Main content panel **************/
main {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.content {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.75rem 3.5rem 2.25rem;
    background-color: #FFFDF8;
    }

/************** Navigation **************/
nav {
   position:sticky;
   top: 0;
   z-index: 2;
   padding: 0.1em;
   background-color:#594638;
 }
nav ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0 5em ;
   justify-content: center;
   list-style: none;
   margin: 0;
 }
nav a {
    display: inline-block;
    padding: 0.35em 0;
    font-size: 1.4em;
    color: #FFF1D6;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25em;
  }

nav a:visited {
    text-decoration: none;
    color: #FFF1D6
}
nav a:hover {
   color: #FFE08A;
   text-decoration-color: currentColor;   
 }
nav a:active {
   color: #FFF1D6;   
 }

/************** Header **************/
header {
   padding-bottom: 0em;
   background-color: #000;
   margin: 0 auto; 
   text-align: center  
 }
h1 {
   margin: 0;
   padding: 2rem 8rem 1rem 1rem ;
   font-size: 3.5rem;
   font-weight: bold;
   font-family: Arial;
   line-height: 1.4;
   color: #f5f5f5; 
   text-align: left;
   background-image: url(../images/homerichard.jpg);     
   background-repeat: no-repeat;
   background-size: 40rem 12rem;
   background-position: calc( 100% - 1rem ) 1rem;
   max-width: 60rem;
   margin: 0 auto;
   }

h2{
   font-weight:normal; font-size: 1.2rem;
 }

footer {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 3.5rem;
    color: #263238;
}
.header-one {
   font-size: 1.6em;
   color: #17324D;
 }
.header-two {
   margin-bottom: 1em;
   color: #803838;
 }

/************** Pictures **************/
#apples {
 float: right;
 width: 8em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#bowmanville {
float: right;
 width: 12em;
margin-top: 0.75em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#brighton2026 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#colborne {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#concerts {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#gananoque3 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#gananoque4 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#legion {
 float: right;
 width: 7em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#legion2026 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#newcastle2026 {
 float: right;
 width: 20em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#newyears2026 {
 float: right;
 width: 18em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#ninebyfour {
 float: right;
 width: 8em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#oshawa2026 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#poster2026 {
 float: left;
 width: 5em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

 #private2025 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#ribfest {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#ribfest2025cobourg {
float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#southside2026 {
 float: right;
 width: 20em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#stirling {
 float: right;
 width: 8em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

 #trenton2026 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#valentine2026 {
 float: right;
 width: 14em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#waterfront26 {
 float: right;
 width: 14em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

#zwicks {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

 #zwicks2026 {
 float: right;
 width: 14em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

 #zwicks2026b {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5); }

/************** Gallery **************/
.gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1em 0;
 }
.gallery2 {
  display: flex;
   justify-content: center;
   margin: auto;
}

/************** Figures and Captions **************/
figure{
   width: 50%;
   padding: 0.25em;
 }
figure img {
   width: 100%;
 }
figcaption {
   padding-top: 0.5em;
 }

/************** Horizontal Rules **************/
hr {
   margin: 2em 0em 0em 0em;
   color: #fff;
 }

/************** Paragraphs **************/
p {
   margin: 0;
   color: #263238
 }
footer{
   text-align: center;
 }
/************** Audio **************/
audio{
   max-width: 16em;
 }
#audio {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }
#audio > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
 #audio > div div {
  line-height: 1;
  }
 #audio cite {
  font-size: 0.9em;
  font-style: normal;
  }
#first-album {
   padding-bottom: 1em
 }

/************** Video **************/
#video video {
   display: block;
   width: 30em;
   margin: auto;
   width: 100%;
 }
#video {
   margin-bottom: 1em;
   text-align: left;
 }

/************* Contact **************/
.contactbarry {
  float: left;
  width: 49%;
  padding: 0px;
 }

 .contactchris {
  width: 49%;
  padding: 0px;
  }

/************** Testimonials **********/
#testimonials cite {
   display: block;
   margin-top: 0.5em;
   font-weight: bold;
   text-align: left;
   font-style: normal;
 }

/************** Media **************/
@media ( max-width: 42em ) {
#audio > div {
     flex-direction: column;
     gap: 0.5em;
  }  
 }
@media ( max-width: 37.5em ) {
.content,
footer {
    max-width: 100%;
    padding: 1em 2em;
}
 }
@media ( max-width: 32em ){
#contact-chris {
    flex-direction: column; 
    align-items: center;
  }
#contact-chris > div,
#contact-chris img {
    width: 100%;
    max-width: 20em;
  }
 }
@media ( max-width: 30em ) {
.content {
    padding: 1em;
}

h1 {
   font-size: 3.25rem;
   text-align: center;
   background-size: calc( 100% - 2rem );
   background-position: center 1rem; 
 }  

/************** Footer **************/
footer {
   padding: 1em;
  }
}

/************** Tables **************/
.table1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 77%; 
  text-align: left;
   padding-left: 1.0em; 
   padding-right: 1.0em;
   border: 1px solid #e2e2e2;
   border-radius: 0.35em;}
td, th{padding-left: 0.5em;
  font-family: "Poppins";
  font-size: 1.0em;
}
tr:nth-child(even) {
    background-color: #F2EEE6;
    font-family: "Poppins-Regular";
    font-size: 1.0em;
}
tr:nth-child(odd) {
    background-color: #FFFDF8;
    font-family: "Poppins-Regular";
    font-size: 1.0em;
}

/*It is more important that you target a range of devices using media queries. Common breakpoints used for media queries:

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV*/