:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: #fff;
}

* {
  box-sizing: border-box;
  /* Reset Padding & Margin for whole page */
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Alan Sans', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  background: #4d0404;
  color: #fff;
}

body {
  width: 100vw;
  min-width: 20rem;
  overflow-x: hidden;
  line-height: 2;
}

/* ------------- Typography ------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kalnia", 'Times New Roman', Times, serif;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1rem;
}

/* ------------- Header & Nav Styling ------------- */
nav,
header,
footer {
  grid-column: 1 / 13;
  /* Sets grid column spans */
}

header {
  text-align: center;
}

header ul a {
  padding: 0 1.5625rem;
}

header,
section,
div {
  padding: 1rem 0.625rem;
}

img {
  width: 3.625rem;
}

p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* ------------- Nav Styling + Link Styling Page Wide  ------------- */
nav a {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

a,
a:hover,
a:visited {
  color: white;
  border-radius: 0.9375rem;
  text-decoration: none;
}

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

li a:hover,
a:focus {
  background: #4d0404;
}

li a:active {
  background: #114d04;
  border: 0.1875rem solid yellow;
}

/* Hides top of Page Icon on Mobile */
.material-symbols-outlined {
  display: none;
}

/* ------------- Project LINK Styling: Hover over images in each category ------------- */
.projects a {
  padding: 0;
}

a.project-links {
  /* zoom out off hover */
  transition: all 0.3s;
}

a.project-links:hover {
  /* zoom in on hover */
  transform: scale(1.03);
  transition: 0.3s ease-in-out;
}

/* ---------- Header Styling ---------- */

.hero {
  /* Adds a Semi-Transparent Overlay to my BG Image... Helps with text-readability */
  background-color: #0000007d;
  background-image: url(../images/sunset-centennial.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  min-height: 25rem;
  height: 35rem;
  width: 100%;
  max-height: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5625rem;
}



/* ----- Main + Section + Project Styling ------ */
.main-wrapper-scroll {
  padding: 0rem;
}

/* Vertical Scrollbar Style for Main-Wrapper (WebKit) --- Modern Scrollbar Styling is not comatible across browsers :( */
.main-wrapper-scroll::-webkit-scrollbar {
  width: 0.75rem;

}

.main-wrapper-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  scroll-behavior: smooth;
}

.main-wrapper-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 0.375rem;
}

.main-wrapper-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-color);
}

main {
  display: flex;
  flex-direction: column;
  gap: 3rem 0;
  margin: 0 0 5rem 0;
}

main article {
  padding: 1.5rem;
  margin: 5rem 0;
  max-width: 100%;
}

/* ---------- Project Styling  ---------- */

.projects {
  padding: 0 1.5rem;
  margin: 5rem 0;
}

/* Project Containers & Horizontal Scrolling */
.html-css-projects,
.js-projects,
.wordpress-sites,
.online-stores {
  display: flex;
  gap: 0.8rem;
  overflow-x: scroll;
}

/* Horizontal Scrollbar Style (WebKit) --- Modern Scrollbar Style Methods only worked on Chrome :( */
.html-css-projects::-webkit-scrollbar,
.js-projects::-webkit-scrollbar,
.wordpress-sites::-webkit-scrollbar,
.online-stores::-webkit-scrollbar {
  height: 0.5rem;
}

.html-css-projects::-webkit-scrollbar-track,
.js-projects::-webkit-scrollbar-track,
.wordpress-sites::-webkit-scrollbar-track,
.online-stores::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.html-css-projects::-webkit-scrollbar-thumb,
.js-projects::-webkit-scrollbar-thumb,
.wordpress-sites::-webkit-scrollbar-thumb,
.online-stores::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 0.25rem;
}

/* Projects */
.country-site,
.business-site,
.movie-database,
.mindset,
.js-game,
.shopify,
.woocomm {
  border-radius: 0.3125rem;
  display: flex;
  /* Width & Height of Project Images - Mobile */
  width: 15.625rem;
  height: 23rem;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0.125rem 0.1875rem 0.3125rem rgba(0, 0, 0, 0.7);
}

/* Attaching Images to Project BG's */
.country-site {
  background: url(../images/northern-lights-pitt-lake.jpg) center center no-repeat;
  background-size: cover;
}

.business-site {
  background: url(../images/chloe-driving.png) center center no-repeat;
  background-size: cover;
}

.movie-database {
  background: url(../images/moyie-falls-cranbrook.jpg) center center no-repeat;
  background-size: cover;
}

.js-game {
  background: url(../images/northern-lights-pitt-lake.jpg) center center no-repeat;
  background-size: cover;
}

.mindset {
  background: url(../images/chloe-driving.png) center center no-repeat;
  background-size: cover;
}

.shopify {
  background: url(../images/moon-pitt-lake.jpg) center center no-repeat;
  background-size: cover;
}

.woocomm {
  background: url(../images/northern-lights-pitt-lake.jpg) center center no-repeat;
  background-size: cover;
}

/* Coming Soon Badge */
.coming-soon {
  border-radius: 0.75rem;
  letter-spacing: 0.0975rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #ffffff;
  padding: .3125rem .625rem;
  background: #942192;
  width: fit-content;
}

/* Project Title Badge */
.project-title {
  background: #000000ab;
  border-radius: .75rem;
  width: fit-content;
  padding: .3125rem;
}


/* ---------- Footer Styling ---------- */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  border-top: 0.0625rem solid #000;
}

footer p {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  padding: 1rem;
}

/* ---------- Media Queries - Responsiveness ----------- */

/* Nav / Footer Adjustments for Mobile */
@media only screen and (max-width: 25em) {

  nav {
    flex-direction: column;
    gap: 1rem;
  }

  .html-css-projects,
  .js-projects,
  .wordpress-sites,
  .online-stores {
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
}

/* ---------- DESKTOP: If the browser window is 47.5em or bigger, the nav will switch to sidebar ---------- */
@media only screen and (min-width: 47.5em) {
  body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    height: 100vh;
  }

  header {
    grid-column: 1 / 3;
    justify-content: space-between;
    flex-direction: column;
    min-width: 15.625rem;
    max-width: 18.562rem;
    gap: 1.5rem;
    border-right: 1px solid rgb(0, 0, 0, 0.5);
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.7);
    background: #111;
    display: flex;
  }

  a img {
    display: block;
  }
  main article {
    max-width: 70%;
  }

  .material-symbols-outlined {
    display: block;
    text-align: right;
    cursor: pointer;
    font-size: 2rem;
    margin: 1rem;
  }

  nav {
    flex-direction: column;
    text-align: left;
  }

  nav,
  ul {
    flex-direction: column;
  }

  /* Adds Vertical Scroll to Main Content Wrapper - Desktop */
  .main-wrapper-scroll {
    grid-column: 3 / 13;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-color-vertical) var(--scrollbar-track-color-vertical);
  }

  /* Width & Height of Project Images - Desktop */
  .country-site,
  .business-site,
  .movie-database,
  .mindset,
  .js-game,
  .shopify,
  .woocomm {
    min-width: 17.1875rem;
    height: 25.125rem;
    max-height: 31.25rem;

  }
}