main.css

/*css card styling*/

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500;600&display=swap");

img {
    width: 100%;
    border-radius: 12px;
    height: 214px;
    object-fit: cover;
}

body {
    background-color: #eaeff1;
    font-family: "Raleway", sans-serif;
}

#container {
    max-width: 300px;
    margin: 0 auto; /*center the container in middle on horizotal axis*/
    margin-top: 20vh; /*add empty space above the container (20% of the view height*/
}

.card {
    background-color: white;
    border: 1px solid #bacdd8;
    padding: 8px; /*add space between border and content*/
    border-radius: 12px;
}

.tag {
    padding: 4px 8px;
    border: 1px solid #e5eaed;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #788769;
}

.card_name {
    font-size: 24px;
    font-weight: 600;
    margin-top: 16px;
}

p {
    font-size: 14px;
    color: #7f8c9b;
    line-height: 150%;
}

button {
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    color: #7f8c9b;
    background-color: #e0efff;
    margin: 0 auto;
    display: block; /*convert inline elemt to display as a block*/
    cursor: pointer; /*button is a clickable element, therefore it should have a pointer cursor*/
}

.card_details {
    padding: 16px 8px 8px 8px;
}

button:focus,
button:hover { /*add style when button is focused or hovered*/
    background-color: #0077ff;
    color: #ffffff;
}