body {
  font-family: "Segoe UI", Arial, sans-serif; /* setting font*/
  background: #f0f2f7;                      /* Color font change*/   
  margin: 40px;
}

/* 2) Style main heading */
h1 {
  text-align: center;                    /* Center the text*/    
  color: #756035;      /*Changed the color to match the background */
}

/* 3) Change tabs container width and centering */
#portfolio-tabs {
  width: 800px;                      /*changed width*/         
  margin: 0 auto;                           /*centers the tabs*/
}

/* 4) Customize tab header bar */
.ui-tabs-nav {
  background: #b8760d;                        /*changed color*/
  border-radius: 6px 6px 0 0;                 /*round corners*/
  padding: 0.5em;
}

/* 5) Style individual tabs (inactive) */
.ui-tabs-nav li a {
  color: #e3e8f5;                             
  font-weight: 600;                           
}

/* 6) Hover effect on tabs */
.ui-tabs-nav li a:hover {
  background: #b09871;                        
  color: #ffffff;
}

/* 7) Active tab styling */
.ui-tabs-nav li.ui-tabs-active a {
  background: #f4f6fb;                      /*active tab color*/ 
  color: #694102;                             /*active text color*/
}

/* 8) Panel area styling */
.ui-tabs-panel {
  background: #71b09a;                        
  border: 1px solid #c2c9da;                  
  padding: 20px;                              
}

/* 9) Social link thumbnails */
.social-links a {
  display: inline-flex;                       
  align-items: center;
  margin-right: 16px;
  margin-bottom: 8px;
  text-decoration: none;
  color: #234b7b;
}

.social-links img {
  width: 24px;                                
  height: 24px;
  margin-right: 6px;
}