style.css

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Lexend+Deca&family=Montserrat:ital,wght@0,200;0,300;0,500;1,200;1,300&family=Outfit:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Lexend+Deca&family=Montserrat:ital,wght@0,200;0,300;0,500;1,200;1,300&family=Outfit:wght@400;700&display=swap');

body{
    background-color:hsl(212, 45%, 89%);
}
.container{
    background-color: hsl(0, 0%, 100%);
    width:300px;
    padding:20px;
    border-radius: 20px;
    box-shadow:1px 2px 90px 9px lightcyan;
}
h1{
    font-size:25px;
    font-family:'outfit';
    font-weight:700;
    margin-left:10px;

}
h2{
    font-size:17px;
    font-family:'outfit';
    color:hsl(220, 15%, 55%);
    margin-left:7px;
    font-weight:lighter;

}
img{
    height:300px;
    border-radius:10px;
}
body {
    display: flex;
    justify-content: center;
    align-items:center;
    height:100vh;
}
html,body{
    overflow-x: hidden;
    max-width:100%;
    overflow-y: hidden;
}
h3{
    font-size:17px;
    font-family:'outfit';
    color:hsl(220, 15%, 55%);
    margin-top:-15px;
    text-align: center;
    font-weight:lighter;

}

@media(max-width:550px) {
    .container{
    
        width:250px;
        padding:15px;
    }
    img{
        height:250px;
    }
    h1{
        font-size:20px;
        margin-left:10px;
    }
    h2{
        font-size:15px;
        margin-left:7px;
    }
    h3{
        text-align: center;
        font-size:15px;

    }
}