* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}

html, body {
    height: 100%; 
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

img {
    width: 100%;
}

#container {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgb(202,41,62);
    background: linear-gradient(0deg, rgba(202,41,62,1) 24%, rgb(89, 154, 197) 100%); 
    overflow: hidden;
}

#caption {
    position: fixed;
    top: 15%;
    left: 30%;
    transform: translateY(-50%);
    transform: translateX(-50%);
}

#caption h1 {
    font-size: 7rem;
    color: white;
}

#caption2 {
    position: fixed;
    top: 30%;
    right: 5%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    width: 30%;
    text-align: end;

}

#caption2 p {
    font-size: 1.2rem;
    color: white;
}

#caption h3 {
    font-size: 2rem;
    color: white;
}

#layer1, #layer2, #layer3, #layer4, #layer5, #layer6, #layer7, #layer8{
    position: absolute;
    bottom: 0;
    left: 0;
}

#layer1 {

} 

#layer2 {
    width: 176%;
    margin-left: -38%;
    bottom: 9%;
} 

#layer3 {
    width: 146%;
    margin-left: -31%;
    bottom: 14%;
} 

#layer4 {
    width: 195%;
    margin-left: -100%;
    bottom: 6%;
} 

#layer5 {
    width: 160%;
    margin-left: -30%;
    bottom: 10%;
} 

#layer6 {
    width: 180%;
    margin-left: -40%;
    bottom: 11%;
} 

#layer7 {
    width: 200%;
    margin-left: -50%;
    bottom: 10%;
} 

#layer8 {
    background-color: #2d112b;
    width: 100%;
    height: 100px;
}