@font-face {
    font-family:"Italic";
    src:url("./assets/fonts/static/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
}
@font-face {
    font-family:"Medium";
    src:url("./assets/fonts/static/Figtree-Medium.woff2") format("woff2");
}
@font-face {
    font-family:"ExtraBold";
    src:url("./assets/fonts/static/Figtree-ExtraBold.woff2") format("woff2");
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
    background-color: hsl(47, 88%, 63%);
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    margin:0;
}
main {
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
.card {
   width:26vw;
   height:53vh;
   max-width:384px;
   max-height:522px;
   min-width:312px;
   min-height:499px;
   border-radius: 20px;
   background-color: hsl(0, 0%, 100%);
   padding:24px;
   display:flex;
   flex-direction: column;
   justify-content:center;
   border: solid 1px hsl(0, 0%, 7%);
   box-shadow: 8px 8px 0px black;
}
@media (max-width:434px) {
    .card {
       width:67vw;  
    }
}
.text-1 {
    background-color: hsl(47, 88%, 63%);
    width:85px;
    padding:7px 0 10px 0;
    text-align:center;
    font-family: "ExtraBold";
    font-size: small;
    margin:24px 0 12px 0;
    border-radius:4px;

}
.date-publish-text {
    font-family: "Medium";
    margin:0 0 17px 0;
    font-size:clamp(12px, 1vw, 14px);
}
.title-text {
    margin: 0 0 30px 0;
    font-size:clamp(22px, 1vw, 26px);
    font-family: "ExtraBold";
    cursor:pointer;
    transition: color 0.4s ease-in-out;
    color:black;
}
.title-text:hover {
    color:hsl(47, 88%, 63%);
    
}
.descript-text {
    margin: 0;
    font-family: "Medium";
    font-size: clamp(15px, 1vw, 19px);
    text-align: left;
    line-height: 160%;
    color:hsl(0, 0%, 42%);
    text-wrap: nowrap;
}
.container-author-info {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    width:169px;
    height:32px;
    margin:40px 0 0 0;
}
.img-avatar {
    width:32px;
}
.img-illustration {  
    width:100%;
    height:210px;
    border-radius:10px;
}
.author-info {
    margin:7px 0 5px 12px;
    font-family:  "ExtraBold";
    font-size: 14px;
}