@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

/* CSS RESET */

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

/* CSS VARIABLES */

:root {
  /* COLORS */
  --Yellow: hsl(47, 88%, 63%);
  --White: hsl(0, 0%, 100%);
  --Gray-Light: hsl(0, 0%, 42%);
  --Gray-Dark: hsl(0, 0%, 7%);
}

/* GENERAL STYLES */

header {
  position: absolute;
  left: -10000px;
}

body {
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  margin: 2rem auto;
  padding: 1rem;
  background-color: var(--Yellow);
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 100vh;
}

main {
  background-color: var(--White);
  padding: 1.5rem;
  max-width:400px;
  width:90%;
  display: flex;
  flex-direction:column;
  border: 1px solid var(--Gray-Dark);
  border-radius: 15px;
  box-shadow: 5px 5px 0 var(--Gray-Dark);
}

main:active {
  transform: translateY(2px);
}

#blog-pic {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.tag {
  font-size: 0.75em;
  font-weight: bold;
  padding: 0.5em 0.75em;
  margin-top:1rem;
  background-color: var(--Yellow);
  width: fit-content;
  border-radius: 3px;
}

.tag.description {
  font-weight: normal;
  background-color: var(--White);
  margin: 0.5em;
}

.blog-details.heading {
  margin-top:0.5em;
  font-size:1.2em;
  cursor:pointer;
  transition:color 0.3s ease-in-out;
}

.blog-details.heading:hover {
  color: var(--Yellow);
}

.blog-details.description {
  font-size: 0.9em;
  color: var(--Gray-Light);
  margin-top:0.5em;
  line-height:1.4;
}

section {
  display: flex;
  align-items:center;
  margin-top:1em;
}

.avatar {
  margin-right:0.5em;
  border-radius:50%;;
}

.avatar.name {
  font-weight: bold;
  font-size: 0.9em;
}

/* RESPONSIVE DESIGN */

/* SMALL SCREENS (PHONES)*/

@media (max-width: 480px) {
  body {
    margin: 1rem;
    padding: 0.5rem;
  }
  main {
    width: 95%;
    padding:1rem;
  }
  .blog-details.heading{
    font-size:1rem;
  }
}

/* MEDIUM SCREENS (TABLETS) */
@media (min-widths:481px) and (max-width:1024px) {
  main {
    max-width:450px;
  }
}

/* LARGE SCREENS (DESKTOPS) */
@media (min-width:1025px) {
  main {
    max-width:500px
  }
}