/*
    Name:   Lailee Bowman
    Course: ITWP 1050 
    Assignment: Project 3 - Depeche Mode: Memento Mori
*/

/* root level variables for colors, fonts, and text effects */
:root {
    --pageColor: #151515c6;
    --color1: var(--pageColor);
    --color2: #c70000;
    --color3: #e3b200;

    --text-color: #c3c3c3;
    --text-color2: var(--color2);
    --text-color3: var(--color3);

    --text-shadow-1: 1px 1px 1px #000000;
    --text-shadow-2: 2px 2px 2px #000000;


    --primaryFonts: Arial, Helvetica, sans-serif;
}

/*load decorative webfont before anything tries to use it*/
@font-face {
    font-family: 'Cardo';
    src: url(webfonts/Cardo/Cardo-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* sets base page height and background color */
html {
    height: 100%;
	background-color: black;
}

/* applies default text color to all elements */
* {
    color: var(--text-color);    
}

/* sets width, border, font, and background of body container */
body {
    margin: 3rem auto;
    max-width: 1050px;
    border-radius: 3px;
    border: 25px solid var(--color2);
    box-sizing: border-box;
    font-family: var(--primaryFonts);
    font-size: 1.05em;
    line-height: 1.5;
    background: url(images/bglightsextended.jpg) no-repeat center center fixed;
    background-size: cover;
    
}
/* inner overlay that places the background image inside the border */
.bg-overlay {
    margin: 0 auto;
    padding: 4rem;
    border-radius: 3px;
    background: url(images/bglightsextended.jpg) no-repeat center center fixed;
    background-size: cover;
    
} 

/* dark content box with border styling */
.black {
    background-color: var(--pageColor);
    margin: 0 auto;
    border-radius: 1px;
    border: 8px solid  var(--color2);
}

/* resets default spacing on all divs */
div {
    margin: 0;
    padding: 0;
}

/* adds horizontal padding for layout spacing */
.side-padding {
    padding: 0 10px;
}

/* large responsive heading style with custom font and color */
.responsive-text {
    font-size: 3rem;
    text-align: center;
    line-height: 1.5;
    color: var(--text-color2);
    font-family: "Cardo", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 2px;
    margin: 20px 0;
    text-shadow: var(--text-shadow-2);

}

/* responsive size adjustments for heading levels */
h2.responsive-text { 
    font-size: 2rem;
}
h3.responsive-text { 
    font-size: 1.8rem;
}
h4.responsive-text {
    font-size: 1.5rem;
    text-align: left;
}

/* paragraph styling for readable body text */
p.responsive-text {
    font-family: var(--primaryFonts);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    text-align: justify;
    text-shadow: var(--text-shadow-1);

}

/* caption text under images */
.image-text {
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
    text-shadow: var(--text-shadow-1);
    font-variant-caps: small-caps;
    letter-spacing: 1px;
}

/* main content wrapper for layout width and spacing */
.container {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px;
}

/* grid layout for the image gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* base styling for gallery images */
.gallery img {
    width: 100%;
    height: auto;
    border: 3px solid var(--color3);
    border-radius: 2px;
    box-shadow: 2px 4px 8px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
}

/* hover effect for gallery images */
.gallery img:hover {
    transform: scale(1.3);
}

/* two column layout for sources section */
.sourceslayout {
    display: grid;
    grid-template-columns: 5fr 3fr;
    grid-template-areas: "a b";
    gap: 30px;
    text-align: left;
    font-size: .85rem;
    text-shadow: var(--text-shadow-1);
}
.a { grid-area: a;}
.b { grid-area: b;}


/* link styling for normal, hover, visited, and active states */
a, a:link, a:visited { 
    text-decoration: underline;
}
a:link, a:hover, a:active { 
    font-weight: bold;
}
a {
    color: var(--text-color);
}
a:link {
    color: var(--text-color);
}
a:visited {
    color: var(--text-color3);
}
a:hover {
    text-decoration: none;
    color: var(--text-color2);
}
a:active {
    text-decoration: underline wavy;
    color: var(--color2);
}

/*footer spacing and text styling */
footer {
    font-family: var(--primaryFonts);
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    color: var(--text-color3);
    font-size: .75rem;
    text-shadow: var(--text-shadow-1);

}

/* responsive layout adjustment for small screens */
@media only all and (max-width: 600px) {

    /* removes border and spacing for mobile layout */
    body {
        border: none;
        margin: 0;
        padding: 0;
    }

    /* centers gallery images and reduces hover effect */
    .gallery img {
    width: 80%;
    margin: 0 auto;
    display: block;
    height: auto;
    border: 3px solid var(--color3);
    border-radius: 2px;
    box-shadow: 2px 4px 8px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
}

    .gallery img:hover {
    transform: scale(1.3);
}
    /* reduces padding for mobile layout */
    .container {
        padding: 0;
    }
    .bg-overlay {
        padding: 15px;
    }
    .black {
        border: 2px solid var(--color2);
    }

    /* stacks sources section into one column */
    .sourceslayout {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "a" "b";
    }

    /* smaller text sizes for mobile readability */
    .responsive-text {
        font-size: 1.5rem;
    }
    h2.responsive-text {
        font-size: 1.3rem;
    }
    h3.responsive-text {
        font-size: 1.25rem;
    }
    h4.responsive-text {
        font-size: 1.2rem;
    }
    p.responsive-text {
        font-size: .85rem;
    }
}