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

:root{
    --yellow: hsl(47, 88%, 63%);;
    --white: hsl(0, 0%, 100%);
    --gray-500: hsl(0, 0%, 42%);
    --gray-950: hsl(0, 0%, 7%);
    --font-size:16px;
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}


body{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color:var(--yellow);
    font-family: 'Figtree', cursive;
    font-size: var(--font-size);
    margin: 0;
    padding: 0;
    height:calc(100vh - 1px);
}

.container{
    display:flex;
    flex-direction:column;
    align-items:center;
    border-radius:10px;
    border:1px solid black;
    background-color:var(--white);
    box-shadow:5px 5px 8px black;
    width:80vw;
    height:70vh;
    max-height: 450px;
}
.svg{
    width:86%;
    border-radius:10px;
    overflow:hidden;
    margin-top:13px;
}


.content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    margin:20px;
}

.content > h1{
    font-size:1.4rem;
    margin-bottom:0.9rem;
}
.content > h2{
    font-size:0.8rem;
    background-color:var(--yellow);
    margin-bottom:0.5rem;
    padding:4px;
    border-radius:4.5px;
}
.content > time{
    color:var(--gray-950);
    font-size:1rem;
    margin-bottom:0.9rem;
}
.content > p{
    color:var(--gray-500);
    font-size:0.8rem;
}

.attribution { 
font-size: 11px; 
text-align: center; 
}
    
.attribution a {
 color: hsl(228, 45%, 44%);
}

.footer{
    display:flex;
    flex-direction:row;
    align-self:flex-start;
    justify-content: center;
    font-size:0.5rem;
    margin:0 0 20px 20px;
    
}
.footer > img{
    height:30px;
    width:30px;
}
.footer > h2{
    margin: 6px 0 0 5px;
}


@media (min-width:456px){
    .container{
        max-width:350px;
        min-width:350px;
    }
}
/*<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>