/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/figtree-v8-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree-800';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/figtree-v8-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root{
    --cl-yellow: hsl(47, 88%, 63%);
    --cl-white: hsl(0, 0%, 100%);
    --cl-grey-500: hsl(0, 0%, 42%);
    --cl-grey-950: hsl(0, 0%, 7%);
    --ff-primery:'figtree', Arial, Helvetica, sans-serif;
    --ff-primery-800:'figtree-800', Arial, Helvetica, sans-serif;
    --cl-background:var(--cl-yellow);
    --cl-background-wrapper: var(--cl-white);
    --cl-primery-heading:var(--cl-grey-950);
    --cl-text:var(--cl-grey-500);
    --cl-btn:var(--cl-yellow);
}

*,
*::before,
*::after{
    box-sizing: border-box;
}
body{
    background-color: var(--cl-background);
    margin: 0;
    font-family: 'figtree', Arial, Helvetica, sans-serif;
    font-size: 16px;
}
h1{
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
}
p{
    line-height: 1.3;
}
.text{
    color: var(--cl-text);
}
img{
    max-width: 100%;
    height: auto;
}
.cont{
     display: grid;
    place-items: center;
    height: 100vh;
}
.wrapper{
    max-width: 24rem;
    background-color: var(--cl-background-wrapper);
    padding: 1.4em;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 9px 9px 0 1px rgba(0, 0, 0,1);
}
.illustration{
    border-radius: 12px;
    margin-block-end: 1.3em;
}
.profile{
    width: 30px;
    height: auto;
}
button{
    font-weight: bold;
    background-color: var(--cl-btn);
    border: none;
    border-radius: 5px;
    padding: 0.5em .9em;
    font-weight: 800;
}




.Blogger{
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
    p{
        color: var(--cl-primery-heading);
        font-weight: 800;
    }
}