/* style of main page */
main {
    margin: 0 auto;
    padding: 30px 140px 0 140px;
    
}

body {
    background-color: #f7f7f7;
    line-height: 1.5em;
}
h1, h2, h3, p, ol, li, footer {
    font-family: 'Montserrat', sans-serif;
    color: #505C5A
}

/* title */
.title {
    display: flex;
    justify-content: center;
}

.s-container {
    display: flex;
    justify-content: center;
}

/* first sketch */
.sketch1 {
    display: flex;
    border-radius: 20px;
    width: 70%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    margin-bottom: 30px;
}

.title-main {
    font-weight: 00;
    display: flex;
    justify-content: center;
}

.sketch-container {
    display: flex;
    justify-content: center;
}

/* first sketch */
.sketch {
    display: flex;
    width: 70%;
    margin-bottom: 30px;
}

.maps {
    display: flex;
    justify-content: center;
}
.empathy-box {
    display: flex;
    border-radius: 20px;
    max-width: 70%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    margin: 15px;
    
}
.storyboard-container {
    display: flex;
    justify-content: center;
}
.storyboard { 
    border-radius: 20px;
    width: 70%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    margin-bottom: 30px;
    
}

#carol {
    border-radius: 20px;
    width: 70%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    margin-bottom: 30px;
}

#mark {
    border-radius: 20px;
    width: 70%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    margin-bottom: 30px;
}

.part-3 {
    margin-bottom: 50px;
}

.observation-box, .interview-box {
    display: flex;
    justify-content: center;
    
}

#interview {
    width: 300px;
}

.box {
    background-color: #fafafa;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    color:#767D70;
    font-size: 15px;
    line-height: 1.3em;
    margin: 10px;
    width: 250px;
}

.box-text {
    display: flex;
    flex-direction: column;
    margin: 20px;
    margin-top: 5px;
}

footer {
    display: flex;
    justify-content: center;
}

.heart {
    color: #DD6E6D;
    padding-right: 5px;
    padding-left: 5px;
}