html, body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-size: 300%;
}

p {
    font-size: 125%;
    line-height: 1.5;
}

ul {
    width: 50%;
}

li {
    font-size: 18px;
    width: 75%;
    line-height: 1.5;
    margin: 5%;
}

.header-section {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.heading {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* don't need */
    align-items: center;
    height: 100vh;
    position: absolute;
    top: 0;
}

.logo {
    width: 50%;
}

.video {
    opacity: .5;
    width: 100%;
    filter: blur(7px);
}

.members {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lisa, .jisoo, .jennie, .rose {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 5%;
}

.member-pic {
    width: 25%;
    border-radius: 50px 0 50px 0;
    border: 10px #ffb8e6 solid;
}

.member-text {
    width: 35%;
}

.dif {
    border-radius:  0 50px 0 50px;
}
.member-drawing, .fashion-drawing {
    width: 40%;
    margin: 10% auto 5%;
}

.fashion {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* don't need */
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.blackpinkfashion {
    width: 75%;
    border-radius: 100px 0 100px 0;
}

.move {
    position: absolute;
    bottom: 10px;
}

.move1 {
    position: absolute;
    bottom: 430px;

}

.fashion-row-1, .fashion-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 80vh;
    margin: 10%;
}

.fashion-row-2 {
    margin: 0 0 10%;
}

.a, .c, .e, .g {
    align-self: flex-start;
    position: relative;
}

.b, .d, .f, .h {
    align-self: flex-end;
    position: relative;
}

.fashion-single-image {
    height: 500px;
    z-index: 0;
}

.back-layer,.back-layer-1 {
    position: absolute;
    width: 400px;
    z-index: -1;
    left: 0;
    transform:translateX(-25%)
}

.back-layer-1 {
    width: 350px;
}

.awards {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* don't need */
    align-items: center;
    width: 100%;
    height: 100%;
}

.accomplishment-drawing {
    width: 60%;
    margin: 10% auto 5%;
}

.pink-span {
    font-weight: bolder;
}

.award-subdiv {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
}

.award-subdiv div {
    display: flex;
    justify-content: center;
    align-items: center;

}

.award-pic {
    width: 70%;
    border-radius: 0 50px 0 50px;
    border: 10px black solid;
}

.footer {
    margin: 20% 0 2% 0;
}

.fpic, .selfie {
    width: 500px;
    height: 300px;
    opacity: .75;
}

.collage-pic {
    position: relative;
    height: 100vh;
}

.pic1, .pic2, .pic3, .pic4, .pic5, .pic6, .pic7, .selfie {
    border-radius: 75px 0 75px 0;
    position: absolute;
    filter: blur(3px);
    left: 0;
}

.pic1, .pic3, .pic4, .pic7 {
    border-radius: 0 75px 0 75px;
}

.pic1 {
    transform: translateX(-10%) rotate(15deg) ;
}

.pic2 {
    transform: translateX(30%) translateY(69%) rotate(-17deg);
}

.pic3 {
    transform: translateX(76%) translateY(120%) rotate(7deg);
}

.pic4 {
    transform: translateX(59%) translateY(-37%) rotate(7deg);
}

.pic5 {
    transform: translateX(170%) translateY(101%) rotate(-7deg);
}

.pic6 {
    transform: translateX(149%) translateY(-37%) rotate(9deg);
}

.pic7 {
    transform: translateX(186%) translateY(49%) rotate(3deg);
}

.selfie {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(100%) translateY(49%);
    border: 10px #ffb8e6 solid;
}

.footer-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}