/* Global Variables */
:root {
  /* Typography */
  --font-family: Georgia,'Times New Roman', Times, serif;
  --font-size-large: 2em;
  --font-size-h2: 1.5em;
 
  --fw-l: 300; /* Light font weight */
  --fw-b: 500; /* Bold font weight */
  --fs-base: 1em; /* Base font size */

  /* Color */
  --primary-color: #fff; /* dark brown */
  --secondary-color-d: darkred;
  --tertiary-color: #94d2bd;
  --accent-color: red;
  --text-color-d: #000; /* Default text color */
  --text-color-i: #fff; /* Inverted text color */
  --text-color-m: #656464; /* In-between text color */
  --background-color: #f9e6cf; /* Beige */
  --background-card: #fff;
 

  /* Helper */
  --spacer: 1rem;
  --spacer-dbl: calc(var(--spacer) * 2);
  --box-shadow: 0 0 6pc rgba(238, 197, 197, 0.3);
  --img-max: 326px;
  --border-radius: 5px;
  --header-Height: 500px;
  --Max-content-width: 1500px; /* for very large screens */
    
/* I put the grid sizes here for convience in case I like to change the grid items for each screen */
  --card-item-mobile: repeat(1, 1fr);
  --card-item-mid: repeat(2, 1fr);
  --card-item-ml: repeat(3, 1fr);
  --card-item-large: repeat(4, 1fr);
}

/* These variables (--bg-image and --txt-shadow) are scoped within the body element*/
/* Set image as background, default all sizes screeb except mobile */
body { 
    --bg-image: url('../images/headerFriends.jpg') center/cover; 
    --txt-shadow: 2px 2px 2px rgba(0, 0, 0, 5), 4px 4px 4px rgba(0, 0, 0, 20);
  /* Color and Font Settings */
  font-family: var(--font-family);
  color: var(--text-color-d);
  background-color: var(--background-color);
  font-size: var(--fs-base);
  margin: 0 auto;
}


main,aside {
  /* Main Section Styles */
  max-width: var(--Max-content-width);
  margin: 0 auto;
  margin-top: var(--spacer);
    
}




/* Header Styles */
header {
  text-align: center;
  color: var(--text-color-i);
  background: var(--bg-image);
  min-height: var(--header-Height);
  width: 100%;

    padding:20px;
  margin-bottom: var(--spacer);
 
}

header h1, header h2 {
  text-align: center; 
  
  text-shadow: var(--txt-shadow);
}

h1 {
  font-size: var(--font-size-large);
}

h2 {
  font-size: var(--font-size-h2);
  padding-top:var(--spacer);
  padding-bottom: var(--spacer);

}

/* Article and Aside Styles */
article
{
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); 
  margin-bottom: var(--spacer);
  padding: var(--spacer);
  border: solid 1px var(--primary-color);
  background-color: var(--bg_article-color);
  max-width: calc(var(--img-max) * 1.2);
}

/* Heading Styles for Article and Aside */
article h2,
aside h2 {
  text-align: center;
  
}

figcaption {
  text-align: center;
  margin-top: var(--spacer);
}

figure {
  text-align: center;
  margin: 0 auto;
}

/* Paragraph and Image Styles for Article and Aside */
article p,
ul,
aside p {
  padding: var(--spacer) var(--spacer) 0;
}

article img {
  max-width: var(--img-max);
  height: auto;
  align-self: center;
}

aside {
  margin:auto;
  background-color: var(--tertiary-color);
  padding-bottom: var(--spacer);
}
/* Responsive Video Styles */
.video {
  position: relative;
  padding-bottom: 56.25%; /* 270 ÷ 480 */
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ----- BEGIN alternate style section, I created an alternative theme and applied it to the second article and aside.-----*/
/* Attribute Selector Styles */
[class*='style-'] {
  background-color: var(--bg_article-color);
  color: var(--text-color);
}

/* This is a simple invert to set background to darker color and set text to a inverted color  */
.style-invert {
  --bg_article-color: var(--secondary-color-d);
  --text-color: var(--text-color-i);
  border:solid 2px var(--tertiary-color);

}
.style-primary h2 {
 
  color: var(--accent-color);
 

}
/* ----- END alternate style section.-----*/



/* Default Container Property, Mobile-First Approach */
.container {
  display: grid;
  grid-template-columns: var(--card-items);
  align-items: unset;
  justify-items: center;
  grid-gap: var(--spacer);
}
/* Footer Styles */
footer {
  background-color: var(--primary-color);
  color: var(--text-color-d);
  text-align: center;
  padding: var(--spacer);
}
/* special case using scoped variables for mobile screen to enable better header image */
/* The header element redefines --bg_image and --header-Height, adjusting them specifically for mobile screens. 
Additionally, the font-size for header h1 is modified within this scope for smaller screens.*/
@media screen and (min-width: 400px) and (max-width: 800px)
{
    header {
        --bg-image: url('../images/headerFriends-sm.jpg') center/cover;
        --header-Height: 230px;
        
    }
   header h1 {
        font-size: calc(var(--font-size-large) * 0.75);
    }
 
}
/* Responsive Styles for Medium Screens */
@media screen and (min-width: 800px) and (max-width: 1066px) {
  .container {
    --card-items: var(--card-item-mid);
  }
  
}

/* Responsive Styles for Large Screens */
@media screen and (min-width: 1067px) and (max-width: 1549px) {
  .container {
    --card-items: var(--card-item-ml);
  }
  .container > :nth-child(4) {
  grid-column: span 3 / auto;
  margin-left: auto;
  margin-right: auto;
  
}
}

/* Responsive Styles for Very Large Screens */
@media screen and (min-width: 1550px) {
  .container {
    --card-items: var(--card-item-large);

  }
}