* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
      body {
        background: linear-gradient(to top right, azure, white);
        box-sizing: border-box;
        display: flex;
        font-family: 'open sans';
        font-size: 18px;
        height: 100vh;
      }
      .content {
        color: #777;
        margin: auto; 
        text-align: center;
        width: 400px;
      }
      .circle {
        background: #eee9de;
        background-image: url("./images/atti.jpg");
        background-position: center-top;
        background-size: 130%;
        border-radius: 50%;
        height: 240px;
        margin: auto;
        width: 240px;
      }
      .border {
        border: 1px solid rgba(255, 100, 120, 0.5);
        border-radius: 50%;
        height: 0;
        margin: 5px auto;
        width: 50%;
      }
      .icons-container {
        display: inline-flex;
        font-size: 30px;
        margin: 10px auto;
      }
      .icons {
        background: #eee9de;
        border-radius: 50%;
        cursor: pointer;
        height: 46px;
        margin: 10px;
        transition: all 0.2s ease-out;
        width: 46px;
      }
      .icons:hover {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
      }
      
      @keyframes shake {
        10%, 90% {
          transform: translate3d(-1px, 0, 0);
        }
        20%, 80% {
          transform: translate3d(2px, 0, 0);
        }
        30%, 50%, 70% {
          transform: translate3d(-4px, 0, 0);
        }
        40%, 60% {
          transform: translate3d(4px, 0, 0);
        }
      }
      .fab {
        display: flex;
        margin: auto 0;
      }
      .fa-facebook-f {
        color: #4267b2;
      }
      .fa-twitter {
        color: #1da1f2;
      }
      .fa-github {
        color: #111;
      }
      .fa-linkedin-in {
        color: #0077b5;
      }