style.css

   *{
     margin: 0;
   }
   html, body { 
     --black: hsl(240, 6%, 13%);
     --grey:hsl(240, 9%, 89%);
      height: 100%;
      font-family: Poppins, 'Courier New', Courier, monospace-;
      -webkit-font-smoothing: antialiased;

    }
    body {
      display: grid;
      place-items:center;
      

    }

    main {
      background:url(images/background-mob.svg);
      width: 375px;
      height: 812px;
    }
    a {
      color:var(--grey);
      text-decoration: none;
      margin-top:0.25rem;
      display:flex;
      justify-content: center;
      align-items: center;

    }
  .container{
    max-width: 250px;
    margin-left:auto;
    margin-right: auto;
    text-align: center;
    color: var(--grey);

    
  }
  .avatar {
    width: 10rem;
    margin: 11.5rem auto 0;
    position:relative;
    
  }
  .avatar span {
    position:absolute;
    top: -15px;
    z-index: 1;
    
  }
  .avatar >img {
    width: 10rem;
    height: 11.5rem;
    object-fit: cover;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }
    h1{
      font-size: 1.5rem;
      margin-top: 1.5rem;
  
      
    }   
    p {
      margin-top: 2rem;
    } 
    ul{
      margin-top: 4rem;
      display: flex;
      list-style: none;
      padding: 0;
      gap: 0.5rem;
      justify-content: center;
      
      
      
    }