*{
    margin:0px;
    padding:0px;
}
.hero{
    width:100vw;
    display:grid;
    place-items:center;
    height:20vh;
    margin-bottom:10vh;
}
.hero>h1{
    font-family:'Segoe UI';
    font-size:3.5rem;
}
.characters{
    width:80vw;
    
    display:grid;
    place-items: center;
    position:relative;
    left:10vw;
}
.characters > div{
    width:80vw;
}
.characters > h2{
    font-size:3rem;
}
#pieChart{
    width:40vw;
    height:20vh;
}
.romance{
    width:80vw;
    height:100vh;
    display:grid;
    place-items: center;
    position:relative;
    left:10vw;
}
.romance > h2{
    font-size:3rem;
}
.romance > div{
    width:80vw;
}

.conversation{
    width:80vw;
    height:100vh;
    display:grid;
    place-items: center;
    position:relative;
    left:10vw;
}
.conversation > h2{
    font-size:3rem;
}
.conversation > div{
    width:80vw;
}

.popculture{
    width:80vw;
    height:100vh;
    display:grid;
    place-items: center;
    position:relative;
    left:10vw;
}
.popculture > h2{
    font-size:3rem;
}
.popculture > div{
    width:80vw;
}