@import url("_sass/jekyll-theme-midnight.css");

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.container {
    max-width: 650px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 650px) {
    .container {
        padding: 10px;
    }
}

h1 {
  font-size:96px;
}

.avatar {
  width: 100px; /* Adjust size as needed */
  height: 100px;
  border-radius: 50%; /* Makes the image circular */
  margin: 10px 0; /* Adds some space around the avatar */
  object-fit: cover; /* Ensures the image fits within the circular shape */
  align-items: center;
}

.info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.location {
  color: #fff; /* White text color for better visibility */
  margin-bottom: 10px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.social-links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff; /* White text color for better visibility */
}

.social-links i {
  margin-right: 5px;
  font-size: 18px;
  color: inherit; /* Inherit the original icon color */
}

/* Optional: If you want to manually set icon colors */
.social-links i.fa-linkedin {
  color: #0A66C2; /* LinkedIn blue */
}

.social-links i.fa-mastodon {
  color: #3088d4; /* Mastodon blue */
}

.social-links i.fa-github {
  color: #181717; /* GitHub dark gray, but you can use #fff if needed */
}

.social-links i.fa-youtube {
  color: #FF0000; /* YouTube red */
}