body {
  background-color: #0b0f19;
  font-family: "Google Sans Code", monospace;
  font-size: 32px;
}

h3,
p {
  color: aliceblue;
}

.profile {
  background-color: #1e293b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 1000px;
  box-shadow: -10px 10px 10px #080a12;
  border-radius: 20px;
}

.socials {
  background-color: #1e293b;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin: auto;
  margin-top: 50px;
  width: 400px;
  height: 100px;
  box-shadow: -10px 10px 10px #080a12;
  border-radius: 10px;
}

.social {
  margin-top: 6.25px;
  border-radius: 10px;
}

.social:hover {
  transform: scale(1.03);
  transition: transform 0.15s ease-in-out;
}

.layout-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px; /* Optional: adds breathing room between the blog and profile */
  width: 100%;
}

/* Apply alignment to the blog container itself */
#blogs {
  justify-self: end; /* Aligns to the right edge of Column 1 */
  max-width: 400px; /* Caps width so it doesn't spill over */
  width: 100%;
}

.blog-card {
  background-color: #1e293b;
  font-family: "Google Sans Code", monospace;
  font-size: 15px;
  margin: auto;
  padding: 1px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  box-shadow: -10px 10px 10px #06060c;
}

.error-message {
  color: red;
  font-family: "Google Sans Code", monospace;
  background-color: #1e293b;
  font-size: 15px;
  margin: auto;
  padding: 1px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  box-shadow: -10px 10px 10px #06060c;
}

.blogDisplay {
  background-color: #1e293b;
  font-family: "Google Sans Code", monospace;

}

.error-message a,
.error-message a:visited,
.error-message a:active {
  font-size: 15px;
  color: red;
  text-decoration: underline;
}

.error-message a:hover {
  color: darkred;
  font-size: 16px;
}