/* MY EDITS: 1. Deleted CSS for Header/Navbar styling (because Bootstrap now provides this) 2. Deleted CSS for Work section 3. Set size of images (icons) in Skills section 4.Deleted CSS for About and Contact sections 5. Changed font-family in var() function. 6. Deleted global styling that’s no longer needed 7. Added custom styling to body, and p, h1-6, links and unordered lists/list items throughout the page (did this by targeting id on body, so overrides Bootstrap’s styling). 8. Added credit for this idea in comments. 9. Added important property to font-family (so completely overrides Bootstrap's styling) 10. Added styling to Footer, including hover effect to links/images (icons) 11. Added credit for box-shadow colour in comments 12. Commented out existing media queries (so can inspect page’s responsiveness without/Bootstrap only) 13. Added padding to all h1-6 (so sticky navbar not covering content) 14. Deleted existing media queries ((because Bootstrap now provides responsiveness) 15. But added media query for ≥768px so Projects cards and images are smaller and images are set to ‘cover’ (on lower resolutions, Bootstrap’s responsiveness alters card/images in preferred way so custom media queries not deemed necessary) 16. Set max width to containers in Built Projects, Skills and About sections (at all resolutions)*/

/* **Whole page (global)** */

/*var() function for colours and font family (for use across page where variable added)*/
:root {
  --dark: black;
  --light: white;
  --font-family: arial, helvetica, sans-serif;
}

/*Styles body of page (sets line height and background colour as per var function).*/
/*Targeted id that's applied to body to override Bootstrap's styling*/
/*CREDIT: thanks to smugglerFlynn for this idea, via Stack Overflow (2013) How can I override Bootstrap CSS styles? (https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles)*/
#bootstrap-override body {
  line-height: 1.5;
  background-color: var(--light);
}

/*Styles paragraphs, h1-h6, links, unordered lists and list items throughout page (as per variable function) and styles unordered lists throughout page (removes bullet points)*/
/*Important property needed on font-family to completely override Bootstrap's styling*/
#bootstrap-override p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
ul,
li {
  color: var(--dark);
  font-family: var(--font-family) !important;
  list-style-type: none;
}

/*Adds top padding to h1-h6 (so sticky Navbar doesn't cover content when navigating via links)*/
#bootstrap-override h1,
h2,
h3,
h4,
h5,
h6 {
  padding-top: 55px;
}

/*Sets max width to containers (in Built Projects, Skills and About)*/
#bootstrap-override .container-fluid {
  max-width: 70%
}

/* **Header/Nav Bar - EMPTY** */

/* **Built Projects Section - EMPTY** */

/* **Skills Section** */

/*Sets size of images (icons) in Skills*/
.skills-img {
  width: 32px;
  height: 32px;
}

/* **About/Contact Section - EMPTY** */

/* **Footer** */

/*Sets paragraph colour in Footer*/
#bootstrap-override .footer p {
  color: var(--light);
}

/*Sizes Footer icons and applies total invert of colours*/
#bootstrap-override .footer img {
  filter: invert(100%);
  width: 45px;
  height: 45px;
}

/*Sets partial invert and box shadow to Footer icons (links) when hover over them*/
/*CREDIT: box-shadow colour combination cited from W3School (no date) CSS Box Shadow (https://www.w3schools.com/css/css3_shadows_box.asp)*/
#bootstrap-override .footer img:hover {
  filter: invert(40%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* **Media Queries** */

/*NOTE: Majority of page's responsiveness relies on Bootstrap, however following Media Queries added for stylistic preferences*/

/* **Equal to or greater than 768px (Bootstrap's medium breakpoint)** */

@media screen and (min-width: 768px) {
  /* **Built Projects Section ** */

  /*REMINDER: Currently these classes only apply to Built Projects*/

  /*Sets height for cards in Built Projects*/
  .card-height {
    height: 400px;
  }

  /*Sets height for images in Built Projects, and sets images to maintain ratio but cropped as necessary*/
  .card-img {
    height: 399px;
    object-fit: cover;
  }
}