* { /* Universal box-sizing rule */
  box-sizing: border-box;
}

/* Body styles */
body { 
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  line-height: 1;
  display: block;
}

/* Header styles */
header {
  background: #2c3e50;
  padding: 20px;
  text-align: left;
}

header h1 {
  margin: 0;
  color: rgb(166, 189, 166);
}

/* Navigation bar style */
nav {
  text-align: right;
}

nav a { /* highlight affect added */
  margin: 0 2%;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  font-size: 20px;
  color: rgb(166, 189, 166);
  text-decoration: underline;
}

nav a:hover {
  color: #e1dcd4; 
  text-shadow: 0 0 10px #e1dcd4;
}

/* Sub section styles */
.sub {
  padding: 10px;
  border: 2px solid #a52222;
  margin: 10px 10px;
  background-image: url("../images/02-hero-bg.jpg");
  background-size: cover; 
  text-align: right;
  color: #e5e5e5;
}

/* h2 styling*/
#subbox h2 {
  background: #2c3e50;  
}

h2 {
  font-size: x-large;
  text-align: center;
}

/* Main section styles */
.page-wrapper {
  display: flex;
  width: 75%;
  height: auto;
  margin: auto;
  justify-content: center;
}

/* Container styles */
.container {
  justify-content: center; 
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}

/* Image container styles */
.image-container { /*style the images side by side */
  display: flex; 
  justify-content: space-around;
}

#image-content img {
  padding: 20px;
  background: #2c3e50;
  width: 400px;
  height: auto;
  margin-bottom: 10px;
}

#image-content1 img {
  flex-direction: column;
  max-height: 75%; 
  max-width: 75%;
  margin-top: 50px;
  padding: 20px;
  background: #2c3e50;
}


/* Container styles within about me section */
.container {
  padding-inline: 10px;
}

.page-section {
  padding: 20px;
  margin: auto;
  background-color: #e5e5e5;
  text-align: center;
}

.page-section p {
  display: flex;
  flex-direction: column;
}

/* Project container styles for project 2 and 3*/
#project-container{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: auto;
  width: 100%;
}

.flex-item {
  width: 45%;
  height: 150px;
  margin: 10px;
}

#project1, #project2, #project3 {
  display: inline-block;
  background-size: cover;
}

.flex-item h3 {
  background: #2c3e50;
}

#project1{
  width: 100%;
  height: 200px;
  background-image: url("../images/02-portfolio-1.jpg");
}

#project2{
  width:50%;
  background-image: url("../images/02-portfolio-2.jpg");
}

#project3{
  width: 50%;
  background-image: url("../images/02-portfolio-3.jpg");
  }

/* Footer styles */
footer h3 {
  text-align: left;
  font-size: x-large;
}

footer {
  padding: 20px;
  background-color: #2c3e50;
  color: rgb(166, 189, 166);
  text-align: center;
}

section a { /* add highlight affect when hovering */
  margin: 0 2%;
  color: rgb(166, 189, 166);
  text-decoration: underline;
}

footer a:hover {
  color: #e1dcd4; 
  text-shadow: 0 0 10px #e1dcd4;
}


/* Media Queries for Responsiveness */
@media (max-width: 768px) { /* Small screen size styles */
  header h1 {
      text-align: center;
  }
  
  nav {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  nav a {
    margin: 5px 0;
  }

  .image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: 10%;
  }
  
  .page-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: 10%;
  }

  footer h3 {
    text-align: center;
  }

  footer a {
    line-height: 2;
    text-align: center;
  }
}

@media (max-width: 480px) { /* Medium screen size styles */
  header {
      padding: 10px;
      justify-content: space-between;
      align-items: center;
  }

  header h1 {
      text-align: center;
  }

  #container {
      padding: 10px;
      width: 100%;
      flex-wrap: wrap;
      margin-top: 0;
      clear:both;
  }

  .image-content {
      align-content: flex-start;
  }

  footer {
      padding: 10px;
  }
}