#presentation-section{
  padding: 1rem;
  padding-top: 6.5rem;


  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap-reverse;

  /*Adding cool background for wide screen*/
  @media screen and (min-width: 1648px){
    background-image: radial-gradient(circle at top left, var(--color-bg) 0%, var(--color-bg) 52%,
      var(--color-subtitle-bg) 52%, var(--color-subtitle-bg) 57%,
      var(--color-elem) 57%, var(--color-elem) 59%,
      var(--color-elem-hovered) 59%, var(--color-elem-hovered) 67%,
      var(--color-elem-selected) 67%, var(--color-elem-selected) 100%
    );
    min-height: 100dvh;
  }
}


#presentation-section > article{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;


  /*Align with background for wide screen*/
  @media screen and (min-width: 1648px){
    align-self: flex-end;
    flex-basis: 60%;
    margin-top: 6rem;
    padding-right: 20%;
  }
}

#presentation-section > img{
  margin: 2rem;
  border-radius: 50%;
  aspect-ratio: 1;
  width: clamp(80px, 20dvw, 250px);
}

.links{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

article#presentation a{
  display: flex;
  text-decoration: none;
  gap: 0.5rem;
}

article#presentation a > .icon{
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-text);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#link-github .icon{
  -webkit-mask-image: url('/pages/home/resources/images/github.svg');
  mask-image: url('/pages/home/resources/images/github.svg');
}

#link-linkedin .icon{
  -webkit-mask-image: url('/pages/home/resources/images/linkedin.svg');
  mask-image: url('/pages/home/resources/images/linkedin.svg');
  mask-size: 1.125rem;
}

#link-mail .icon{
  -webkit-mask-image: url('/pages/home/resources/images/mail.svg');
  mask-image: url('/pages/home/resources/images/mail.svg');
  mask-size: 1.125rem;
}

section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 5%;
  gap: 1rem;
}

.articles-container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.articles-container > article{
  flex-grow: 1;
  flex-shrink: 1;

  min-width: min-content;

  padding: 0.5rem 1rem;

  /* Visual */

  background-color: var(--color-elem);

  border-color: var(--color-elem-border);
  border-style: none;
  border-radius: 1.25rem;
  border-width: 0px;

  color: var(--color-text);

  /* Content */
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

#skill-articles-container > article > li{
  padding: 0.5rem 0;
  list-style-type: none;

  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.25rem;
}

#skill-articles-container > article > li > ul{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

img.logo{
  width: 2rem;
  height: auto;
  display: inline-flex;
}

#project-articles-container{
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

#project-articles-container > article{
  --image-height: 175px;

  @media screen and (min-width: 768px)
  {
    --image-height: 275px;
  }

  min-height: 500px;
  max-width: calc(var(--image-height) * 16/9);
  

  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;

  border-radius: 10px;

  --project-article-image-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(var(--image-height) - var(--image-height)/3), var(--color-elem) var(--image-height));;
  padding-top: calc(var(--image-height) + 1rem);
  padding-bottom: 1rem;

  display: flex;
  flex-flow: column wrap;
  gap: 0.5rem;
}


#project-articles-container > article > :is(pre,p)
{
  align-self: flex-start;
}

#project-articles-container > article > :is(pre)
{
  margin: 0 0.5rem !important;
}

#project-articles-container > article > *{
  max-width: calc(var(--image-height) * 16/9 - 1rem);
}

#project-articles-container > article li{
  list-style-type: none;
}

article#wonderwares{
  background-image: var(--project-article-image-gradient), url('/pages/home/resources/images/project/wonderwares.webp');
}

article#volantistale{
  background-image: var(--project-article-image-gradient), url('/pages/home/resources/images/project/volantistale.webp');
}

article#wxvulkanengine{
  background-image: var(--project-article-image-gradient), url('/pages/home/resources/images/project/wxvulkanengine.webp');
}