body {
      background-image: url('../images/floor-boards_sqr2.png');
      background-repeat: repeat;
}

/* Lighten & darken colors */
.color-light {
    filter: brightness(107%);
}

.color-dark {
    filter: brightness(85%);
}

/* LINKS =============================================== */

/* unvisited link */
a:link {
      color: #111111;
      font-style: italic;
      font-size: 12px;
      text-decoration: none;
}

/* visited link */
a:visited {
      color: #111111;
      text-decoration: none;
}

/* mouse over link */
a:hover {
      color: #6e8692;
      text-decoration: none;
}

/* selected link */
a:active {
      color: #111111;
      text-decoration: none;
}

/* Second color */
a.secondary-link:link {
  color: #dddddd;
}

a.secondary-link:visited {
  color: #dddddd;
}

a.secondary-link:hover {
  color: #6e8692;
}

/* PAGE HEADER ========================================= */

/* Background Image (logo) ========= stucko bkgnd > background-color: aliceblue; background-color: aliceblue; */
.bkgimg {
      background-color: #eee;
      background-repeat: repeat;
      border-radius: 10px 10px 0px 0px;
      opacity: 0.9;
}

/* Song Links (above admin links) == */
.songlnks {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 5px;
      font-size: 19px;
      text-decoration: none;
}

/* Top Links (admin dev) =========== */
.toplnks {
      display: flex; align-items: center;
      justify-content: center;
      text-decoration: none;
      margin-top: 6px;
}

/* Top Message (under top links) === */
.topmsg {
      display: flex; align-items: center; justify-content: center;
      background-color: #eee;
      border-radius: 0px 0px 10px 10px;
      opacity: 0.9;
}

/* Form Message Div: =============== */
.messagebox {
      height: 16px;
      font-size: 12px;
      padding-bottom: 6px
}


/* Page Title (performers name) auto adjust so the name doesn't wrap to a new line === */
.title {
  white-space: nowrap;
  font-size: clamp(24px, 15vw, 44px);
}

/* Top Center 3 Boxes ================================================== */
.center-wrapper {
  max-width: 420px;   /* or whatever looks right */
  width: 100%;
  margin: 0 auto;              /* Centers the wrapper horizontally */
  display: flex;               /* Puts boxes in a row */
  justify-content: space-around; /* Even spacing between boxes */
  align-items: center;         /* Vertically centers if they have height */
  text-align: center;
}


/* FORMS =============================================== */

/* Form Divs: */
frm {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
}
/* Form Boxes: */

input[type=text] {
      width: 220px;
      padding: 4px 4px;
      margin: 4px 0;
      box-sizing: border-box;
      background-color : #d1d1d1;
      border-radius: 6px;
    }
input[type=password] {
      display: block;
      width: 220px;
      padding: 4px 4px;
      margin: 4px 0;
      box-sizing: border-box;
      background-color : #d1d1d1;
      border-radius: 6px;
    }

input[type=email] {
      width: 220px;
      padding: 4px 4px;
      margin: 4px 0;
      box-sizing: border-box;
      background-color : #d1d1d1;
      border-radius: 6px;
    }
input[type="file"]::file-selector-button {
      display: block;
      width: 220px;
      padding: 4px 6px;
      margin: 4px 0;
      box-sizing: border-box;
      border-radius: 6px;
      text-align: left;
      color: white;
      background-color: #556dd2;
      border: none;
}
textarea {
      width: 220px;
      padding: 4px 4px;
      margin: 4px 0;
      box-sizing: border-box;
      background-color : #d1d1d1;
      border-radius: 6px;
    }
.slct {
      width: 220px;
      padding: 4px 4px;
      margin: 4px 0;
      box-sizing: border-box;
      border-radius: 6px;
      color: white;
      background-color: #556dd2;
      border: none;
    }
.slct2 {
      width: 100px;
      padding: 4px 4px;
      margin-left: 2px;
      box-sizing: border-box;
      border-radius: 6px;
      color: white;
      background-color: #556dd2;
      border: none;
    }

.slct3 {
      width: 47px;
      height:30px;
      font-size: 14px;
      color: white;
      background-color: #556dd2;
      border: none;
      border-radius: 6px;"
    }

/* Invisible Form Box: */
.confirm {
      padding-left: 96px;
      opacity: 0;
}

/* BUTTONS ============================================= */

/* Form Button: */
.button {
      color: #ffffff;
      background-color: #111111;
      font-size: 13px;
      border-radius: 3px;
      border: 0px;
      margin-top: 4px;
      padding: 4px;
    }

.button:hover {
      background-color: #333333;
    }

/* Form Button 2: */
.button2 {
      color: #ffffff;
      background-color: #555555;
      font-size: 13px;
      border-radius: 3px;
      border: 0px;
      margin-top: 4px;
      padding: 4px;
    }

.button2:hover {
      background-color: #333333;
}

/* Form Button 3: */
.button3 {
      color: #ffffff;
      background-color: #750000;
      font-size: 13px;
      border-radius: 3px;
      border: 0px;
      margin-top: 4px;
      padding: 4px 8px 4px 8px;
    }

.button3:hover {
      background-color: #3e1617;
}

/* Form Button 4: */
.button4 {
      color: #ffffff;
      background-color: black;
      font-size: 11px;
      border-radius: 3px;
      border: 0px;
      padding: 4px;
      margin: 10px 0px 6px 0px;
    }

.button4:hover {
      background-color: grey;
}

/* VARIOUS ============================================= */

/* Opacity w/o affecting text */
.opacity {
    background: rgba(222, 222, 222, 0.3);
}

.opacity2 {
    background: rgba(205, 205, 205, 0.5);
}

/* DIV Padding: */
.pad {
      padding: 1px 1px 4px 10px; 
}

/* Footer: ============================================= */
.foot {
      text-align:center;
      font-size: 11px;
}

.icon-wrapper {
background-repeat: repeat-x;    /* repeat horizontally only */
  width: 100%;             /* full width container */
  height: 40px;            /* same as image height */
  margin: 15px 0px 15px 0px;
  display: flex;           /* use flexbox to center */
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  overflow: hidden;        /* hide any part that exceeds container */
}

.icon {
  height: 66px;
  width: auto;             /* keep aspect ratio */
}

/* Payment boxes: ============================================= */
.cashapp {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  font-size: 21px;
  color: #ffffff;
  background: linear-gradient(to bottom, #00D632, #18752b);
  border-radius: 10px;
  transition: filter 0.3s ease;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cashapp:hover {
  filter: brightness(1.3);
}

.venmo {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  font-size: 21px;
  color: #ffffff;
  background: linear-gradient(to bottom, #3D63F6, #243DBF);
  border-radius: 10px;
  transition: filter 0.3s ease;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.venmo:hover {
  filter: brightness(1.3);
}

.paypal {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  font-size: 21px;
  color: #ffffff;
  background: linear-gradient(to bottom, #34478F, #232E5F);
  border-radius: 10px;
  transition: filter 0.3s ease;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.paypal:hover {
  filter: brightness(1.3);
}

/* Zelle Bank Buttons */
.image-row {
  display: flex;
  justify-content: center;     /* center the whole row */
  align-items: center;         /* vertically align */
  gap: 22px;                   /* 10px spacing between images */
  flex-wrap: wrap;             /* wrap if screen too narrow */
  margin: 20px auto;           /* center container on page */
}

.image-row img {
  width: 46px;
  height: 46px;
  object-fit: cover;           /* ensures image fills box nicely */
  border-radius: 6px;          /* optional rounded corners */
}

/* Mail Slider Switch: ============================================= */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #666;
  transition: .2s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #5cb85c;
}
input:checked + .slider:before {
  transform: translateX(22px);
}

/* =================================================================== */

/* 
@media only screen and (max-width: 600px) {
  a:link {
    font-size: 16px;
  }
*/