/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}





/* Add a black background color to the top navigation */
.topnav {
    background-color: #9c8faa;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 100;
}



/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
top: 110px;
  display: none;
  position: absolute; /* THKELJALKJDK */
  background-color: #4b4b4b;
  right: 0;
  z-index: 99;
  flex-direction: column;
}

.topnav #myLinks a {
    font-size: 18px;
    padding: 25px 5px;
}







/* Style the links inside the navigation bar */
.topnav a {
    justify-content: space-evenly;
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 46px 16px;
    text-decoration: none;
    font-size: 22px;
    display: block;
}

.topnav .nav-links {
    justify-content: space-evenly;
    padding: 0 30px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #603b89;
    color: white;
}

.logo-container {
    padding: 10px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}


main .container{
  margin: 18vh auto;
  padding: 2.5rem;
  background-color: #9c78c4;
  border: black 6px solid;
  border-radius: 50px;
  /* responsive width: use up to 90vw but cap at 900px */
  width: min(90vw, 900px);
  max-width: 100%;
  box-sizing: border-box;
  justify-items: center;
  z-index: 1;
}

.container p {
  text-align: center; padding: 0 5vw; line-height: 2;
}


@font-face {
  font-family: MrDafoe-Regular; /* set name */
  src: url(mr-dafoe/MrDafoe-Regular.ttf); /* url of the font */
    font-weight: 900;
}

.title {
    font-family: MrDafoe-Regular;
    position: relative;
    height: 240px;
    width: 37vw;
    padding-top: 60px;
}

.title h1 {
    position: absolute;
    z-index: 4;
}

.line1 {
    font-size: 4.25em;
    top: 50%;
    left: 50%;
    transform: translate(-360px, -135px);
}

.line2 {
  font-size: 13em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 716px;
}

.line3 {
  font-size: 4.25em;
  top: 50%;
  left: 50%;
  transform: translate(260px, 65px);
}


.line1a {
    font-size: 4.25em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -135px);
}

.line2a {
  font-size: 13em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 463px;
}

.line3a {
  font-size: 4.25em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 65px);
}



.line2b {
  font-size: 11.5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 729px;
}


#hamburger {
    display: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
}



/* Style the hamburger menu */
.topnav a.icon {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
    padding: 30px 16px;
    align-content: center;
    align-items: center;
}

.topnav a.icon:hover {
    background-color: #dddddd00;
    color: black;
}




footer {
  font-family: Arial, sans-serif;
  color: #fff;
}

.footer-content {
  background-color: #1b1d2a;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: 25px 30px;
}

.footer-section {
  margin: 10px;
  min-width: 150px;
}

.footer-section h4 {
  margin-bottom: 10px;
  font-size: 1.1em;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.9em;
}

.footer-section ul li a:hover {
  text-decoration: underline;
}

.brand {
  font-weight: bold;
  font-size: 1em;
}

.social .icons a {
  margin-right: 10px;
  color: #ccc;
  font-size: 1.2em;
  text-decoration: none;
}

.social .icons a:hover {
  color: #fff;
}

.pg1 {
  font-size: 34px;
}

.pg2 {
  font-size: 37px;
  font-weight: bolder;
}

.fun {
  max-width: 500px; 
  position: relative; 
  transform: translate(140px,-60px);
}

.band-container {
  margin: auto;
  display: grid;
  gap: 20px; /* spacing between band-member cards */
}

/* Each band member uses a two-column grid: image (fixed-ish) + info */
.band-member {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: 20px;
  background-color: #ffffff5f;
  border: 2px solid #ccc;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  align-items: center; /* vertically center content within each grid cell */
}

.member-image {
  /* keep a sensible min size while allowing the image column to shrink on small screens */
  min-width: 180px;
  min-height: 150px;
  width: 100%;
  height: 100%;
  background-color: #ddd;
  overflow: hidden;
  position: relative;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-info p {
  margin: 8px 0;
  text-align: left;
  padding: 0;
}

/* Responsive: stack image above info on narrow screens */
@media only screen and (max-width:760px) {
  .band-member {
    grid-template-columns: 1fr;
  }
  .member-image {
    min-height: 180px;
  }
}





input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  background-color: #eef3f9;
  border: 0px solid #4d90fe;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=text]:focus, select:focus, textarea:focus {
  background-color: #ffffff;
  outline: none;
  border: 2px solid #4d90fe;
}

input[type=submit] {
  background-color: #635bff;
  font-weight: bolder;
  border-radius: 100px;
  color: white;
  padding: 6px 20px;
  border: 4px solid #635bff;
  cursor: pointer;
}

button[type=button] {
  background-color: #635bff;
  font-weight: bolder;
  border-radius: 100px;
  color: white;
  padding: 6px 20px;
  border: 4px solid #635bff;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #000000;
  color:rgb(255, 255, 255);
  border: 4px solid #000000;
}

button[type=button]:hover {
  background-color: #000000;
  color:rgb(255, 255, 255);
  border: 4px solid #000000;
}

input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  background-color: #eef3f9;
  border: 0px solid #4d90fe;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=email]:focus, select:focus, textarea:focus {
  background-color: #ffffff;
  outline: none;
  border: 2px solid #4d90fe;
}






.container1 {
  /* responsive container for the contact form */
  width: min(90vw, 680px);
  background-color: #ffffff;
  border-radius: 10px;
  margin: 22vh auto;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 35px #b6b8ba;
}

/* Form grid layout inside the contact container */
.container1 .form-grid {
  display: block;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.form-row label {
  justify-self: start;
  font-weight: 700;
  color: #222;
}

.container1 input[type=text],
.container1 input[type=email],
.container1 textarea {
  width: 100%;
  padding: 10px;
  background-color: #e8f0fe;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-actions {
  text-align: right;
  margin-top: 8px;
}

.muted { color: rgb(116, 116, 116); }

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('your-background.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}


        .photo-album {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 40px 0;
        }
        .album-image-container {
          width: 650px;
          height: 475px;
          overflow: hidden;
          border-radius: 12px;
          box-shadow: 0 4px 16px rgba(0,0,0,0.3);
          margin-bottom: 16px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .album-image-container img {
          width: 100%;
          height: 100%;
          object-fit: contain; /* changed from cover so whole image is visible */
          transition: transform 0.6s cubic-bezier(.4,2,.6,1), opacity 0.6s;
          opacity: 1;
          background-color: #fff; /* shows letterbox area when aspect ratios differ */
        }
        .album-image-container img.animating {
          transform: scale(0.9) rotateY(90deg);
          opacity: 0;
        }
        .album-controls {
          display: flex;
          gap: 16px;
        }
        .album-controls button {
          background: #381c54;
          color: #fff;
          border: none;
          border-radius: 50%;
          width: 44px;
          height: 44px;
          font-size: 1.5rem;
          cursor: pointer;
          transition: background 0.2s;
        }
        .album-controls button:hover {
          background: #5a2d7c;
        }


footer .idk {
   position: absolute;
   top: 90vh;
   width: 100%;
}









@media only screen and (max-width:1024px) {


    .title {
        font-family: MrDafoe-Regular;
        position: relative;
        height: 150px;
        width: 50vw;
    }

    .pg1 {
      font-size: 26px;
    }

    .pg2 {
      font-size: 29px;
      font-weight: bolder;
    }

    .line1 {
        font-size: 3.27em;
        top: 50%;
        left: 50%;
        transform: translate(-285px, -100px);
    }

    .line2 {
      font-size: 10em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 551px;
    }

    .line3 {
      font-size: 3.27em;
      top: 50%;
      left: 50%;
      transform: translate(200px, 55px);
    }

    .line1a {
        font-size: 3.27em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100px);
    }

    .line2a {
      font-size: 10em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 357px;
    }

    .line3a {
      font-size: 3.27em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 55px);
    }

    .line2b {
      font-size: 8.8em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 558px;
    }
    
    main .container{
      min-width: 680px;
    }

    /* make contact form slightly wider on medium screens */
    .container1 { width: min(90vw, 680px); margin: 22vh auto; }

    .nav-links {
        display: none;
    }

    #hamburger {
        display: inline-block;
        order: 2;
    }


    .topnav a.icon {
        display: block;
    }
}



@media only screen and (min-width:1025px) {

    .topnav #myLinks {
        display: none;
    }

    .topnav #myLinks a {
        display: none;
    }    
}



@media only screen and (max-width:760px) {


    .title {
        font-family: MrDafoe-Regular;
        position: relative;
        height: 150px;
        width: 60vw;
    }

    .album-image-container {
      width: 455px;
      height: 332px;
    }
  
    .fun {
      max-width: 420px; 
      position: relative; 
      transform: translate(70px,-40px);
    }

    .pg1 {
      font-size: 21px;
    }
    
    .pg2 {
      font-size: 23px;
      font-weight: bolder;
    }


    .line1 {
        font-size: 3em;
        top: 50%;
        left: 50%;
        transform: translate(-240px, -90px);
    }

    .line2 {
      font-size: 8em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 441px;
    }

    .line3 {
      font-size: 3em;
      top: 50%;
      left: 50%;
      transform: translate(145px, 50px);
    }

    .line1a {
        font-size: 3em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -90px);
    }

    .line2a {
      font-size: 8em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 290px;
    }

    .line3a {
      font-size: 3em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50px);
    }

    .line2b {
      font-size: 7.65em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 485px;
    }
    
    
    main .container{
      min-width: 545px;
    }

    /* stack form into single column on narrow screens */
    .form-row {
      grid-template-columns: 1fr;
    }

    .form-actions { text-align: right; }

}




@media only screen and (max-width:660px) {

    .title {
        font-family: MrDafoe-Regular;
        position: relative;
        height: 115px;
        width: 55vw;
    }


    .album-image-container {
      width: 380px;
      height: 275px;
    }

    .fun {
      max-width: 332px; 
      position: relative; 
      transform: translate(40px,-40px);
    }

    .pg1 {
      font-size: 21px;
    }
    
    .pg2 {
      font-size: 23px;
      font-weight: bolder;
    }


    .line1 {
        font-size: 3em;
        top: 50%;
        left: 50%;
        transform: translate(-190px, -85px);
    }

    .line2 {
      font-size: 6.5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 358px;
    }

    .line3 {
      font-size: 3em;
      top: 50%;
      left: 50%;
      transform: translate(105px, 35px);
    }

    .line1a {
        font-size: 3em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -85px);
    }

    .line2a {
      font-size: 6.5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 227px;
    }

    .line3a {
      font-size: 3em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 35px);
    }
  
    .line2b {
      font-size: 6.1em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 387px;
    }

    main .container{
      min-width: 420px;
    }

    /* tighten contact form spacing for small phones */
    .container1 { width: 94vw; margin: 22vh auto; padding: 14px; }
    .form-row { grid-template-columns: 1fr; gap: 8px; }

}


@media only screen and (max-width:530px) {


    .title {
        font-family: MrDafoe-Regular;
        position: relative;
        height: 80px;
        width: 50vw;
    }


    .album-image-container {
      width: 320px;
      height: 232px;
    }

    .fun {
      max-width: 255px; 
      position: relative; 
      transform: translate(25px,-40px);
    }

    .pg1 {
      font-size: 21px;
    }
    
    .pg2 {
      font-size: 23px;
      font-weight: bolder;
    }


    .line1 {
        font-size: 2.75em;
        top: 50%;
        left: 50%;
        transform: translate(-160px, -70px);
    }

    .line2 {
      font-size: 5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 295px;
    }

    .line3 {
      font-size: 2.75em;
      top: 50%;
      left: 50%;
      transform: translate(50px, 25px);
    }
    

    .line1a {
        font-size: 2.75em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70px);
    }

    .line2a {
      font-size: 5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 181px;
    }

    .line3a {
      font-size: 2.75em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 25px);
    }

    .line2b {
      font-size: 4.75em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 301px;
    }

    main .container{
      min-width: 310px;
    }

    .container1 { width: 96vw; margin: 22vh auto; padding: 12px; }
    .form-row { grid-template-columns: 1fr; }


}



@media only screen and (max-width:411px) {


    .title {
        font-family: MrDafoe-Regular;
        position: relative;
        height: 80px;
        width: 50vw;
    }


    .album-image-container {
      width: 255px;
      height: 185px;
    }

    .fun {
      max-width: 255px; 
      position: relative; 
      transform: translate(25px,-40px);
    }

    .pg1 {
      font-size: 21px;
    }
    
    .pg2 {
      font-size: 23px;
      font-weight: bolder;
    }


    .line1 {
        font-size: 2.5em;
        top: 50%;
        left: 50%;
        transform: translate(-140px, -60px);
    }

    .line2 {
      font-size: 4.5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 250px;
    }

    .line3 {
      font-size: 2.5em;
      top: 50%;
      left: 50%;
      transform: translate(55px, 25px);
    }

    .line1a {
        font-size: 2.5em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60px);
    }

    .line2a {
      font-size: 5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 178px;
    }

    .line3a {
      font-size: 2.5em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 25px);
    }    


    .line2b {
      font-size: 4em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 254px;
    }

    main .container{
      min-width: 285px;
    }

    .container1 { width: 98vw; margin: 22vh auto; padding: 10px; }
    .form-row { grid-template-columns: 1fr; }
}

/* 303px for 344 width */