styles.css

@import url('https://fonts.googleapis.com/css?family=Quicksand');


body {
    font-family: 'Quicksand', sans-serif;
    background-color:#c9d3f5;
}

.title {
    margin-left: 88px;
    color: white;
    font-size: 50px;
    font-weight: bold;
}

.row1 {
    display: flex;
    direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
}

.row2 {
    display: flex;
    direction: row;
    justify-content: center;
}

#left-arrow {
    margin-top: 200px;
    font-size: 60px;
    color : #faa09b;
}

#letter {
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 25px;
    background-color: white;
    border-radius: 30px;
    width: 650px;
}

#right-arrow {
    font-size: 60px;
    margin-top: 200px;
    color : #faa09b;
}

#intro {
    margin: 30px;
    color : #faa09b;
    font-size: 30px;
}

#conclusion {
    margin: 30px;
    text-align: right;
    color : #faa09b;
    font-size: 30px;
}

#letter-body{
    margin-left: 60px;
    margin-right: 60px;
    font-size: 16px;
    color: #4f4f4f;
}

#tracker-wrapper {
    display: flex;
    justify-content: center;
}

#tracker {
    display: flex;
    justify-content: center;
    padding: 5px;
    color: white;
    font-weight: bolder;
    font-size: 20px;
    border-radius: 330px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    width: 115px;
    margin-bottom: 25px;
}


#heart-img {
    margin: 15px;
}

.heart {
    z-index : 999;
    position : absolute;
 }
 .heart:before,
 .heart:after {
    content : "";
    background-color : #faa09b;
    position : absolute;
    height : 30px;
    width : 45px;
    border-radius : 15px 0px 0px 15px;
 }
 .heart:before {
    transform : rotate(45deg);
 }
 .heart:after {
    left : 10.5px;
    transform : rotate(135deg);
 }