html,body{
  height: 99%;
  width: 99%;
  background-image: url("background2.jpg");
  margin: 0;
  padding: 0;
}

.ephesis-regular {
  font-family: "Ephesis", cursive;
  font-weight: 400;
  font-style: normal;
}

.zain-regular {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}


#photo{
  display: flex;
  background-color:#ffffff;
  float:left;
  width:40%;
  margin-top:65px;
  height: 360px;
  font-family: "Poppins", sans-serif;
  margin-left: 30px;
  border-color:#f9d7ef;
  border-style: solid;
  border-width: 3px;
  position: relative;
}


#about, #role {
  background-color: #ffffff;
  width: 50%;
  height: 170px;
  font-family: "Poppins", sans-serif;
  float:right;
  margin-right: 30px;
  border-color:#f9d7ef;
  border-style: solid;
  border-width: 3px;
}

#about{
  margin-top:65px;
}
#role{
  margin-top: 20px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#f5f5f5;
  box-shadow: 2px 2px 4px #808080;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;

}

li {
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

li a:hover {
  background-color: #e0e0e0;
  opacity: 50%;
}

.header {
  background-color: white;
  width: 100%;
  margin-top: 90px;
  height: 125px;
  margin-left: 20px;
  border: solid;
  border-color:#f9d7ef;
  border-radius: 2px;
  text-align: center; /* Center text inside the header */
}

.name {
  font-family: "Ephesis", cursive;
  font-size: 50px;
  margin-top: 30px;
}

.role {
  font-family: "Zain", sans-serif;
  font-size: 20px;
  color: #000000;
  margin-top: -30px;
  margin-bottom: 0px;
}

.box-container{
  background-color: rgba(184, 190, 151, 0.7);
  width: 100%;
  height: 500px;
  margin-top: 15px;
margin-left: 20px;
}

.me{
padding-left: 23%;
  padding-top: 3%;
  opacity:100%;
  

}
.button{
  margin: 0;
  position: absolute;
  top: 70%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-left: 35%;
}

.portfolio {
height: 50px;
  width: 150px;
  border: solid;
  border-width: 2px;
    font-family:"Zain", sans-serif;
  font-size:1.5em;
  background-color: #c3c1a0;
border-color:#f3f1db;
  transition-duration: 0.4s;

  }

.portfolio:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}