* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background: linear-gradient(107.54deg, #4f3372 0%, #b078f4 100%);
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Heebo', sans-serif;
}

.profile {
    width: 375px;
    height: 605px;
    background: #fdfcfe;
    border-radius: 12px;
    border: 1px solid #f4effa;
    box-shadow: 0px 52px 21px rgba(30, 30, 30, 0.01), 0px 29px 18px rgba(30, 30, 30, 0.05), 0px 13px 13px rgba(30, 30, 30, 0.09), 0px 3px 7px rgba(30, 30, 30, 0.1), 0px 0px 0px rgba(30, 30, 30, 0.1);
    padding: 24px 24px 16px 24px;
}

.picture {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
}

.picture h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #38343d;
}

.picture span {
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: #686071;
}

hr {
    border: 1px solid #f4effa;
    margin: 16px 0;
}

label {
    font-size: 15px;
    line-height: 12px;
    letter-spacing: 4%;
    color: #797085;
}

.feature {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature section {
    display: flex;
    justify-content: space-between;
}

.feature div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature div p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #38343d;
}

i {
    font-size: 20px;
    color: #38343d;
}

.ph-caret-right {
    color: #797085;
}

#out, .ph-sign-out {
    color: red;
}


@media (min-width: 500px) and (max-width: 768px) {
    .profile {
      width: 90%;
      height: auto;
    }
  
    .picture {
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 16px;
    }
  
    .picture h3 {
      font-size: 16px;
      line-height: 20px;
    }
  
    .picture span {
      font-size: 14px;
      line-height: 16px;
    }
  
    .feature section {
      flex-direction: column;
    }
  
    .feature div {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .feature div p {
      font-size: 14px;
      line-height: 18px;
    }
  
    i {
      font-size: 18px;
    }
  }