* {
  box-sizing: border-box;
}

/* Body and Global Styles */
body {
  margin: 0;
  padding: 0;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
  line-height: 1.5;
  background-color: #fff4f1;
}

/* Anchor tag style: removes default text decoration for a clean look */
a {  text-decoration: none; }

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  color: rgb(33, 40, 63);
}

/* Image style: centers images and sets size */
img {
  display: block;
  height: 135px;
  width: 135px;
  margin-left: auto;
  margin-right: auto;
}

main {
  width: 100%;
}


h1 {
  font-size: xx-large;
}

p {
  margin: 0;
  color: rgb(33, 40, 63);
  text-align: justify;
}

/* Header Styles */

header {
  display: flex;
  padding: 5px;
  text-align: center;
  color: #fff;
  align-items: center;
}

#big-title {
  flex: 3;
  padding: 1.5%;
  text-align: left;
  color: #fff;
}

/* Navigation item styles: flex layout for horizontal alignment */
.nav-items {
  flex: 2;
  display: flex;
  font-size: larger;
  justify-content: space-around;
  align-items: last baseline;
}

/* Main Content Styles */
.about-container {
  display: flex;
  align-items: center;
  padding: 1%;
}

#name {
  flex: 3;
}

#name span {
  color: rgb(99, 19, 7);
}

.about-me {
  padding: 2%;
  flex: 7;
}

.avatar {
  flex: 1;
}

/* Works Section */
.page-wrapper {
  width: 100%;
  text-align: center;
}

.projects {
  display: flex; /* Changed to flex for better responsiveness */
  flex-wrap: wrap; /* Allows wrapping of child elements */
}

.project-content {
  position: relative;
  text-align: center;
}

.project-content img {
  width: 100%;
  display: block;
}

.project-content h3,
.project-content p {
  position: relative;
  width: 80%;
  left: 20%;
  margin: 3%;
  padding: 0;
}

.project-content h3 {
  position: relative;
  left: 5%;
  top: 17%; 
  color: white;
  font-size: xx-large;
}

.proce {
  float: left;
  width: 33.3333%;
  padding: 0;
  text-align: center;
}

.proce img {
  width: 100%;
  height: auto;
}

#horiseon {
  background-color: #1697a6;
}

#portfolyo {
  background-color: #ffc24b;
}

#loading {
  background-color: #0e606b;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Contact Section */

.page-section-contact {
  display: flex;
  align-items: stretch;
}

.contact,
.resume {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffb3ae;
}

.resume {
  background-color: #f47068 ;
  flex: 35%;
}

.contact {
  flex-direction: row;
  align-items: center;
  flex: 70%;
  justify-content: left;
  background-color: #ffb3ae;
}

.contact-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  flex: 75%;
}

.contact h2 {
  flex: 25%;
  margin: 1%;
}
.contact h2,
.contact p,
.resume h2,
.resume button {
  margin: 1%;
}

/* Further adjustments for smaller screens than 700px. changes layout to column */

@media only screen and (max-width: 700px) {
  header,
  .nav-items,
  .about-container,
  .page-section-contact {
    flex-direction: column;
    text-align: center;
    padding: 5px;
  }

  .nav-items li {
    margin: 5px 0; /* Add space between menu items */
  }

  .about-me,
  .contact,
  .resume {
    width: 100%;
    padding: 10px 0;
  }
  .projects {
    width: 49.99999%;
    margin: 6px 0;
  }
  .project-content h3 {
    font-size: large; 
  .proce {
    width: 100%; 
  }

  h1,
  h2,
  h3 {
    font-size: smaller; /* Adjust font sizes for readability */
  }
}

/* Further adjustments for smaller screens than 500px */
@media only screen and (max-width: 500px) {
  
  .projects {
    width: 100%;
  }
  .project-content h3 {
    font-size: smaller;
    line-height: 1.2;
    left: 2%; 
    top: 10%;
  }
}