<template>
  <div class="SocialIcons row">
    <a class="col-auto btn bi-github" href="https://github.com/adb-sh/" target="_blank" rel="noopener noreferrer" />
    <a class="col-auto btn bi-git" href="https://git.cybre.town/adb" target="_blank" rel="noopener noreferrer" />
    <a class="col-auto btn bi-mastodon" href="https://social.cybre.town/@adb" target="_blank" rel="noopener noreferrer" />
    <a class="col-auto btn bi-instagram" href="https://www.instagram.com/me.adb.sh" target="_blank" rel="noopener noreferrer" />
    <a class="col-auto btn bi-spotify" href="https://open.spotify.com/user/op3q884heqao7laioz05ebaoz" target="_blank" rel="noopener noreferrer" />
    <a class="col-auto btn bi-youtube" href="https://www.youtube.com/channel/UCoxRdN8T4aCR8tqDpOJAjOQ" target="_blank" rel="noopener noreferrer" />
  </div>
</template>

<style scoped lang="scss">
.SocialIcons {
  position: relative;
  user-select: none;
  width: 100%;
  display: flex;
  justify-content: center;
  a.btn {
    font-size: calc(1.5rem + 1vw);
    max-font-size: 2.5rem;
  }
}

.social_icons > div {
  position: relative;
  display: inline-block;
  height: min-content;
  cursor: pointer;
}

.logo-img {
  fill: #fff;
  height: 3rem;
  margin: .75rem;
}
</style>
