/* Have fun. This is your site. 
background: linear-gradient(45deg, #946e9b, #f7faff);*/

body {
  margin: 0;
  height: 100vh;
  background: #ADA996;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}

h1{
  text-align: center;
}

img{
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

/* Main Container */
main {
  width: 100%;
  /* centers container to page */
  margin-inline: auto;
  
  /* adjust to your design */
  max-width: 40em;

}

#profile-pic {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
  border-radius: 30%;
  border: black solid 2px;
}

#greetings {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Style for list links */
li a {
  font-size: 1.2em;
  padding: 10px 15px;
  background-color: #8c789c;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  display: inline-flex; /* Ensures alignment of content */
  align-items: center; /* Vertically align text and image */
  justify-content: center; /* Center content horizontally */
  width: 200px; /* Set a fixed width */
  height: 50px; /* Set a fixed height */
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-sizing: border-box; /* Ensures padding fits inside the width/height */
}

li a:hover {
  background-color: #946e9b;
  color: #fff;
  transform: scale(1.05);
}

li img {
  width: 30px;
  height: 30px;
  margin-inline: 0;
  margin-right: 10px;
}