styles.css

body {
    font-family: 'Playfair Display', serif;
    text-align:center;
    margin:0;
}

h2 {
    font-size:2rem;
}

.flex {
    display:flex;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight:bold;
}


#hero-section {
    background-image: url("https://64.media.tumblr.com/cf4d2f83a6b5cd74bcdfecab71b99d00/tumblr_mp7wf5nMyE1rdnwxgo1_1280.png");
    background-size:cover;
    background-position-y: center;
    height:400px;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    color:white;
}

#hero-cta {
    background: #696f91;
    padding:5px 10px;
    border-radius:5px;
    font-weight: bold;
    font-size:2.5rem;
}

#hero-supp {
    background:#F55887 ;
    padding:5px 10px;
    border-radius:5px;
    font-weight: bold;
    font-size:1.8rem;
}

#characters-section {
    flex-direction:row;
    padding:40px 0;
    background:#e8f4ea;
}

#character-box {
    justify-content: center;
    align-items:center;
}

.character {
    flex-direction:column;
    padding:20px 50px;
    width:300px;
}

.characters-img {
    width:150px;
    border-radius:50%;
    margin:auto;
}

#card {
    background:#696f91;
    margin:100px auto;
    width:600px;
    padding:50px;
    justify-content: space-between;
    text-align:center;
    flex-direction:row;
    font-size:1.3rem;
    border-radius:10px;
}

#card-img {
    width:200px;
    border-radius:10px;
}

#guide-description {
    padding:20px 40px;
}