@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
.manrope {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Colors */
/* Fonts */
/* 13px */
/* Spacing */
/* Radius */
/* CSS-reset */
*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, li, ol, ul, p {
  padding: 0;
  margin: 0;
}

html, body {
  min-height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: Manrope, sans-serif;
  font-size: 0.8125rem;
  background-image: linear-gradient(hsl(214, 47%, 95%), hsl(214, 47%, 95%));
}

.tooltip, .tooltip .active {
  display: none;
}

.card {
  margin-inline: 1.5rem;
  max-width: 90%;
  overflow: hidden;
  background-color: white;
  border-radius: 0.75rem;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

header {
  height: 13rem;
}

main, footer {
  padding: 1rem 2rem 1rem 2rem;
}

.image_container {
  width: 100%;
}

.header_image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.title {
  color: hsl(217, 19%, 35%);
  font-size: 1rem;
  font-weight: 700;
}

.desc {
  color: hsl(214, 17%, 51%);
}

main .text_div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  letter-spacing: 0.015rem;
  line-height: 1.5;
}

footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  position: relative;
  width: 100%;
  height: 4.5rem;
}
footer .share_text, footer .socials {
  display: none;
}
footer .avatar {
  border-radius: 50%;
  height: 2.5rem;
}
footer .author {
  color: hsl(217, 19%, 35%);
  font-weight: 700;
}
footer .date {
  color: hsl(212, 23%, 69%);
}
footer .circle_container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 2rem;
  width: 2rem;
  right: 2rem;
  border-radius: 50%;
  background-color: hsl(210, 46%, 95%);
}
footer .circle_container svg {
  height: auto;
  width: auto;
}
footer .circle_container .share_button {
  color: hsl(214, 17%, 51%);
}
footer .circle_container:hover {
  cursor: pointer;
}
footer.active {
  background-color: hsl(217, 19%, 35%);
}
footer.active .avatar, footer.active .author, footer.active .date {
  display: none;
}
footer.active .socials, footer.active .share_text {
  display: block;
}
footer.active .circle_container {
  background-color: hsl(214, 17%, 51%);
  color: white;
}
footer.active .circle_container .share_button {
  color: white;
}

.share_text {
  letter-spacing: 0.3rem;
  color: hsl(210, 46%, 95%);
  font-weight: 200;
}

@media (min-width: 750px) {
  html {
    font-size: 200%;
  }
  .card > header {
    grid-area: header;
  }
  .card > main {
    grid-area: main;
  }
  .card > footer {
    grid-area: footer;
  }
  .card {
    overflow: hidden;
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-areas: "header main" "header footer";
    max-width: 57vw;
  }
  header {
    height: 100%;
  }
  .title {
    font-size: 1.25rem;
  }
  footer {
    padding-bottom: 2rem;
    padding-top: 0;
  }
  footer svg {
    transform: scale(2);
  }
  footer.active {
    background-color: white;
    border-radius: 0.75rem;
  }
  footer.active .socials, footer.active .share_text {
    display: none;
  }
  footer.active .avatar, footer.active .author, footer.active .date {
    display: block;
  }
  footer.active .circle_container {
    background-color: hsl(214, 17%, 51%);
  }
  .tooltip {
    position: absolute;
    background-color: hsl(217, 19%, 35%);
    border-radius: 0.75rem;
    padding-inline: 1rem;
    display: none;
    z-index: 999;
  }
  .tooltip .flex_container {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    width: auto;
    padding: 1rem;
  }
  .tooltip .flex_container .share_text, .tooltip .flex_container .socials {
    display: inline;
  }
  .tooltip .flex_container .socials {
    transform: scale(2);
  }
  .tooltip .flex_container .socials:hover, .tooltip .flex_container .socials:focus {
    cursor: pointer;
  }
  .tooltip::after {
    content: "";
    top: 100%;
    left: 45%;
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    border-top: 0.75rem solid hsl(217, 19%, 35%);
  }
  .tooltip.active {
    display: block;
  }
}/*# sourceMappingURL=style.css.map */