@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400..700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fustat:wght@600;700&display=swap");

:root {
  --body-width: 50em;
  --body-padding: 2em;
  --body-margin: 5em;
  --links-width: 2em;
  --links-padding: 0.5em;
  --links-shift: calc(
    (var(--links-width) + var(--links-padding) + var(--body-padding)) * -1
  );
  --line-height: 1.5;
}

:lang(en) {
  font-family: "Merriweather", serif;
}

:lang(ar) {
  font-family: "Fustat", serif;
}

html {
  background-color: azure;
}

h1 {
  margin-top: 0;
}

body {
  margin: var(--body-margin) auto;
  padding: var(--body-padding);
  max-width: var(--body-width);
  background-color: white;
}

p {
  line-height: var(--line-height);
  text-align: justify;
  hyphens: auto;
  /* text-wrap: balance; */
}

a {
  color: rgb(0, 159, 106);
  text-decoration: none;
}

#profile-image {
  float: right;
  margin: 0.5em 0 1em 1em;
  width: 40%;
  border-radius: 50%;
  shape-outside: margin-box;
}

#links {
  display: flex;
  flex-direction: column;
  float: left;
  position: fixed;
  margin-left: var(--links-shift);
  width: var(--links-width);
  gap: var(--links-padding);
}

#links a {
  width: var(--links-width);
  height: var(--links-width);
}

#links a:after {
  width: var(--links-width);
  height: var(--links-width);
  position: absolute;
  content: "";
  background-size: cover;
}

#links #github:after {
  background-image: url(https://unpkg.com/simple-icons@v15/icons/github.svg);
}
#links #mastodon:after {
  background-image: url(https://unpkg.com/simple-icons@v15/icons/mastodon.svg);
}
#links #youtube:after {
  background-image: url(https://unpkg.com/simple-icons@v15/icons/youtube.svg);
}
#links #facebook:after {
  background-image: url(https://unpkg.com/simple-icons@v15/icons/facebook.svg);
}
#links #instagram:after {
  background-image: url(https://unpkg.com/simple-icons@v15/icons/instagram.svg);
}
#links #linkedin:after {
  background-image: url(/assets/icons/LinkedIn_icon.svg);
}
#links #email:after {
  background-image: url(/assets/icons/email.svg);
}

ul {
  padding: 0;
}

li {
  line-height: var(--line-height);
}

@media (max-width: 950px) {
  #links {
    flex-direction: row;
    justify-content: center;
    float: initial;
    position: initial;
    margin-left: 0;
    width: 100%;
    padding-bottom: var(--body-padding);
  }
}

@media (max-width: 400px) {
  :root {
    --body-padding: 1em;
  }
}

@media (max-width: 350px) {
  #links {
    gap: 0.2em;
  }
}