<script lang="ts"></script>
<div class="contactContainer">
  <div class="contacts">
    <div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
      <ul class="contact-list">
        <li><i class="fas fa-at"></i> e-mail: <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
        <li><i class="fab fa-telegram-plane"></i> telegram: <a href="https://t.me/jatus_93">@jatus_93</a></li>
        <li><i class="fab fa-twitter"></i> twitter: <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
        <li><i class="fab fa-linkedin-in"></i> linkedin: <a href="https://www.linkedin.com/in/gianmarco-pettinato/">Gianmarco Pettinato</a></li>
      </ul>
  </div>
</div>
<style lang="scss">
  @import './static/colors.scss';
  .contactContainer{
    margin: auto;
    background-color:$navajo-white;
    border-radius: 10px;
    width: 90%;
    border-radius: 10px;
    box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
    -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
    padding: 1vh;
  }

  .contacts{
    background-color: $cultured;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    align-items: center ;
    border-radius: 10px;
    padding: 1vh;
    background-color: $cultured;
    border-style: solid;
    border-width: 0.1px;
  }

  .contacts>ul{
    list-style: none;
  }
  .contacts>ul>li{
    text-align: start;
  }

  .profile{
    border-radius: 50%;
    width: 35vw;
    max-width: 150px;
    border: solid $rich-black-fogra-29 1px;
    box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
    -webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
    -moz-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;

  }

  a,a:visited{
    // text-decoration: none;
    color: $rich-black-fogra-29;
    margin: 2px;
  }

  @media screen and (min-width: 600px) {
    .contactContainer{
      display: flex;
      height: auto;
      max-width: $cv-max-width;
      width: 80vw;
    }

    .contacts{
      width: 98%;
    }

    .contacts>ul{
      margin: unset;
    }
  }
</style>