*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}


body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}


body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  font-family: inherit;
}


h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}


h1, h2,
h3, h4 {
  text-wrap: balance;
}


a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}


img, picture {
  max-width: 100%;
  display: block;
}


input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}


textarea:not([rows]) {
  min-height: 10em;
}


:target {
  scroll-margin-block: 5ex;
}


ul[role='list'],
ol[role='list'] {
  list-style: none;
}

:root{
    --Very-Dark-Grayish-Blue:hsl(217, 19%, 35%);
    --Desaturated-Dark-Blue: hsl(214, 17%, 51%);
    --Grayish-Blue: hsl(212, 23%, 69%);
    --Light-Grayish-Blue: hsl(210, 46%, 95%);

    --fs: 13px;

    --ff:"Barlow Semi Condensed", sans-serif;

    --fw-500:500;
    --fw-700:700;

}

body{
    background-color: var(--Light-Grayish-Blue);
    font-size: var(--fs);
    font-family: var(--ff);
    font-weight: var(--fw-500);
    color: var(--Very-Dark-Grayish-Blue);

    
}
/* desktop design */
.container {
  min-height: 100vh;
  display: flex;

  justify-content: center;
  align-items: center;

}

.wrapper {
  margin: 2rem;
  
  overflow: hidden;

  border-radius: 1rem;
  background-color: white;

  display: flex;
  flex-direction: row;

  height:max-content;
  width: 600px;
}

.wrapper .drawer_image,
.content {
  width: 50%;
}


.content {
  padding:2rem;
}

.content p {
  padding: 1.5rem 0;
  text-align: left;

  padding-bottom: 0;
}

.profile {
  display: flex;
  flex-direction: column;

}

.profile_names{
  display: flex;
  flex-direction: column;

}

.profile_names p{
  padding: 0;
}


.profile_section {
  display: flex;
  flex-direction: row;

  gap: 1rem;

  padding: 1rem 0;
}

.profile .profile_section > img {
  aspect-ratio: 1;
  height: 45px;
  border-radius: 50%;

}

.profile .profile_name p{
  padding: 0;
}


.profile_section > button {
  margin-left: auto;
}

button {
  aspect-ratio: 1;
  height: 35px;
  border-radius: 50%;
  background-color: var(--Light-Grayish-Blue);
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  outline: none;
  color: var(--Light-Grayish-Blue);
  
}
/* Desktop Styles */
@media screen and (min-width: 376px) {
  .profile_section {
    position: relative;
  }

  .share-Overlay {
    width: 250px;
    height: 50px;

    position: absolute;
    top: 50%; /* Adjust as needed */
    left: 64%; /* Adjust position above the share button */
    transform: translateX(-50%);

    background-color: var(--Very-Dark-Grayish-Blue);
    color: var(--Grayish-Blue);

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.4rem;

    border-radius: 0.5rem;
  }

  .share-Overlay::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 40%;
    transform: translateX(-50%);

    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--Very-Dark-Grayish-Blue);
  }

  .share-Overlay p {
    font-size: 15px;
    letter-spacing: 2.8px;
  }

  .share-Overlay button{
    background-color: var(--Desaturated-Dark-Blue);
    height: 24px;
  }
}

/* mobile design */
@media screen and (max-width: 375px) {

    .wrapper {
      margin: 4rem 1rem ;
      
      overflow: hidden;

      border-radius: 1rem;
      background-color: white;

      display: flex;
      flex-direction:column;

      width: calc(100%-2rem);
      height: fit-content;
      
    }

    .wrapper .drawer_image{
      width: 100%;
      object-fit: cover;
    }

    .content {
      padding: 0 1.5rem;
      margin-top: 1.5rem;

      width: 100%;
    }
    
    .content p {
      padding: 1.5rem 0;
      text-align: left;

      padding-bottom: 0;
    }

    .profile {
      display: flex;
      flex-direction: column;

    }
    .profile_names{
      display: flex;
      flex-direction: column;
      padding-bottom: 1.5rem;
    
    }    
    .profile_names p{
      padding: 0;
    }
    
    .profile_section {
      display: flex;
      flex-direction: row;

      gap: 1rem;

      padding: 1rem 0;
    }

    .profile .profile_section > img {
      aspect-ratio: 1;
      height: 45px;
      border-radius: 50%;

    }

    .profile .profile_name p{
      padding: 0;
    }

    .profile_section > button {
      margin-left: auto;
    }
    
    button {
      aspect-ratio: 1;
      height: 35px;
      border-radius: 50%;
      background-color: var(--Light-Grayish-Blue);
      background-repeat: no-repeat;
      background-position: center;
      border: none;
      outline: none;
      color: var(--Light-Grayish-Blue);
      
    }

    /* overlay */

    .share-Overlay {
      background-color: var(--Very-Dark-Grayish-Blue);
      color: var(--Grayish-Blue);

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding: 1rem 2rem;
      margin-top: 0.8rem;
      
    }
    .share-Overlay p {
      font-size: 15px;
      letter-spacing: 2.8px;
    }

    .share-Overlay button{
      background-color: var(--Desaturated-Dark-Blue);
    }

}