/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Background #1 — covers entire screen */
body {
    margin: 0;
    padding: 0;
    background-image: url('https://reverbchords.neocities.org/Main%20Background%201.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

/* Background #2 — above body bg but below all content */
.background-layer-2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden; /* ensures image doesn't overflow */
}

.background-layer-2 img {
    position: absolute;
    top: 50%;       /* center vertically */
    left: 50%;      /* center horizontally */
    transform: translate(-50%, -50%); /* center exactly */
    width: 800px;   /* set the exact width you want */
    height: auto;   /* maintain aspect ratio */
    opacity: 1;     /* adjust transparency if needed */
}


/* Normal page content */
.content {
    position: relative;
    z-index: 1; /* keeps text above background #2 */
    padding: 20px;
    color: white;
}