@font-face {
  font-family: 'Gill Sans';
  src: url('Gill Sans.otf') format('opentype');
}
 body {
  font-family: Gill Sans;
  font-size: 20px;
}
.header {
background-color: #fff;

margin-top:60px;
}
.content {
  position: absolute;
    margin-top:100px;
width:90%;
}
#dave{
  position: absolute;
  top:30px;
left: 15%;
font-size:40px;
}
#menu{
  position: absolute;
  top:20px;
right:10%;
font-size:30px;
}
#headerpic{
  margin-left: 15%;
}
ul {
  list-style-type: none;

}
#menu li{
  float:left;
  color: #232323;
}
#menu li a {
  display: block;
  color: #232323;
  padding: 8px 16px;
  text-decoration: none;
}
p {
  font-size: 22px;
}
/* Change the link col4r on hover */

.footer {
  text-align: center;
  color:#fff;
  width:100%;
    background-color: #232323;
        height: 30px;
padding: 8px;
}
.social-links{
  height:30px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  #dave{
    position: absolute;
  top:20px;
  font-size:24px;
  }




#menu{
visibility:hidden;
}
/* 1. The main mobile wrapper */
.hover {
  position: absolute;
  top: 26px;
  right: 10%;
  font-size: 18px;
  display: block;
  z-index: 9999;       /* Forces the menu to sit on top of everything else */
}

/* 2. Default state: Hide everything except the first "Menu" item when not interacting */
.hover ul {
  list-style-type: none;
  background-color: #fff;
  width: 120px;
  margin: 0;
  padding: 0;
  height: 40px;        /* Matches the height of the first "Menu" link */
  overflow: hidden;    /* Hides the other links by default */

}

/* 3. Interaction state: When clicked/tapped/hovered, expand the UL itself and allow scrolling */
.hover:hover ul,
.hover:active ul,
.hover:focus-within ul {
  height: auto;
  max-height: 210px;   /* Exact boundary forcing the scrollbar to appear */
  overflow-y: auto;    /* Crucial: enables vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
}

/* 4. Reset individual list items */
.hover li {
  width: 100%;
  float: none !important; /* Overrides any global floats */
  display: block;
}

/* 5. Clean, touch-friendly links */
.hover li a {
  display: block !important;
  color: #232323;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 10px 0;     /* Generous hit box for fingers */
  width: 100%;


}

/* 6. Distinguish the top "Menu" bar */
.hover li:first-child a {
  font-weight: bold;
  background-color: #fff; /* Darker yellow indicating it's the toggle */
  position: sticky;          /* Keeps "Menu" visible at the top while scrolling */
  top: 0;
  z-index: 10;
}

#album{
  width:100%;
  height:600px;
  float:left;
}
#flyer{
  width:100%;
  float:left;
}
  .menux {
    height:auto;
    overflow:visible;
  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .header {
    min-height: 140px;

  }
#menu {
  visibility:hidden;
  }
  .menux {
    height:auto;
    overflow:visible;
  }

  #dave{
      top:20px;
  font-size:28px;
  }

.footer {
  position: relative;

    text-align: center;
    color:#fff;
}
#album{
  width:100%;
  float:left;
    height:600px;
}
#flyer{
  width:100%;
  float:left;
}
/* 1. The main mobile wrapper */
.hover {
  position: absolute;
  top: 26px;
  right: 10%;
  font-size: 18px;
  display: block;
  z-index: 9999;       /* Forces the menu to sit on top of everything else */
}

/* 2. Default state: Hide everything except the first "Menu" item when not interacting */
.hover ul {
  list-style-type: none;
  background-color: #fff;
  width: 120px;
  margin: 0;
  padding: 0;
  height: 40px;        /* Matches the height of the first "Menu" link */
  overflow: hidden;    /* Hides the other links by default */

}

/* 3. Interaction state: When clicked/tapped/hovered, expand the UL itself and allow scrolling */
.hover:hover ul,
.hover:active ul,
.hover:focus-within ul {
  height: auto;
  max-height: 210px;   /* Exact boundary forcing the scrollbar to appear */
  overflow-y: auto;    /* Crucial: enables vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
}

/* 4. Reset individual list items */
.hover li {
  width: 100%;
  float: none !important; /* Overrides any global floats */
  display: block;
}

/* 5. Clean, touch-friendly links */
.hover li a {
  display: block !important;
  color: #232323;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 10px 0;     /* Generous hit box for fingers */
  width: 100%;


}

/* 6. Distinguish the top "Menu" bar */
.hover li:first-child a {
  font-weight: bold;
  background-color: #fff; /* Darker yellow indicating it's the toggle */
  position: sticky;          /* Keeps "Menu" visible at the top while scrolling */
  top: 0;
  z-index: 10;
}
}
@media only screen and (min-width: 790px) {

 .menux {
 display: none; /* Hidden by default */
}
#dave{
font-size:24px;
}
#menu{
visibility: visible;
  display:block;
  position: absolute;
  top:0px;
  right:14%;
  font-size:18px;
}
#menu li a {
  visibility: visible;
  display: block;
  color: #232323;
  padding: 5px 8px;
  text-decoration: none;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 940px) {
  H4{
font-size: 24px;
  }

  #dave{
  font-size:28px;
  }
  #menu{
  visibility: visible;
    display:block;
    position: absolute;
    top:0px;
    right:12%;
    font-size:20px;
  }
#menu li a {
    display: block;
    color: #232323;
    padding: 6px 7px;
    text-decoration: none;
  }

  #album{
    width:50%;
    float:left;
    min-height:470px;
  }
  #flyer{
    width:50%;
    float:left;
    min-height:470px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1280px) {
  H4{
font-size: 24px;
  }
  #dave{
  position: absolute;
  top:15px;
  font-size:32px;
  }
  #menu{
    position: absolute;
    top:-5px;
  font-size:24px;
  }

li a {
  display: block;
  color: #232323;
  padding: 6px 10px;
  text-decoration: none;
}
#album{
  width:50%;
  float:left;
  height:600px;
}
#flyer{
  width:50%;
  float:left;
  min-height:600px;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {

#album{
  width:50%;
  float:left;
  min-height:700px;
}
#flyer{
  width:50%;
  float:left;
  min-height:700px;
}
}