/* Importing Font */
@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/Figtree-VariableFont_wght.ttf");
}
/* Variables */
:root {
  --primary-color: hsl(47, 88%, 63%);
  --gray-500: hsl(0, 0%, 42%);
  --gray-950: hsl(0, 0%, 7%);
  --base-font: 16px;
  --element-margin: 20px;
}
/* End Variables */
body {
  background: var(--primary-color);
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Figtree", sans-serif;
}
.container {
  padding: 20px;
  border: 1px solid black;
  background: #fff;
  border-radius: 10px;
  box-shadow: 10px 10px 0 black;
}
.container .image {
  text-align: center;
}
.container .image img {
  border-radius: 10px;
  margin-bottom: var(--element-margin);
}
.container .text .subject {
  padding: 5px;
  cursor: pointer;
  background: var(--primary-color);
  color: black;
  width: fit-content;
  font-weight: 600;
  border-radius: 5px;
  margin-bottom: calc(var(--element-margin) - 10px);
}
.container .text .date {
  color: var(--gray-950);
  margin-bottom: var(--element-margin);
}
.container .text .blog {
  width: 340px;
}
.container .text .blog h2 {
  color: var(--gray-950);
  cursor: pointer;
  transition: all 300ms ease;
}
.container .text .blog h2:hover {
  color: var(--primary-color);
}
.container .text .blog > p {
  color: var(--gray-500);
  margin-bottom: var(--element-margin);
}
.container .text .author {
  display: flex;
  align-items: center;
}
.container .text .author img {
  width: 30px;
  margin-right: 10px;
}
@media (min-width: 300px) and (max-width: 600px) {
  .container,
  .container .image img,
  .container .text {
    width: 250px;
  }
  .container .text .blog h2 {
    font-size: 20px;
  }
  .container .text .blog > p {
    font-size: calc(var(--base-font) - 3px);
    width: 300px;
  }
}