/* Joshua McBrantie
ITWP-1050 
assignment description:
style a gallery page that is responsive and contains 12 image containers that uses the css grid layout. 
*/

/* --------------------------------------------------- */
/* this section sets up variables for the whole document and fonts to be used */
:root {
    --pageColor: rgb(255, 115, 0);
    --accentRed: rgb(255, 60, 0);
    --accentBlue: rgba(0, 162, 255, 0.473);
}
@font-face {
    font-family: roboto-black;
    src: url(/itwp1050/project3/webFonts/Roboto/Roboto-Black.ttf)format('ttf');
    font-weight: 600;
}
@font-face {
    font-family: roboto-reg;
    src: url(/itwp1050/project3/webFonts/Roboto/Roboto-Regular.ttf)format('ttf');
    font-weight: 400;
}

/* --------------------------------------------------- */

body {
    font-family: roboto-reg, Arial, Helvetica, sans-serif;
    margin: 3rem;
    padding: 0;
    box-sizing: border-box;
    background: url(/itwp1050/project3/images/pyro-jump-point-better-quality-v0-7v92o3639lrb1.png) no-repeat center center fixed; /*shorthand setup for background image */
    background-size: cover;

}
h1 { /*sets the location of the title text and adds a font style and a decorative glow to the text. */
    font-family: roboto-black, Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: 4px 4px 6px var(--pageColor);
}

footer { /*sets the location of the footer nav and custom font properties */
    font-family: roboto-reg, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: .75rem;
    margin: 50px 0;
}
/* --------------------------------------------------- */
/* this is a requirement section setting up how different states of the a tag are handled */
a {
    text-decoration: underline;
    color: var(--pageColor);
}

a:link {
    text-decoration: underline;
    color: var(--pageColor);
    font-weight: bold;
}
a:visited {
    text-decoration: underline;
    color: var(--accentBlue);
}
a:hover {
    text-decoration: none;
    color: var(--accentRed);
    font-weight: bold;
}
a:active {
    text-decoration: underline wavy;
    font-weight: bold;
}
/* --------------------------------------------------- */
/*this section handles the larger size of text in the responsive requirement before the media query is used. */
.responsive-text {
    font-size: 3rem;
    line-height: 1.5;
    color: var(--pageColor); /* using a var to call the color from the root */

}

p.responsive-text {
    font-size: 1rem;
    line-height: 1.5;
    color: blanchedalmond;
    text-align: justify;
}

.image-text {
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
    font-family: roboto-black, Arial, Helvetica, sans-serif;
     color: blanchedalmond;/*This was not specified but was needed to fix readability issues */
}
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.gallery { /* this class targets all objects within the div and sets them up in an x,y grid smartly */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}
.gallery img { /*the width and height values set in this manner help with making the images responsive */
    width: 100%; 
    height: auto;
    border-radius: 8px;
    box-shadow: 2px 4px 8px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    border: .15rem solid blanchedalmond; /*added this for clarity on the darker background that fit the theme */
}
.gallery img:hover {
    transform: scale(1.3);/*in conjunction with the transition in gallery img this helps create frames and makes the transition smooth when going to original size image and large on hover image. */
}
@media screen and (max-width: 600px) { /* media query used to setup content changes on different screen sizes using the max-width as the condition */
    .responsive-text { /* targets only this class within the query. */
        font-size: 1.5rem;
    }
}