/* ITWP-Sebbs/ITWP-1050/Project3/styles.css
   Sebastian Chavez Rivero
   ITWP 1050
   c
   Project 3 - Functionality and Layout */

/* Step 4 - Global Variable */
:root {
    /* Global variable for a primary color, contrasting with a white background */
    --pageColor: #3a3a3a; /* Dark color */
}
    /*Font color - Google font*/
    @font-face {
        font-family: 'Rowdies';
        src: url('webfont/Rowdies-Regular.ttf') format('truetype');
        font-weight: normal; /* Font weight for normal text */
        font-style: normal; /* Font style for normal text */
    @font-face {
        font-family: 'Rowdies';
        src: url('webfont/Rowdies-Bold.ttf') format('truetype');
        font-weight: bold; /* Font weight for bold text */
        font-style: normal; /* Font style for bold text */
    }
    @font-face {
        font-family: 'Rowdies';
        src: url('webfont/Rowdies-light.ttf') format('truetype');
        font-weight: 300; /* Font weight for light text used the value 300 that is lighter than normal */
        font-style: normal; /* Font style for light text */
    }
  }
  /* Section 1.2 - Basic Element Selectors */

body {
    font-family: 'Rowdies', Arial, Helvetica, sans-serif; /* Uses the custom web font first, 
    then fallsback to Arial, Helvetica, or sans-serif */
  
    /* Add margin around the entire body content */
    margin: 3rem;
  
    /* Remove default padding */
    padding: 0;
  
    /* Include padding and border in the element's total width and height */
    box-sizing: border-box;
  
    /* Background image */
    background: url('pictures/background.png') no-repeat center center fixed;
  
    /* Background image to cover the entire container */
    background-size: cover;
  }
  
  h1 {
    /* Font for the heading, using the custom web font */
    font-family: 'Rowdies', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  
    /* Adds a simple text shadow (horizontal offset, vertical offset, blur radius, color) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
  
    /* Centers the heading text */
    text-align: center;
  }

  footer {
    /* Font stack for the footer text */
    font-family: Arial, Helvetica, sans-serif;
  
    /* Center the footer content */
    text-align: center;
  
    /* Set a smaller font size for the footer */
    font-size: 0.75rem; 
  
    /* Add space above and below the footer */
    margin-top: 50px;
    margin-bottom: 50px;
  }

/* Pseudo-Classes for Hyperlinks Step 1.3 */

/*Base style for all anchor tags */
a {
    text-decoration: underline;
    color: var(--pageColor); /* Uses the global variable */
  }
  
  /*Style for unvisited links */
  a:link {
    text-decoration: underline;
    color: var(--pageColor); /* Use the global variable */
    font-weight: bold;
  }
  
  /*Style for visited links */
  a:visited {
    text-decoration: underline;
    color: #555555; /
  }
  
  /*Style when hovering over a link */
  a:hover {
    text-decoration: none; /* Remove underline on hover */
    color: #007bff;
    font-weight: bold;
  }
  
  /*Style when a link is actively being clicked */
  a:active {
    text-decoration: underline wavy #FF0000; 
    color: #007bff; /* Keeps text color same as hover */
    font-weight: bold;
  }


  /* 1.4 Creating Responsive Text */


.responsive-text {
    font-size: 3rem; /* Larger base font size */
    line-height: 1.5;
    color: var(--pageColor); /* Color for readability */
  }
  
  
  p.responsive-text {
    font-size: 1rem; /* Specific font size for these paragraphs */
    line-height: 1.5;
    color: var(--pageColor);
    text-align: justify; /* Justify the text */
  }


  .image-text {
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
    font-family: 'Rowdies', sans-serif; 
  }
  
  /* 4. Media Query for smaller screens */
  @media (max-width: 600px) {

  
    .responsive-text {
      font-size: 1.5rem; 
    }
  }
 
  /*  Grid Layout Code Provided */

.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(o, 0, 0, 0.1) ; 
transition: transform 0.4s ease-in-out;
}
gallery img:hover {
transform: scale (1.3);
}  

/* Footer Style Validation Separation ' | ' */
nav ul li {
    display: inline;
  }
  nav ul li:not(:last-child)::after {
    content: " | ";
    padding: 0 5px;
  }