/* web fonts from Google Fonts */
.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

.story-script-regular {
  font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* give everything no margin on default */
* {
    margin: 0;
}

/* IDs for different background images */

/* https://www.nme.com/news/music/counting-crows-announce-2025-uk-european-and-north-american-tour-3845174 */
#crows-background-top {
    background-image: url(../assets/CrowsConcert.jpg);
}

/* https://www.nytimes.com/2016/05/03/arts/music/pearl-jam-madison-square-garden.html */
#pearl-background-top {
    background-image: url(../assets/PearlConcert.jpg);
}

/* https://www.visitstaugustine.com/musician/lord-huron */
#huron-background-top {
    background-image: url(../assets/lordhuron_concert.jpg);
}

/* https://www.pexels.com/photo/brown-wooden-floor-with-white-textile-4455990/ */
#music {
    background-image: url(../assets/MusicBGsmall.jpg);
}

/* https://unsplash.com/photos/a-black-background-with-a-white-border-m6OzmW0GrPk */
#reviews {
    background-image: url(../assets/ReviewBGsmall.jpg);
}

/* sets the background image to be the same on the projects page and on the footers for the band pages */
#projects_bg {
    background-image: url(../assets/ProjectsBGsmall.jpg);
}

#cover {
    width: 90%;
    border-radius: 25px;
    margin: 25px;
    max-width: 1200px;
}

/* https://unsplash.com/photos/a-black-and-white-photo-of-a-black-wall-ggvytBO8ru0 */
.projects {
    background-image: url(../assets/ProjectsBGsmall.jpg);
}

/* turn footer links on the band pages white, and cyan on hover */
.projects a {
    color: white;
}

.projects a:hover {
    color: cyan;
}

/* set the size, max-width and padding for the band logos */
#crows_logo {
    width: 90%;
    padding: 10px;
    max-width: 500px;
}

/* change the size of the hamburger menu */
#hamburger {
    font-size: 1.5em;
}

/* centers the New Arrivals section and gives it a border */
#hero_header {
    border: 2.5px solid black;
    text-align: center;
}

/* gives the hero CDs rounded corners and size */
.album,
.album_2 {
    width: 90%;
    border-radius: 20px;
}

/* sets the line height, padding, and alignment for the review text */
.album_text {
    text-align: left;
    padding: 50px;
    line-height: 1.5em;
}

/* turns different text elements white */
.album_text,
.content p,
h2,
figcaption {
    color: white;
}

/* set the grid and sizing for the footer links */
.footer_links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    justify-items: center;
    padding: 25px;
}

/* set the sizing and alignment of the footer logo */
.footer_logo {
    display: grid;
    width: 75px;
    padding: 25px;
    float: left;
    justify-self: center;
}

/* https://stackoverflow.com/questions/35019577/overlay-figcaption-on-img */
/* set the positioning, sizing and alignment of the hero section and elements within it*/
/* give the album images different coloured shadows when they're actively selected or hovered over*/
.hero {
    padding: 20px;
    position: relative;
    text-align: center;
    filter: drop-shadow(15px 15px 15px black);
}

.hero_container section {
    padding-top: 50px;
}

.hero img {
    width: 90%;
    max-width: 500px;
    border-radius: 25px;
}

.hero:hover {
    filter: drop-shadow(15px 15px 15px white);
}

.hero:active {
    filter: drop-shadow(15px 15px 15px blue);
}

/* set the background images' sizes and positions */
.background-container-top,
.background-container-bottom,
#crows-background-top,
#pearl-background-top,
#huron-background-top,
#music,
#reviews, .text_container {
    background-size: cover;
    background-position: center;
}

.background-container-top {
    /* https://www.usatoday.com/gcdn/-mm-/9452fde469c62005d6628293e044ee359952ca3a/c=0-99-1975-1584/local/-/media/2016/07/20/USATODAY/USATODAY/636046215665251051-ore-Jackpot-Rec-John-Cranford-002-rs.jpg */
    background-image: url("../assets/storebackground-600pxw.jpg");
}

.background-container-bottom {
    /* https://unsplash.com/photos/assorted-title-books-on-display-fDW-BoHRMKE */
    background-image: url("../assets/CDBackground.jpg");
}

/* set the sizing, margins and padding for different gallery elements */
.intro_header {
    padding: 10px;
    margin: 30px;
}

.gallery {
    margin-top: 25px;
}

.gallery figcaption {
    margin-bottom: 25px;
}

/* gives the gallery pictures sizing and a border */
.gallery_pic {
    width: 80%;
    border: 5px inset rgb(190, 188, 188);
}

/* hide the large nav menu on mobile displays */
.large_nav {
    display: none;
}

/* give the navs, headers and footers opaque white backgrounds */
.large_nav,
#hero_header,
footer {
    background-color: rgba(255, 255, 255, 0.75);
}

/* sets the sizing and display of the logos */
.logo {
    display: block;
    width: 50px;
    height: 50px;
}

/* set the sizing and look of the horizontal rules */
.content hr {
    border: 2.5px solid white;
    margin: 50px;
    border-radius: 100px;
    max-width: 500px;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* set the font size for secondary headers */
.content h2 {
    font-size: 1.5em;
}

/* gives the small nav menu a 2 column grid with right-aligned text */
.small-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: right;
}

/* set the sizing and padding of text within the text class */
.text {
    padding: 30px;
    max-width: 775px;
    font-size: 0.85em;
}

.text_container {
    /* https://www.rawpixel.com/image/9209197/ripped-notepaper-mockup-psd */
    background-image: url("../assets/notepad-600pxw.png");
}

/* change the look of anchor tags, and turn them blue on hover */
a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: blue;
}

/* center-align body text on default */
body {
    text-align: center;
}

/* take away the padding from the header section */
header {
    padding: 0;
}

/* change the fonts for headers and text elements */
h1, h2 {
    font-family: "Permanent Marker", cursive;
}

a, p, figcaption {
    font-family: "Story Script", sans-serif;
}

/* change the look of iframes including sizing, and applying rounded corners */
iframe {
    width: 90%;
    border-radius: 12px;
    height: 200px;
    border: 0;
}

/* gives the footers a top margin */
footer {
    margin-top: 100px;
}

/* makes spanned text bold */
span {
    font-weight: bold;
}

/* elements changed past the mobile screen size */
@media screen and (min-width: 600px) {

    /* gives certain divs different images based on the screen size */
    /* https://parade.com/news/90s-rock-band-counting-crows-nostalgic-performance-tonight-show-jimmy-fallon */
    #crows-background-top {
        background-image: url(../assets/CrowsConcert2.jpg);
    }

    /* https://torontolife.com/culture/toronto-events-may-2016-pearl-jam-tony-kushner/ */
    #pearl-background-top {
        background-image: url(../assets/PearlConcert2.jpg);
    }

    /* https://www.westword.com/music/review-lord-huron-red-rocks-show-was-historical-fiction-24668290/ */
    #huron-background-top {
        background-image: url(../assets/lordhuron_concert2.webp);
    }

    /* changes the sizes of the logos */
    #crows_logo {
        width: 90%;
        max-width: 925px;
    }

    /* hides the hamburger menu */
    #hamburger {
        display: none;
    }

    /* make the pictures on the review section float the text next to them */
    .album_pic {
        float: left;
    }

    .album_2 {
        float: right;
    }

    /* gives the images larger rounded corners and changes their sizing and padding */
    .album,
    .album_2 {
        width: 90%;
        max-width: 300px;
        padding: 25px;
        border-radius: 50px;
    }

    /* aligns the album text a different line height, sizing and padding */
    .album_text {
        padding: 50px;
        line-height: 1.5em;
        padding-top: 0;
        font-size: 1.25em;
    }

    .background-container-top {
        background-image: url("../assets/storebackground-1024pxw.jpg");
    }

    /* chnages the sizing and margins of footer links, the introduction header and gallery elements */
    .footer_links a {
        margin: 25px;
    }

    .intro_header {
        font-size: 3em;
    }

    .gallery_pic {
        width: 50%;
    }

    .gallery iframe {
        height: 250px;
    }

    /* displays the large navigation menu in a 3 column grid, with a border and justified alignment */
    .large_nav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-items: center;
        border: 2.5px solid black;
    }

    /* changes the sizing of horizontal rules */
    .content hr {
        max-width: 750px;
    }

    /* changes the sizing and padding of different text elements */
    .text, .footer_links {
        line-height: 1.25em;
        padding-left: 100px;
        padding-right: 100px;
        font-size: 1.5em;
    }

    /* changes the background for the intro text */
    .text_container {
        background-image: url("../assets/notepad-1260pxw.png");
        max-width: 975px;
    }

    /* changes the sizing of images in the hero section */
    .hero img {
        width: 88%;
        max-width: 700px;
    }

    /* changes the sizing of headers in the content sections and iframes*/
    .content h2 {
        font-size: 2em;
    }

    iframe {
        height: 500px;
    }

}

/* elements changed once the user hits the desktop screen size */
@media screen and (min-width: 1024px) {

    /* changes the sizing of the logos, album pictures and review text */
    #crows_logo {
        width: 90%;
        max-width: 1200px;
    }

    .album {
        max-width: 500px;
    }

    .album_text {
        font-size: 1.5em;
    }

    /* change the background source image for the header and introduction section */
    .background-container-top {
        background-image: url("../assets/storebackground-original.jpg");
    }

    /* change the introduction section into a grid display with different grid areas given to the header and text */
    .introduction {
        display: grid;
        grid-template-areas:
            "header text"
    }

    /* change the gallery to a three column grid display, and change the sizing of the elements in the gallery */
    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .gallery_pic {
        width: 70%;
    }

    .gallery iframe {
        height: 200px;
    }

    /* changes the sizing of the horizontal rules */
    .content hr {
        max-width: 1250px;
    }

    /* change the sizing of different headers */
    .content h2 {
        font-size: 2.5em;
    }

    /* change the sizing of different headers and text */
    .intro_header {
        font-size: 4em;
        grid-area: header;
    }

    .text, .footer_links {
        font-size: 1.75em;
        line-height: 1.5em;
    }

    /* changes the hero CDs into a two-column grid display */
    .hero_container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* change the sizing and spacing of the hero images and footer links */
    .hero_container img {
        width: 500px;
    }

    .footer_links {
        gap: 25px;
    }

}