<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><div class="label"><i class="fas fa-at"></i> e-mail:</div> <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
        <li><div class="label"><i class="fab fa-telegram-plane"></i> telegram:</div> <a href="https://t.me/jatus_93">@jatus_93</a></li>
        <li><div class="label"><i class="fab fa-twitter"></i> twitter:</div> <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
        <li><div class="label"><i class="fab fa-linkedin-in"></i> linkedin:</div> <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;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: auto;
    font-size: 1.1em;
    border-radius: 10px;
    width: 95%;
    border-style: solid;
    border-width: 0.1px;
    border-color: $rich-black-fogra-29;
    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-top: 1vh;
    padding-bottom: 1vh;
  }

  .contacts{
    background-color: $cultured;
    width: 90%;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: $cultured;
    border-style: solid;
    border-width: 0.1px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }

  .contacts>ul{
    list-style: none;
    width: auto;
    margin: auto;
  }
  .contacts>ul>li{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .contacts>ul>li>div{
    margin-right: auto;
  }

  .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>ul{
      // list-style: none;
      // width: 35vw;
      margin: unset;
    }

    // .job-content{
    //   flex-wrap: unset;
    // }

    // .text-content{
    //   width: 35vw;
    // }
  }
</style>