.container {
  display: flex;
  /* flex-direction: column; */
  height: 100vh; /* 100% viewport height */
}

  /* Media query for small screens */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Change to column layout */
  }
}

.sidebar {
  flex: 0 0 240px; /* Fixed width sidebar */
  padding: 20px;
  color: #fff;
  background: rgb(24,1,36);
  background: linear-gradient(112deg, rgba(24,1,36,1) 0%, rgba(41,1,59,1) 46%, rgba(81,3,116,1) 100%);
  /* background: linear-gradient(112deg, rgba(24,1,36,1) 0%, rgba(81,3,116,1) 46%, rgba(41,1,59,1) 100%); */
  display:flex; /* This is also a flex parent */
  /* justify-content: space-between; */
  align-items: center;
  flex-direction: column;
}

.sidebar box {
  flex: 1; 
  margin: 10px;
}

.image-container {
  width: 220px;
  height: 220px;
  min-width: 220px;
  min-height: 220px;
  border-radius: 75%; /* Makes the div circular */
  /* background: linear-gradient(45deg, #8e8988, #f1f0eb); 
  background: linear-gradient(45deg, #FF5733, #FFC300); */
  background: linear-gradient(45deg, #333030, #868381);

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: left;
  border-style: solid;
  border-color: darkgray;
}

.image-container img {
  width: 420px; 
  height: 350px;
  vertical-align: middle;
  padding-right: 60px; /* to push the head to the center a bit*/
}


.contact-info {
  display: flex;
  background-color: inherit;
  color: #fff;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 10px; /* padding between items */
}

.contact-info pre.name {
  font-size: 2em;
}

.contact-info a {
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-info a:hover {
  background-color: #0072b1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-info a.email:hover {
  background-color: #e64650;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}


.contact-info a.github:hover {
  background-color: #283035;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-info .email {
  background-color: inherit;
  color: #fff;
}

.contact-info .linkedin {
  background-color: inherit;
  color: #fff;
}

.contact-info .github {
  background-color: inherit;
  color: #fff;
} 

.sidebar-footer {
  margin-top: auto; /* For vertical layout */
  color: rgb(142 132 132);
}