/*
  JAMES STOREY — PORTFOLIO STYLES

  The regular rules below define the wide-screen design.
  Media queries at the bottom override selected rules at smaller browser widths.
  A dot (.) targets a class; a hash (#) targets an ID.
  Commas let multiple selectors share the same rule.
  Padding creates space inside an element; margin creates space outside it.
  text-align centers text and inline content; automatic left/right margins
  center a block that has a width smaller than its parent.
*/

/* My Hero */
/* Flexbox stacks the name, subtitle, and photo vertically and centers them on the dark blue background. */
.my_hero {
  background-color: #1B3C53;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Styles your name. rem sizes are based on the root font size; 600 is a semibold font weight. */
.hero_name {
  font-size: 2.75rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  padding-top: 40px;
}

/* Styles the line describing your three areas of work. */
.hero_subtitle {
  font-size: 1.75rem;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
}

/* Sets the portrait width, adds space above and below it, and rounds its corners. */
.hero_image {
  width: 200px;
  padding-top: 20px;
  padding-bottom: 40px;
  border-radius: 45%;
}

/* About Me */
/* On wide screens, Flexbox places the paragraphs and coffee image side by side. gap adds space between them. */
.about_content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding-bottom: 20px;
}

/* Sets the desktop width of the box containing both About Me paragraphs. */
.about_row {
  width: 600px;
}

/* Centers the About Me heading across the section and adds space above it. */
.about_h2 {
  font-family: "Barlow", sans-serif;
  font-size: 1.60rem;
  text-align: center;
  width: 100%;
  padding-top: 10px;
}

/* Shared paragraph typography. Every element with this class uses the same font and size. */
.about_me {
  font-family: "Barlow", sans-serif;
  font-size: 1.15rem;
}

/* Sets the coffee image width and rounds its corners. */
.coffee_bean {
  width: 425px;
  border-radius: 15%;
}

/* Skills */
/* Styles the Skills I’m Developing heading. */
.developing {
  font-family: "Barlow", sans-serif;
  font-size: 1.60rem;
}

/* Styles the developing-skills block. The negative top margin moves it upward on wide screens. */
.skills_developing {
  font-family: "Barlow", sans-serif;
  font-size: 1.15rem;
  margin-top: -50px;
}

/* Makes this section a positioning reference for any absolutely positioned descendants. */
.my_skill {
  position: relative;
}

/* Centers the heading box, then shifts it 170px left to align with the two existing-skills columns. The media query removes this shift. */
.skill_h2 {
  font-family: "Barlow", sans-serif;
  font-size: 1.60rem;
  padding-top: 30px;
  width: 600px;
  margin: 0 auto;
  text-align: center;
  transform: translateX(-170px);
}

/* Shared font styling for the two lists of existing skills. */
.skills_columns {
  font-family: "Barlow", sans-serif;
  font-size: 1.15rem;
}

/* Grid makes three content-sized columns. justify-content centers the grid; gap separates its columns. */
.skills_container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 80px;
}

/* Projects */
/* Grid makes two equal columns. max-width limits the overall width; automatic side margins center the grid. Bottom padding separates it from the resume. */
.projects_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  gap: 40px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

/* Targets images inside the web-projects column and gives them a consistent preview size. */
.web_projects img {
  width: 300px;
  border-radius: 10%;
}

/* Sizes the actual video players and rounds their corners. */
.videos {
  width: 300px;
  border-radius: 10%;
}

/* Centers the video headings and players within their column and adds space at its bottom. */
.video_projects {
  text-align: center;
  padding-bottom: 10px;
}

/* Centers the heading, project title, and linked image inside the web-projects column. */
.web_projects {
  text-align: center;
}

/* Centers and styles the My Projects heading above both columns. */
.project_h2 {
  font-family: "Barlow", sans-serif;
  font-size: 1.60rem;
  text-align: center;
}

/* Shared typography for category headings such as Web Development, Video Editing, and Giving Back. */
.web_dev {
  font-family: "Barlow", sans-serif;
  font-size: 1.25rem;
}

/* Shared typography for individual project titles. */
.title_h4 {
  font-family: "Barlow", sans-serif;
  font-size: 1.1rem;
}

/* Resume */
/* Shared typography for the Resume, Goals, and Contact section headings. */
.resume_h2 {
  font-family: "Barlow", sans-serif;
  font-size: 1.60rem;
}

/* Sets the resume preview width and gives it gently rounded corners. */
.resume_corner {
  width: 400px;
  border-radius: 5%;
}

/* Centers the resume heading, paragraph, and linked preview. Bottom padding separates the next section. */
.my_resume {
  text-align: center;
  padding-bottom: 20px;
}

/* Goals */
/* Centers heading text wherever this class is used. */
.my_goal {
  text-align: center;
}

/* The # symbol targets HTML IDs. Both paragraph boxes use 40% of their parent width. Automatic side margins center the boxes; text stays left-aligned. */
#career_goal,
#giving_back {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Body */
/* Removes the browser’s default body margin and sets the page background and inherited text color. */
body {
  margin: 0;
  background-color: #E3E3E3;
  color: #1B3C53;
}

/* Centers the contact content and adds 40px of space inside every edge of the section. */
.contact {
  padding: 40px;
  text-align: center;
}

/* Adds space beneath the contact paragraph before the links. */
.contact_me {
  padding-bottom: 20px;
}

/* Styles links inside Contact as buttons. inline-block allows padding and sizing while keeping them side by side when space permits. Padding is inside each button; margin is outside. */
.contact a {
  display: inline-block;
  background-color: #1B3C53;
  color: #FFFFFF;
  font-family: "Barlow", sans-serif;
  font-size: 1.15rem;
  text-decoration: none;
  padding: 12px 24px;
  margin: 0 30px;
  border-radius: 8px;
}

/* Footer */
/* Styles the footer background and text, centers the copyright, and adds space inside the bar. */
.my_footer {
  background-color: #1B3C53;
  color: #FFFFFF;
  font-family: "Barlow", sans-serif;
  text-align: center;
  padding: 20px;
}

/* Removes the paragraph’s default margins so footer spacing is controlled by the footer padding. */
.my_footer p {
  margin: 0;
}

/*
  MEDIUM AND SMALL SCREENS — 1100px WIDE OR LESS
  @media is a conditional group of CSS rules. max-width refers to the
  browser viewport width, not the image width or physical screen size.
  These rules apply at 1100px and below; the regular rules apply above it.
  This breakpoint stacks About and Skills before those wider layouts get cramped.
*/
@media (max-width: 1100px) {
  /* Switches the About layout from a row to a column, placing the coffee image below the paragraphs. */
  .about_content {
    flex-direction: column;
    gap: 20px;
  }

  /* Uses most of the available width, but caps the paragraphs at 600px for comfortable reading. */
  .about_row {
    width: 90%;
    max-width: 600px;
  }

  /* Allows the image to shrink to fit its container. Automatic height preserves its proportions. */
  .coffee_bean {
    max-width: 90%;
    height: auto;
  }

  /* Stacks all three skills blocks in one column, reduces the gap, and centers the container. */
  .skills_container {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 90%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Removes the fixed heading width and leftward shift so the heading centers on the smaller layout. */
  .skill_h2 {
    width: auto;
    transform: none;
  }

  /* Removes the upward offset because this block now sits below the other skill lists. */
  .skills_developing {
    margin-top: 0;
  }
}

/*
  SMALL SCREENS — 768px WIDE OR LESS
  At this width BOTH media queries apply, because 768px is also below 1100px.
  This block comes last so its rules win when the same selector and property
  appear in both media queries. Each media query has its own closing brace;
  these two blocks are separate, not nested inside one another.
*/
@media (max-width: 768px) {
  /* Centers both hero headings and adds space at their sides so text does not touch the screen edges. */
  .hero_name,
  /* Reduces the subtitle font size so it fits more comfortably on a small screen. */
  .hero_subtitle {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero_subtitle {
    font-size: 1.25rem;
  }

  /* Stacks web and video projects in one column. minmax(0, 1fr) lets the grid track shrink without being forced wider by its content. */
  .projects_grid {
    grid-template-columns: minmax(0, 1fr);
    width: 90%;
  }

  /* Keeps previews and video players within the project column. They retain their existing width unless they need to shrink. */
  .web_projects img,
  .videos {
    max-width: 100%;
    height: auto;
  }

  /* Lets the resume preview shrink to fit the screen while keeping its proportions. */
  .resume_corner {
    max-width: 90%;
    height: auto;
  }

  /* Targets only the paragraph inside the resume section, leaving a little space at both sides. */
  .my_resume .about_me {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Expands both goals paragraphs from 40% to 90% of the available width. Their automatic margins still center them. */
  #career_goal,
  #giving_back {
    width: 90%;
  }

  /* Uses 30px of vertical padding and 20px of horizontal padding to leave more room for content. */
  .contact {
    padding: 30px 20px;
  }

  /* Uses 10px margins on all sides, providing spacing both side by side and when the buttons wrap onto separate lines. */
  .contact a {
    margin: 10px;
  }
}