@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 {
   background-color: #ffffff;
   color: #444;
   font: normal 1em / 1.5  Poppins, arial, helvetica, sans-serif;
   margin: 0;
 }

nav {
   position:sticky;
   top: 0;
   z-index: 2;
   padding: 0.9em;
   background-color:#000;
 }
nav ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0 2em ;
   justify-content: center;
   list-style: none;
   margin: 0;
 }
nav a {
   font-size: 1.2em;
   color: #f39d00;
   text-decoration: none;
 }
nav a:visited {
   color: #e6e4e4;   
 }
nav a:hover {
   color: #ff0;   
 }
nav a:active {
   color: #ff9a02;   
 }

header {
   padding-bottom: 1em;
   background-color: #000;   
 }
h1 {
   margin: 0;
   padding: 2.0rem 8rem 4rem 3rem ;
   font-size: 3.4rem;
   font-weight: normal;
   line-height: 1.2;
   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;
 }
main, footer {
   max-width: 60em;
   padding: 1em 3.5em;
   margin: auto;
 }
.header-one {
   font-size: 1.9em;
   color: #803838;
 }
.header-two {
   margin-bottom: 1em;
   color: #803838;
 }

#legion {
 float: right;
 width: 7em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#legion:hover,
#legion:active {
   transform: scale(3);
 }

#zwicks {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#zwicks:hover,
#zwicks:active {
   transform: scale(3);
 }

#colborne {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#colborne:hover,
#colborne:active {
   transform: scale(3);
 }

#concerts {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#concerts:hover,
#concerts:active {
   transform: scale(3);
 }

#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);
 cursor: pointer;
 transition: 0.5s ease-in-out
}

#bowmanville:hover,
#bowmanville:active {
   transform: scale(3);
 }

#gananoque3 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#gananoque3:hover,
#gananoque3:active {
   transform: scale(3);
 }

#ribfest2025cobourg {
float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
}

#ribfest2025cobourg:hover,
#ribfest2025cobourg:active {
   transform: scale(3);
 }

#ribfest {
 float: right;
 width: 10em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#ribfest:hover,
#ribfest:active {
   transform: scale(3);
 }

#shuffle {
 float: right;
 width: 18em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#shuffle:hover,
#shuffle:active {
   transform: scale(3);
 }

#stirling {
 float: right;
 width: 8em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#stirling:hover,
#stirling:active {
   transform: scale(3);
 }

#apples {
 float: right;
 width: 8em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#apples:hover,
#apples:active {
   transform: scale(3);
 }

#ninebyfour {
 float: right;
 width: 8em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#ninebyfour:hover,
#ninebyfour:active {
   transform: scale(3);
 }

#private2025 {
 float: right;
 width: 12em;
 height: auto;
 margin-right: 1em;
 box-shadow: 0.25em 0.25em 0.254em rgba(0,0,0,0.5);
 cursor: pointer;
 transition: 0.5s ease-in-out;
 }

#private2025:hover,
#private2025:active {
   transform: scale(3);
 }

.gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1em 0;
 }

.gallery2 {
  display: flex;
   justify-content: center;
   margin: auto;
}
figure{
   width: 50%;
   padding: 0.25em;
 }
figure img {
   width: 100%;
 }
hr {
   margin: 3em 0em 0em 0em;
   color: #fff;
 }
p {
   margin: 0;
 }
#first-album {
   padding-bottom: 1em
 }
figcaption {
   padding-top: 0.5em;
 }
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;
  }
/************************************/

#video video {
   display: block;
   width: 30em;
   margin: auto;
 }
#video h3 {
   margin-bottom: 1em;
   text-align: center;
 }
/************* contact **************/
#contact-chris {
   display: flex;
   gap: 1em;
   justify-content: left;
   margin-top: 2em;
 }
#contact-chris > div {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2em;
   max-width: 30em;
   padding: 1em;
   border-radius: 0.35em;
   background-color: #dfdfdf;
 }
/************************************/
#testimonials cite {
   display: block;
   margin-top: 0.5em;
   font-weight: bold;
   text-align: left;
   font-style: normal;
 }
@media ( max-width: 42em ) {
#audio > div {
     flex-direction: column;
     gap: 0.5em;
  }  
 }
@media ( max-width: 37.5em ) {
main, footer {
   max-width: 100%;
   padding: 1em 2em;
  }
#video video {
   width: 100%;
  }
 }
@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 ) {
h1 {
   font-size: 3.25rem;
   text-align: center;
   background-size: calc( 100% - 2rem );
   background-position: center 1rem; 

 }  
main, footer {
   padding: 1em;
  }
}

.table1 {
   width: 45em;
   margin-left: 1.5em;
   text-align: left;
   padding-left: 1.0em; 
   padding-right: 1.0em;
   border: 1px solid #e2e2e2;
   border-radius: 0.35em;}
td {padding-left: 0.5em;}
tr:nth-child(even) {background-color: #f2f2f2; font-family: "Poppins-Regular"; font-size: 1.0em;}
tr:nth-child(odd) {background-color: #fafafa; 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*/