/* Filename: Styles.css used for project3.html
    Made by Alexander Durkin
    ITWP 1050 Online 8-Week Prof. Wanner
    This is the external styles sheet that tells project3.html to do with the images of food. */

/* This is the global varible that is pageColor */
:root {
    --pageColor: #ffffff; /* Makes the page color white (maybe I don't know (Ok, yes I do)) */
    /* This is the font face element it bring in the comic font */
}
@font-face {
    font-family: 'ComicFont';
    src: url(../project3/webfonts/ComicRelief-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'ComicFontBold';
    src: url(../project3/webfonts/ComicRelief-Bold.ttf) format('truetype');
}

body {
    /* This is where the Comic Font is referenced */
    font-family: 'ComicFont', Arial, Helvetica, sans-serif;
    margin: 3rem; /* Adds a margin */
    padding: 0px; /* Padding of 0px */
    box-sizing: border-box; /* Padding and boarder */
    background: url('../project3/images/BackgroundGradient.jpg') no-repeat center center fixed; /* This adds a cool background to the plain website */
    background-size: cover; /* Scales to cover the entire page with the proper viewport */
}

/* This controls heading one */
h1 {
    font-family: 'ComicFontBold', Arial, Helvetica, sans-serif; /* Had the bold variation of ComicFont */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sets the shadow to black and had a 0.5 blur radius */
    text-align: center;
}

/* This is for the footer element */
footer {
    font-family: 'ComicFont', Arial, Helvetica, sans-serif; /* Another font family stack with the ComicFont */
    text-align: center; 
    font-size: 0.75rem; /* Font sizing */
    margin: 50px 0; /* Adds a top & bottom margin of 50 pixels */
}

/* This is for the unvisited link */
a {
    text-decoration: underline;
    color: var(--pageColor);
}
a:link {
    text-decoration: underline; /* Adds a underline */
    color: var(--pageColor); /* Referenced the Root Varible */
    font-weight: bold; /* Sets the font to bold after */
  }
  
/* This is for a visited link */
a:visited {
    text-decoration: underline; /* Adds a underline like the pervious varible */
    color: var(--pageColor); /* Just like up top there */
    color: mediumpurple; /* Sets it to the default color */
}
  
/* This is when the mouse hovers over the link */
a:hover {
    text-decoration: none; /* No text decoration here */
    color: lightpink; /* Sets it to a a cool looking color */
    font-weight: bold; /* Makes the text bold */
}
  
/* This is for the selected link */
a:active {
    text-decoration: underline wavy powderblue; /* I chose blue here */
    font-weight: bold; /* Sets the font to bold */
}

/* Controls the responsiveness of the text */
.responsive-text {
    font-size: 3rem; /* Sets the font size to 3 */
    line-height: 1.5; /* Sets line height */
    color: black; /* Just went with black here it has the best readability */
}
/* For the paragraph elements */
p.responsive-text {
    font-size: 1rem; /* Sets the text size */
    line-height: 1.5; /* Sets the line height */
    color: black; /* I set it to black (I know it's boring) but it has the best readability on the background canvas */
    text-align: justify; /* Aligns text evenly accross the page */
}
/* Contols the image descriptions */
.image-text {
    font-size: 1rem; /* Sets the font size */
    text-align: center;
    margin-top: 20px; /* Sets top margin to 20 pixels */
    font-family: 'ComicFont', Arial, Helvetica, sans-serif; /* Includes my comic font */
}
/* This is the media query adjusts the responsive text if the screen is under 600 pixels */
@media only screen and (max-width: 600px) {
    .responsive-text {
        font-size: 1.5rem;
    }
}
/* Grid layout */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}
.gallery img {
    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;
}
.gallery img:hover {
    transform: scale(1.3);
}