@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&family=Fraunces:opsz,wght@9..144,700&family=Kanit:wght@200&family=Lobster&family=Manrope:wght@500;700&family=Montserrat:wght@500&family=Outfit:wght@400;700&family=Pacifico&family=Red+Hat+Display:wght@500;700;900&family=Space+Grotesk:wght@500&display=swap');

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

body{
  width: 100%;
  height: 100vh;
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.card{
  display: flex;
  flex-direction: column;
  max-width: 375px;
  border-radius: 10px;

  box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 5%);
}

img[alt="background"]{
  height: 25vh;
  border-radius: 10px 10px 0 0;
}

h1{
  padding: 2em 2em 1em 2em;
  font-size: 18px;
  color: hsl(217, 19%, 35%);
  line-height: 1.5em;
  font-weight: 700;
}

h2{
  padding: 0 2em 2em 2.8em;
  font-size: 13px;
  color: hsl(214, 17%, 51%);
  line-height: 20px;
  margin-right: 2.5em;
}

.card-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 0 0 10px 10px;
  position: relative;
}

.footer{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  padding: 1em 2em 1.5em 2em;
  gap: 1em;
  z-index: 1;
}


.info{
  width: 100%;
}

img[alt="avatar"]{
  width: 18%;
  border-radius: 50%;
}

.info > p{
  font-size: 13px;
}

.name{
  font-weight: 700;
}
.date{
  color: hsl(214, 17%, 51%);
}
.circle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 37px;
  background-color: hsl(210, 46%, 95%);
  border-radius: 50%;
  position: relative;
}

  #socials{
    display:none;
    padding:1.3em;
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    gap: 1em;
    background-color: hsl(217, 19%, 35%);
    border-radius: 0 0 10px 10px;
  }

  #socials>p{
    font-size: 14px;
    letter-spacing: 4px;
    font-weight: 500;
    color: hsl(212, 23%, 69%);
    margin-right: 1em;
  }

img[alt="facebook"],img[alt="twitter"],img[alt="pinterest"], .share{
      cursor:pointer;
}

  .circle2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11%;
    height: 35px;
    background-color: hsl(210, 46%, 95%);
    border-radius: 50%;
    margin-left: 3em;
  }

#socials-1200{
  display: none;
  background: hsl(217, 19%, 35%);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1em;
  z-index: 11;
  position: absolute;
  top: -105px;
  padding: 1.2em 2.5em 1.2em 2.5em;
  border-radius: 10px;
}

#socials-1200>p{
  color: hsl(212, 23%, 69%);
  letter-spacing: 3px;
  font-size: 13px;
}

.cube{
  z-index: -12;
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: hsl(217, 19%, 35%);
  transform: translateY(130%) rotate(45deg);
}

@media screen and (width > 1200px) {
  .card{
    display: flex;
    max-width: 900px;
    flex-direction: row;
    border-radius: 10px;
    height: 400px;
  }

  h1{
    padding: 2em 2.3em 1em 1.5em;
    font-size: 26px;
    color: hsl(217, 19%, 35%);
    line-height: 1.5em;
    font-weight: 700;
  }

  h2{
    padding: 0 2em 2em 2.6em;
    font-size: 15px;
    color: hsl(214, 17%, 51%);
    line-height: 22px;
    margin-right: 3em;
  }

  img[alt="background"]{
    height: 100%;
    max-width:40%;

    border-radius: 10px 0px 0 10px;
  }

  .card-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0 10px 10px 0px;
  }

  img[alt="avatar"]{
    width: 15%;
    border-radius: 50%;
  }
  .footer{
    padding: 0em 2em 1.5em 2em;
  }

  .circle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16%;
    height: 70%;
    background-color: hsl(210, 46%, 95%);
    border-radius: 50%;
    margin-right: 1.5em;
  }
  img[alt="share"]{
    width:35%;
  }
}