/*
This challenge was awesome
At first I made too many divs
Also making those elemnts fit together like this was confusing, took trial and error
So I can't really explain like a pro how I did it but I did this myself no ai
I also learnt something new today border-radius to make rounder corners
I haven't learnt responsive design and I just started learning flex box
*/

body {
    margin: 0;
    background-color: hsl(212, 45%, 89%);
}

.color {
    background-color: white;
    width: 350px;
    margin:50px auto;
    border-radius: 10px ;
    font-family: 'Segoe UI';
}

img {
    width: 300px;
    margin: 24px auto;
    margin-left: 24px;
    border-radius: 7px;
}

h1 {
    color: hsl(218, 44%, 22%);
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin: 10px;
}

p {
    font-size: 15px;
    text-align: center;
    padding-bottom: 35px;
    font-weight: 400;

}