/* General Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #fff; /* Black background for a band theme */
    color: #fff; /* White text for contrast */
    display: flex;
    padding: 0 0.25rem; /* Add padding for small screens */
    justify-content: center; /* Align content better */
    flex-direction: column; /* Adjust to 'row' if horizontal layout is desired */
}

h1 {
    font-family: "DM Sans", serif;
    font-size: 7rem; /* Large and prominent for main titles */
    line-height: 0.9;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-align:right;
    margin: 0; /* Removes any default margins */
    
}

h1 .small-title {
    font-size: 3.0rem; /* Large and prominent for main titles */
}

h1 .tiny-title {
    font-size: 2.5rem; /* Large and prominent for main titles */
}


h1 span {
    font-size: 3.5rem; /* Large and prominent for main titles */
    line-height: 0.8; /* Consistent line-height */
    display: block; /* Ensure the span stays on its line */
    margin-top: -0.1rem; /* Fine-tune the spacing */
     margin-bottom: -0.1rem; /* Fine-tune the spacing */
}

h2 {
    font-family: "DM Sans", serif;
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 1rem;
    line-height: 0.8; /* Consistent line-height */
    transform: rotate(-0.2deg);
}

h2 span {
   font-size: 2rem; /* Large and prominent for main titles */ 
   margin-top: -0.1rem; /* Fine-tune the spacing */
   margin-bottom: -0.1rem; /* Fine-tune the spacing */
   line-height: 0.6; /* Consistent line-height */

}


h3 {
    font-family: "DM Sans", serif;
    font-size: 3rem; /* Subheadings */
    text-transform: uppercase;
    line-height: 0.8; /* Consistent line-height */
    margin-bottom: 0.25rem;
    margin-top: 2rem;
    
}

h4 {
    font-family: "DM Sans", serif;
    text-transform: uppercase;
    font-size: 2.75rem; /* Smaller subheadings */
}

h4 span {
    font-size: 2rem; /* Large and prominent for main titles */
    line-height: 0.6; /* Consistent line-height */
    display: block; /* Ensure the span stays on its line */
    margin-top: -0.1rem; /* Fine-tune the spacing */
     margin-bottom: -0.1rem; /* Fine-tune the spacing */
}


h5 {
    font-family: "DM Sans", serif;
    font-size: 2.5rem; /* Minor titles or section labels */
}

h6 {
    font-family: "DM Sans", serif;
    font-size: 1.25rem; /* Smallest heading size */

}

a {
    color: #800080;
}

img {
    filter: grayscale(50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Intense shadow for depth */
    transform: rotate(-3deg);
}

.img100{
    width:100%;
    margin-bottom:1rem;
}

hr {
    border: 0;
    margin: 1rem 0;
    width: 100%;
    opacity:1;
    height: 1px;
    background: linear-gradient(to right, transparent, #000, transparent);
}

hr.light {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #999, transparent);
  margin: 20px 0;
}

dl {
  display: grid;
  grid-template-columns: 1fr 2fr; 
  gap: 1rem;
  margin: 0;
  padding: 0;
  margin-top:0.5rem;
}

dt {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

dd {
  font-size: 1em;
  margin: 0;
  line-height: 1.5;
}

article, blockquote{
    background: linear-gradient(145deg, #000, #2c2c2c); /* Subtle gradient */
    color: #719a95; /* White text for dark background */
    /* border: 1rem solid #d0006f; / / Accent border color */
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Intense shadow for depth */
    margin-bottom: 2rem;
    text-align:center;
}

.tour-poster
{
    background-image: url('/media/poiledvl/darren-giving-it-some-the-river-poster.png'); /* Replace with the actual path to your image */
    background-size: contain; /* Cover the entire UL */
    background-repeat: no-repeat;
    background-position: center 5em; /* Position background 3em down from the top */
    background-color: #000;
    transform: rotate(3deg);
    margin-right:0.5rem;
    
}

blockquote p {
    font-family: 'Oswald';
    font-size:1.5rem;
}

blockquote cite {
    font-family: 'Permanent Marker';
    font-size:1.5rem;
    color:#fff;
}

#future-shows article:nth-child(4) {
    transform: rotate(-0.3deg);
}

#future-shows article:nth-child(5) {
    transform: rotate(0.3deg);
}

#future-shows article:nth-child(6) {
    transform: rotate(-0.3deg);
}

#future-shows article:nth-child(7) {
    transform: rotate(-0.1deg);
}



article h4, article h2, article h3 {
    line-height: 1;
    font-family: 'Permanent Marker';
    font-size:2.75rem;
    padding-top: 2rem;
    transform: rotate(-10deg);
    transform-origin: center;
    margin-bottom: 3rem;
    -webkit-text-stroke: 1px black; /* Border thickness and colour */
}

article p {
    font-size:1.25rem; 
    font-weight:bold;
    text-transform: uppercase;
}

article p span {
    color:#fff;
}

article h3 {
   margin-bottom: 20rem;
}

article h4 span, article h2 span, article h3 span
{
   font-size:1.5rem; 
}

article .btn-primary {
    margin-left:1rem;
    margin-bottom:1rem;
    background-color: #fff; 
    color:#000;
    border: none;
}

article ul {
    list-style: none;
}

article ul li {
    font-size:1.25rem; 
    font-family: 'Oswald';
    font-weight:bold;
    color:#fff;
    text-transform: uppercase;
}

article ul li span, article p{
    font-family: 'Oswald';
    color:#719a95;
    text-transform: uppercase;
}

.bg-light{
    background-color:rgba(255, 255, 255, 0.95)  !important;
}


.navbar-brand{
    font-family: "DM Sans", serif;
    font-weight:bold;
    padding-left:1rem;
    font-size: 1.3rem;
    text-transform: uppercase;
}

/* Content Alignment */
main, header {
    padding: 0.5rem;
    color: #000; /* Black text within the content area */
    max-width:1200px;
    margin: auto;
    margin-top:2rem;
    width: 100%;
}

header {
   margin-top:4rem; 
}

/* Footer Styles */
footer {
    margin-top:4rem;
    text-align: center;
    padding: 10px 0;
    max-width:1200px;
    color:#000;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: #800080;
    border-color: #800080;
}
.btn-primary:hover {
    background-color: #4b004b;
    border-color: #4b004b;
}

.card {
    margin-bottom: 0.5rem;
    padding: 1rem;
}

    .list-group-usa {
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 1; /* Ensure the content remains on top */
      margin-bottom:1rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Intense shadow for depth */
      max-width: 850px;
      margin-left: auto;
      margin-right: auto;
    }
    .list-group-usa li {
      padding: 1rem;
      font-size: 1rem;
      padding-left:27%;
      border:none;
      
    }
    .list-group-usa li:nth-child(odd) {
      background-color: #A0222D;
      color: #fff;
    }
    
    .list-group-usa li:nth-child(odd) .btn-secondary {
      background-color: #fff;
      color: #000;
      margin-left:0.5rem;
      margin-bottom:0.5rem;
    }
    
    .list-group-usa li:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.8);
      color: #000;
    }
    
    .list-group-usa li:nth-child(even) .btn-secondary {
      background-color: #A0222D;
      margin-left:0.5rem;
      margin-bottom:0.5rem;
    }
    
     .list-group-usa li:nth-child(-n+3)::after {
      content: "";
      font-size: 3rem;
      color:#fff;
      position: absolute;
      top: 0;
      left: 0;
      width: 25%; /* Adjust width as needed */
      height: 100%;
      background-color: #022946;
      display: flex; /* Enable flexbox for centering */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      text-transform: uppercase; /* Make text uppercase */
      font-family:'Oswald';
      letter-spacing: 3px;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    }
    

.list-group-river .list-group-item {
   background: linear-gradient(145deg, #000, #2c2c2c); /* Subtle gradient */
   font-family: 'Oswald';
   color:#719a95;
   font-size:1.25rem;
}

.list-group-river .list-group-item span {
   color:#fff; 
}
.list-group-river .list-group-item .btn-secondary {
    margin-left:1rem;
    margin-bottom:1rem;
    background-color: #719a95; 
    border: none;
}

.list-group li:nth-child(1)::after {
  content: "Born";
}

.list-group li:nth-child(2)::after {
  content: "In";
}

.list-group li:nth-child(3)::after {
  content: "Leeds";
}

.list-group li:nth-child(3)::after, .list-group li:nth-child(2)::after , .list-group li:nth-child(1)::after  {
  content: ""; 
}


.list-group-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/media/bx4d1es3/darren-rocking-out-cutout.png'); /* Replace with the actual path to your image */
  background-size: contain; /* Cover the entire UL */
  background-repeat: no-repeat;
  background-position: right;
  opacity: 1; /* Adjust opacity for readability */
  z-index: 100; /* Send the image behind the content */
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}



.born-to-run {
    background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.0)), 
                url('../media/bi2not4e/background.jpg') no-repeat top left scroll;
    background-size: contain; /* Scale the image to cover the div */
}

.born-to-run-content {
    margin-top:1.5rem;
    background: none;
}


.borntorun-rear{
        background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.0)), 
        url('../media/e1hhmgam/olycutout.jpg') no-repeat bottom right scroll;
        background-size: contain; /* Scale the image to cover the div */
        padding:1rem;
        padding-right:50%;
}

.borntorun-rear h3{
    font-size: 2.5rem;
    margin-top:0rem;
}


.born-to-run .title {
    background: none;
    margin-bottom:4rem;
}

.born-to-run h2 {
    text-align: right;
    font-size: 3rem;
    line-height: 0.8;
    margin-top:3rem;
    margin-bottom:2rem;
}

.born-to-run section h2 {
    text-align:left;
}

.borntorun-songlist{
    margin-left:4rem;
}

.content-title {
    line-height: 0.8;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom:20px;
}

@media (max-width: 700px) {
    .image-grid {
   grid-template-columns: repeat(1, 1fr);
    }
}

.video {
   transform: rotate(-2deg);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Intense shadow for depth */
}

.image-grid img {
    width: 100%;
    height: auto;
    padding: 0.5rem;
}

.image-grid img:nth-child(1) {
    transform: rotate(-3deg);
}

.image-grid img:nth-child(2) {
    transform: rotate(2deg);
}

.image-grid img:nth-child(3) {
    transform: rotate(-2deg);
}

.image-grid img:nth-child(4) {
    transform: rotate(2.5deg);
}

.image-grid img:nth-child(5) {
    transform: rotate(5deg);
}

.image-grid img:nth-child(6) {
    transform: rotate(1deg);
}

.setlist {
    list-style: none; /* Removes default list styling */
    font-family: 'DM Sans', sans-serif; /* Clean, modern font */
    font-size: 1.2rem;
    font-weight:bold;
}

.card {
    border-radius:3.25rem;
    border: 13px solid rgba(0,0,0,.125);
}

.card-body {
    padding: 0.75rem 1rem;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.5rem;
}

.song {
  position: relative;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

.song .details {
    margin-left:1rem;
}

.song .details h3 {
    margin-top:1rem;
    font-size:2rem;
}

@media (max-width: 1600px) {
    body
    {
        flex-direction: column;
    }
}

@media (max-width: 770px) {

    h1 {
    font-size: 4rem; /* Large and prominent for main titles */
    }
    h1 span {
    font-size: 2rem; /* Large and prominent for main titles */
    line-height: 1; /* Consistent line-height */
    display: block; /* Ensure the span stays on its line */
    margin-top: -0.1rem; /* Fine-tune the spacing */
     margin-bottom: -0.1rem; /* Fine-tune the spacing */
    }
    
    h2 {
    font-size: 2rem;

    }
    h3 {
    font-size: 1.5rem; /* Subheadings */
    }
    p, ul, ol, .card, .setlist, .image-grid, blockquote {
      margin-left: 0px;  
    } 
 
    .born-to-run {
        margin-bottom:1rem;
        background: none;
    }
    
    .borntorun-rear{
        background: none;
        padding:1rem;
        padding-right:1rem;
    }
    
    .born-to-run .title {
        background: none;
        background-size: contain; /* Scale the image to cover the div */
        padding-bottom:1rem;
    }
    
    .born-to-run h2 {
        text-align: right;
        font-size: 1.5rem;
    }
    
    .song:before {
      font-size: 1.5rem;
    }

    .list-group li {
      padding-left:1rem;
    }
    
      
    .list-group::before {
      background-image: none;
    }
    
     .list-group li:nth-child(-n+3)::after {
      position: absolute;
      width: 0%; /* Adjust width as needed */
    }
        
    .list-group li:nth-child(1)::after {
      content: "";
    }
    
    .list-group li:nth-child(2)::after {
      content: "";
    }
    
    .list-group li:nth-child(3)::after {
      content: "";
    }
    
        
    .tour-poster
    {
        transform: rotate(0deg);
    }
    
    
}

@media (max-width: 540px) {
        
    .navbar-brand{
        padding-left:1rem;
        display:none;
    }
    
    
    .tour-poster
    {
        background-position: center 13em; /* Position background 3em down from the top */
        transform: rotate(0deg);

    }
    

    
img, .video {
    transform: rotate(0deg);
}
    
    h1 {
        font-size: 4rem; /* Large and prominent for main titles */
    }
    h1 span {
    font-size: 1.5rem; /* Large and prominent for main titles */
        
    }
    
    
    dl {
      grid-template-columns: 1fr 1fr; 
    }

    .born-to-run {
        margin-bottom:1rem;
        background: none;
    }
    
        .born-to-run h2 {
        text-align: right;
        font-size: 1.25rem;
    }
    
    h2 {
        margin-top: 1rem;
        font-size: 1.75rem;
    }
    
    
    h2 span {
        font-size: 1.5rem; 
    }
    
    h3 {
        font-size: 2rem;
    }
    
    h4 {
        font-size: 1.5rem;
        line-height: 1;
    }
    
    h4 span {
        line-height:1;
    }
    
    .song:before {
      font-size: 2rem;
    }
    
    hr.light {
      background: linear-gradient(to right, transparent, #000, transparent);
    }

}