/* Mobile-first approach to design of the website.  All styles are built with a mobile-first approach */

/* No margin or padding as the default for all elements */
* {
  margin: 0;
  padding: 0;
}

/* Establishing a default font size of 10px or make 1rem = 10px.  This idea was taken from the Week 2 Mini-Project of the UNB Cooding Bootcamp */
html {
  font-size: 62.5%;
}

body {
  width: 97vw;
  background-color: bisque;
  font-family: "Montserrat", sans-serif;
}

/* header is to be fixed and always on top when scrolling.  Inspiration was taken from Studio Bagaz https://www.studiobgz.com/ */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 1rem;
  text-align: center;
  z-index: 1;
}

/* Nav is to be fixed and always on top when scrolling. Fixed to the right on large screens and under the header on small screens.  
Inspiration was taken from Studio Bagaz https://www.studiobgz.com/ */

nav {
  position: fixed;
  background-color: blueviolet;
  top: 7vh;
  left: 0;
  width: 100vw;
  height: 4em;
  z-index: 1;
  text-align: center;
}

nav ul {
  /* using flexbox for the navigation */
  display: flex;
  font-size: 1.5em;
  justify-content: space-evenly;
  align-items: baseline;
  list-style-type: none;
  padding: 0.5em 0;
}

nav ul li a {
  text-decoration: none;
  color: white;
}

/* navigation hover effect */
nav ul li a:hover {
  border-bottom: 3px solid white;
}

h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

h2 {
  font-weight: bold;
  font-size: 2rem;
  padding: 20px;
}
/* set no text-decoration for all a tags */
a {
  text-decoration: none;
}
/* set the default hover behaviour for all a tags */
a:hover {
  background-color: blueviolet;
}
/* Main section is to be 97 view width instead of 100. To allow for the right side vertical navigation on large screens */
main {
  width: 97vw;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-top: 11vh;
  background-color: bisque;
}

img {
  width: 50%;
  height: auto;
}

p {
  font-size: 1.6em;
  line-height: 1.5em;
  text-align: justify;
  padding: 0 30px;
}

/* All sections should have a max width of 100vw */
section {
  max-width: 100vw;
  display: flex;
  flex-direction: column;
}
/* setting background color of the three sections */
#about {
  background-color: bisque;
}

#work {
  background-color: aliceblue;
}

#contact {
  background-color: antiquewhite;
}

/* Since this is mobile first approach, section header and the nested h2 is to be set */
.section-header {
  max-width: 100vw;
  text-align: center;
}
.section-header h2 {
  border-bottom: 3px solid blueviolet;
}

/* setting the section content to use flexbox and set to column flex direction on small screens */
.section-content {
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

/* set the size of the large image box for showcasing work */
#work .section-content .img-lg {
  max-width: 100vw;
  padding: 1rem;
  margin: 0 15px 15px 0;
  position: relative;
}

/* ensure the image fits properly within the large image container */
#work .section-content .img-lg img {
  width: 100%;
  height: auto;
  margin: 0;
}

/* set the size and behaviour of the regular size image box for showcasing work */
#work .section-content .img-reg {
  max-width: 50vw;
  padding: 1rem;
  margin: 15px 15px 15px 0;
  position: relative;
}

/* Ensure the image fits properly within the regular size container */
#work .section-content .img-reg img {
  width: 100%;
  height: auto;
  margin: 0;
}

#work .section-content .img-lg .worktitle,
#work .section-content .img-reg .worktitle {
  position: absolute;
  bottom: 8px;
  left: 16px;
  background-color: blueviolet;
  color: white;
}
/* Establish the overlay for when someone hovers over an image in the work section */
#work .section-content .img-lg .overlay,
#work .section-content .img-reg .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.3s ease;
  background-color: gray;
}

/* Establish the hover behaviour when hovering over an image in the work section */
#work .section-content .img-lg:hover .overlay,
#work .section-content .img-reg:hover .overlay {
  opacity: 0.5;
}
/* The icon from Font Awesome.  Setting the default size, position and color of the icon in the middle of the overlay when hovered over. */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/* Contact section p tag settings */
#contact .section-content p {
  font-size: 2rem;
  border-bottom: 3px solid blueviolet;
  padding: 0;
}

#contact .section-content a {
  color: black;
}

#contact .section-content a:hover {
  color: white;
}

/* setting flex box for the social media icons */
#contact .section-content .socialmedia {
  display: flex;
  flex-direction: row;
  margin: 2rem;
}

/* Social media icons from Font Awesome.  Defining the default behaviour for the icons on a small screen */
#contact .section-content .socialmedia i {
  display: inline;
  float: right;
  font-size: 4rem;
  line-height: 1.5rem;
  margin: 1.2rem;
  color: blueviolet;
}

/* hover effect on the social media icons */
#contact .section-content .socialmedia i:hover {
  color: white;
}

/* Establishing different styles when the screen is minimally 768px */
@media screen and (min-width: 768px) {
  /* header text is aligned left */
  header {
    text-align: left;
  }

  /* nav bar is moved to the right and vertical */
  nav {
    position: fixed;
    width: 100vh;
    bottom: 0;
    top: unset;
    left: unset;
    right: 50px;
    height: 50px;
    transform: rotate(90deg);
    transform-origin: 100% 100%;
    z-index: 1;
    text-align: center;
  }

  /* increase font sizes of headers */
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2rem;
  }

  /* adjusting images to be larger */
  img {
    width: 20%;
    margin: unset;
  }
  /* changing the flexbox direction to row instead of column */
  section {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 15px;
  }
  /* Increasing size of section header and placing border on the right */
  .section-header {
    width: 15vw;
    text-align: right;
    border-right: 8px solid blueviolet;
  }

  /* Decreasing padding and remove the border on h2 */
  .section-header h2 {
    padding: 10px;
    border: unset;
  }

  /* Section content is flexbox flex direction row instead of column with row wrap enabled. */
  .section-content {
    width: 75vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 15px;
    align-items: center;
  }

  /* no wrap on the About section content */
  #about .section-content {
    flex-wrap: nowrap;
  }

  /* set all elements in the work section-content to flex end */
  #work .section-content {
    align-items: flex-end;
  }

  /* Adjusting size of the regular image on larger screens */
  #work .section-content .img-reg {
    flex: 30%;
    padding: unset;
    margin: 0px 15px 15px 0;
    position: relative;
  }

  #work .section-content .img-reg img {
    width: 100%;
    height: 100%;
  }

  #work .section-content .img-lg img {
    width: 100%;
    height: 100%;
  }
  /* Adjusting size of the large image on the larger screens */
  #work .section-content .img-lg {
    flex: 30%;
    padding: unset;
    margin: 0 15px 15px 0;
    position: relative;
  }

  /* Have elements on the contact us section align to the center on the larger screens */
  #contact .section-content {
    align-items: center;
  }

  /* Increase size and margin of the P tags in the contact us section */
  #contact .section-content p {
    font-size: 2rem;
    margin-right: 4rem;
  }
}

/* Increase the size of the h2 on screens larger than 1020px */
@media screen and (min-width: 1020px) {
  h2 {
    font-size: 2.5rem;
  }
}

/* Increase the size of the h2 on screens larger than 1300px */
@media screen and (min-width: 1300px) {
  h2 {
    font-size: 3rem;
  }
}